見出し（h2, h3）に数字を JavaScript で振る

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2025/11/19 12:12

ただいまコメントを受けつけておりません。

見出し（h2, h3）に数字を JavaScript で振る

h2 と h3 をとってきて offsetTop でソートし、数字を付け加えるのみ。ついでに id も振っている。動作例

const list = [].concat.apply([], ['h2', 'h3'].map((tag) => {
    return Array.from(document.getElementsByTagName(tag)).map((d) => {
       return {
           dom: d, pos: d.offsetTop, tag: tag
       };
    });
})).sort((a,b) => {return a.pos - b.pos});
let major = 0;
let minor = 0;
list.forEach((d) => {
    const pastText = d.dom.textContent;
    if(d.tag === 'h2') {
        minor = 0;
        major++;
        d.dom.textContent = `${major}. ${pastText}`;
    }
    if(d.tag === 'h3') {
        minor++;
        d.dom.textContent = `${major}.${minor}. ${pastText}`;
    }
    d.dom.id = `header_${major}_${minor}`;
});