ページの目次をJavaScriptだけで後から自動で作る方法

種牡馬登録サイトで使った色々な工夫

今回はヘルプ画面で作った自動で目次を作る方法について。

まえおき

wordpressとか便利なツールを使っていると、誰かがプラグインとして目次を作ってくれているので特に気にすることはないのですが、自分でHTMLべた書きでページを構築すると、自分で1つずつ手書きするか、PHPやPerlを利用したり、目次自動挿入スクリプトを通してからアップするとか割と面倒な事をする羽目になると思います。

今回はそんな面倒な事を無くしてJavaScriptだけで勝手に文章内の情報を取得して目次を作る方法です。

一度、目次付きのページの基本を作ってしまえば、あとは目次に対してはメンテフリーで好きなだけ項目の増減が可能になります。

(作ってみて、JavaScriptってここまで何でもできるのか！と感心していたりします。)

作り方

使用するのは「document.getElementsByTagName(タグ名)」です。

これを使えば、文章内の(タグ名)で指定したタグのエレメントを全て取得することができます。

取得したエレメントからinnerHTMLで目次のタイトルを取得し、ついでにidをセットしてしまえば飛び先を自動的に作れます。

あとは、そのidへのリンクのリストを作ってしまえば目次が出来上がるわけです。

全体のソースコード

簡易ソースコードです。

// h1のタグのエレメントを取得
var elements = document.getElementsByTagName("h1");
var indexStr = "";

for ( var i = 0; i < elements.length; i++ ) {
  // 飛ぶ先のIDを決め、各h1のタグのidにIDをセットしながら、
  // そのIDへ飛ぶためのリンクを生成するループ
  var linkHashName = "indexLink_" + (i+1);
  elements[i].id = linkHashName;
  indexStr += (i+1) + ". ＜a href=\"#" + linkHashName + "\"＞" + elements[i].innerHTML + "＜/a＞";
}

// 目次となるリンクを出力する
document.writeln("目次 ＜br /＞");
document.writeln(indexStr);

サンプル

最後にサンプルへのリンクを置いておきます。

上で書いたソースを改良し目次を作る領域を指定したり、関数化したり、と少し高度な事をやっています。

利用、改変などはご自由にどうぞ。

使っているページへのリンクも置いておきます。
(ページの少し下の右側に「ページ内目次」を置いています。)

補足

h2とかh3とかへのリンクも含めた目次を作りたい・・・と、普通なら思いますが、作るのはそんなに簡単じゃないです。

理由は、<h1>目次1</h1>~<h1>目次2</h1>の間に、どのh2やh3のタグが含まれているのかを知る術(容易に実現できる術)がないからです。

例えば、目次を作るときのお手軽さを犠牲にするやり方として、目次1、目次2毎にdivなどで範囲を指定しておけばh2やh3も目次のリストに含める事も出来ます。ソースもそんなに難しくはないと思います。ただ、それには範囲を指定するという大きな手間が付加されるので、いくつもページを作っていたり、項目が増減したりするとメンテコストが大きくなると思います。

もう一つ、実装の手間を惜しまなければ、bodyやメインの文章全体を示すエレメントのinnerHTMLを使い、<h1>目次1</h1>~<h1>目次2</h1>の要素を indexOf 等で調べ、h2やh3がどこに属しているのか振り分ける事で目次を作れると思いますが、実装が大きくなるはずです。そうなると、どこかから目次を自動で作ってくれるツールを探してきた方が早い気がします。

今回、公開したソースはメンテコスト、実装難易度が適度な範囲に収まるレベルとしてうちのページのために作ったものになります。