目次を自動的に生成する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

写真

メタ情報