目次を自動的に生成するjQueryプラグイン
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));
});
}
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;
}
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について目次を作成します。
サンプル
サンプルとプラグインは次の通りです。
[ 2014年8月20日 | カテゴリー: JavaScript | タグ: jQuery , プラグイン , 目次 ]
« Wordの一文字ぶら下げを行うマクロ | 医療費は高知が最高、千葉が最低 »
ちょうど目次の自動生成を考えていたところです。参考になりました。