目次を自動生成させてみる
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ 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
}
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 要素を受け取れますので クラスをつけることもできます
まとめ
目次を見せるために必要ないのにまとめ 見出しを作ったのでこれといって書くことがないです目次が作れます 以上です