◆ h系見出しタグを探して目次を自動で表示させる

目次の自動生成

このページはその機能を使っています

使い方

このスクリプトを読み込みます
function makeIndex(get_elem_selector, set_elem_selector){
var glem = document.querySelector(get_elem_selector)
var slem = document.querySelector(set_elem_selector)
if(!glem || !slem) throw "element not found"
var hs = []
!function recur(elem){
var match = elem.tagName.match(/^H([1-9])$/)
if(match){
hs.push([+match[1], elem.textContent])
}else{
[].forEach.call(elem.children, recur)
}
}(glem)
var etree = function(){
var root = document.createElement("ul")
var now_level = 1
var ptr = root
hs.forEach(function(e){
var level = e[0]
var text = e[1]
if(now_level < level){
level_in(level - now_level)
}else if(now_level > level){
level_out(now_level - level)
}
add_elem(text)
now_level = level
})
return root

function level_in(n){
while(n--){
// make "li" if empty "ul"
if(!ptr.lastElementChild){
ptr.appendChild(document.createElement("li"))
}
var ul = document.createElement("ul")
ptr.lastElementChild.appendChild(ul)
ptr = ul
}
}
function level_out(n){
while(n--){
ptr = ptr.parentElement.parentElement
}
}
function add_elem(text){
var li = document.createElement("li")
li.textContent = text
ptr.appendChild(li)
}
}()
slem.appendChild(etree)
return etree
}

makeIndex 関数を実行します

第一引数には 目次生成の対象となる要素のセレクタを入れます
その要素内の h1 や h2 などの h系見出し要素をもとに目次を作ります

第二引数には 目次の要素をセットする要素のセレクタを入れます
目次は ul と li で作られます

返り値にルートとなる ul 要素を受け取れますので クラスをつけることもできます

まとめ

目次を見せるために必要ないのにまとめ 見出しを作ったのでこれといって書くことがないです

目次が作れます 以上です