目次を自動的に生成するjQueryプラグイン

Pocket

HTMLで書いたページに目次を自動的に追加するjQueryプラグインです。
h1-h6で記載した見出しを抽出し、目次を作成します。
目次には見出しへのリンクが設定されます。

このプラグインは二つのコードからできています。

プラグイン本体

プラグイン本体です。h1-h6を抽出し配列に格納します。またh1-h6にidを追加してリンク先にします。

jQuery.fn.toc = function(depth) {
    return this.each(function() {
        var headers, re, i;
        headers = [];
        re = new RegExp("h([1-" + depth + "])", "i");
        i = 0;
        $("*").each(function() {
            var ms;
            ms = $(this).get(0).tagName.match(re);
            if(ms) {
                $(this).prop("id", "header" + i);
                headers.push([
                    parseInt(ms[1]),
                    "<a href='#header" + i + "'>"
                    + $(this).html() + "</a>"
                ]);
                i++;
            }
        });
        $(this).append(array2ul(headers));
    });
}

配列をリストに

プラグイン本体で抽出した配列をulのリストにします。階層を反映します。

function array2ul(a) {
    var t, exlevel, level, i, j;
    t = "";
    exlevel = 0;
    for(i = 0; i <= a.length; i++) {
        level = i < a.length ? a[i][0] : 0;
        for(j = 0; j < Math.abs(exlevel - level); j++) {
            t += exlevel < level ? "<ul>" : "</ul>";
        }
        t += i < a.length ? "<li>" + a[i][1] + "</li>" : "";
        exlevel = level;
    }
    return t;
}

使い方

HTMLを次のようにします。
h1-h6を適切に使います。
目次をセットする箇所に「<div id="mokuji"></div>」などと書きます。bodyの先頭がよいでしょう。
スクリプトに「$("#mokuji").toc(3);」などと書きます。数字は見出しの深さです。「3」ならばh1からh3について目次を作成します。

<body>
<div id="mokuji"></div>
<h1>見出しA</h1>
<h2>見出しB</h2>
<p>本文。</p>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.toc.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#mokuji").toc(3);
});
</script>
</body>

サンプル

サンプルとプラグインは次の通りです。

サンプルページ

jquery.toc.js

[ 2014年8月20日 | カテゴリー: JavaScript | タグ: , , ]

« | »

コメント

  1. ちょうど目次の自動生成を考えていたところです。参考になりました。

  2. stabucky より:

    ありがとうございます。お役に立てれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報