h2タグとh3タグを拾って目次を作るJavaScriptコード
タイトルの通り、特定の範囲内のh2,h3タグを拾って目次を作成するJavascriptコードを載せています。 デモページのような目次を作成できます。 textというid(id名は自由に変更可能)の要素内にある、h2,h3タグを広い、自動で目次を作ってくれます。 使い方ですが、htmlソース内に、 ・このページの下にあるJavascrptコード ・link_boxという名前のidを入れたhtml要素（ここに目次が置かれる） ・textという名前のidを入れたhtml要素（この中のh2を拾う） を入れてください。 注意点として、scriptは、link_boxやtextの後に置いてください。 また、link_box要素内は空にしておいてください。 ↓↓↓以下コードです コードは＊＊＊変更＊＊＊とコメントアウトされている部分を、必要に応じて変更して使って下さい。
<script>
//＊＊＊変更＊＊＊目次を作りたいh2,h3タグを含むid名を入れる
var box = "text"
var urltext = location.href;
contents = document.getElementById(box);
var list = contents.querySelectorAll('h2,h3');
//h2タグがあることを確認
if(list.length > 0){
//目次の作成
//link_box要素がnullか確認
if(document.getElementById('link_box') != null){
for (var i = 0; i < list.length; i++) {
list[i].id = 'content' + String(i);
};
var liststr='';
for (var i = 0; i < list.length; i++) {
blank = '・';
if(list[i].tagName == 'H3'){
blank=' -';
};
liststr = liststr + blank + '<a href="#content' + String(i) + '">' + list[i].textContent + '</a><br><br>';
};
document.getElementById('link_box').innerHTML = '<h2>目次</h2><hr class="table"><br><p>' + liststr + '</p>';
};
}