h1からh6の見出しを抽出し、ページ内リンク(toc)を自動生成するjavascript

2011.1.6

対外的なドキュメントを作る時に最適なフォーマットって何だろうと考えたとき、htmlが一番無難かな、と思っていました。でも、見出しへのリンクを手動でいちいち作るのは面倒。

そこで、「jQuery 開発者向けメモ – 基本・サンプル」を参考に、h1〜h6の見出しを抽出して、ページ内リンクを自動生成するJSをまとめました。（といっても「jQuery 開発者向けメモ – 基本・サンプル」から余分なコードを削除しただけなのですがｗ）

はじめに

• jQueryを使います。
• スタイルはデフォルトのhtmlのままです。デザインを変えたい方は適宜CSSで調整してください。

JavaScript

jQuery(function(){
    // H1〜H6タグから目次を生成する
    var idcount = 1;
    var toc = '';
    var currentlevel = 0;
    jQuery(":header",this).each(function(){
        this.id = "toc_" + idcount;
        idcount++;
        var level = 0;
        if(this.nodeName.toLowerCase() == "h1") {
            level = 1;
        } else if(this.nodeName.toLowerCase() == "h2") {
            level = 2;
        } else if(this.nodeName.toLowerCase() == "h3") {
            level = 3;
        } else if(this.nodeName.toLowerCase() == "h4") {
            level = 4;
        } else if(this.nodeName.toLowerCase() == "h5") {
            level = 5;
        } else if(this.nodeName.toLowerCase() == "h6") {
            level = 6;
        }
        while(currentlevel < level) {
            toc += "
";
            currentlevel++;
        }
        while(currentlevel > level) {
            toc += "
";
            currentlevel--;
        }
        toc += '
' + $(this).html() + "
n";

        jQuery(this).append(' ↑');
    });
    while(currentlevel > 0) {
        toc += "";
        currentlevel--;
    }
    jQuery("#toc").html(toc);
});

html

見出し1見出し1見出し1見出し1見出し1
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

見出し2見出し2見出し2見出し2見出し2
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

見出し3見出し3見出し3見出し3見出し3
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

見出し4見出し4見出し4見出し4見出し4
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

見出し5見出し5見出し5見出し5見出し5
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

見出し6見出し6見出し6見出し6見出し6
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章


項目項目項目項目項目項目項目項目
項目項目項目項目項目項目項目項目
項目項目項目項目項目項目項目項目



数項目数項目数項目数項目数項目数項目
数項目数項目数項目数項目数項目数項目
数項目数項目数項目数項目数項目数項目



文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章



定義定義定義定義
説明説明説明説明説明説明説明説明
定義定義定義定義
説明説明説明説明説明説明説明説明
定義定義定義定義
説明説明説明説明説明説明説明説明



キャプション
    

        
見出し
        
見出し
        
見出し
    
    

        
内容
        
内容
        
内容
    
    

        
内容
        
内容
        
内容
    


CO2

m3、cm2

の中で見出しタグのリストが生成されます。 また、各見出しの横には、上矢印（↑）がつき、メニューへ戻ることができます。 ## ダウンロード

上記ファイルをまとめたデータはこちらからダウンロードすることができます。ご自由にどうぞ。

ダウンロード：tree.zip（1,363バイト）