見出しを抽出して目次を自動生成するjavascript

今回は珍しくWeb系のお話です。

最近、wordpressに頼らずに自作のwebページを作成しているのですが、その際にページの見出しタグ(h1,h2など)を自動的に収集してきて勝手に目次を作ってくれるものが作れないかなと思い、自作してみましたので共有します。

 

目指すもの

これを自動生成します。

 

サンプルページ

サンプルとして、このようなhtmlのページがあったとします。この見出し1、見出し2、見出し3を収集して目次にしてみたいと思います。

 

目次を作成するための箱(div)を用意

まずは、<body>内の頭に目次を生成するための箱を用意します。

idは何でも良いですが、ここではtoc(Table of Contentsの略)としておきます。

お好みですが、この目次自体にも見出しをつけておきます。

 

見出しを自動収集するjavascriptを書く

このようなjsを作成します。わからない方はコピペで大丈夫です。

ここではとりあえず、toc_auto_generator.jsという名前で保存しておきました。

 

これを対象ページの<head>~</head>の中で読み込みます。

src=””の部分はどこにこのjavascriptを置くかによって変わりますので各自読み替えてください。

 

webページを自作している方でしたら、コードを読んだだけで何をしているかは大体わかると思いますので、多くは語りませんが、少し補足しておきます。

document.addEventListener(‘DOMContentLoaded’, function () {
目次の自動生成はDOMContentLoadedのタイミングで行われます。
これは、最初のHTMLドキュメントの読み込みと解析が完了した時に、スタイルシートや画像、サブフレームの読み込みが終わるのを待たずに発火します。

var target_toc_id = ‘toc’;
先ほど作成した目次を格納するdivタグのidをここで指定します。

var target_headline = ‘h3’;
収集するタグの種類を指定します。
ここではh3となっているが、h2やh4といったタグを使用している人は書き換えが必要です。

if ( value.id === ” ) {
目次はもちろんaタグによるページ内リンクとなります。
ページ内リンクはidを用いて行います。もし、その見出しにidがついていなかった場合には、for文のindex iを見出しのidとして設定しています。

 

 

以上、見出しを自動生成するjavascriptについてでした。