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

2690.org

13年前

対外的なドキュメントを作る時に最適なフォーマットって何だろうと考えたとき、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 ";
            currentlevel++;
        }
        while(currentlevel > level) {
            toc += "";
            currentlevel--;
        }
        toc += '' + $(this).html() + "n";
    jQuery(this).append(&#039; <a href="#toc">↑</a>&#039;);
});
while(currentlevel > 0) {
    toc += "</ol>";
    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
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

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


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


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


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


キャプション
    
        見出し
        見出し
        見出し
    
    
        内容
        内容
        内容
    
    
        内容
        内容
        内容
    

CO₂
m³、cm²


の中で見出しタグのリストが生成されます。 また、各見出しの横には、上矢印（↑）がつき、メニューへ戻ることができます。 ## ダウンロード
上記ファイルをまとめたデータはこちらからダウンロードすることができます。ご自由にどうぞ。
ダウンロード：tree.zip（1,363バイト）