0017

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

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

2011.1.6

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

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

はじめに

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

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

    1. 数項目数項目数項目数項目数項目数項目
    2. 数項目数項目数項目数項目数項目数項目
    3. 数項目数項目数項目数項目数項目数項目

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

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

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

    定義定義定義定義
    説明説明説明説明説明説明説明説明
    定義定義定義定義
    説明説明説明説明説明説明説明説明
    定義定義定義定義
    説明説明説明説明説明説明説明説明
    キャプション
    見出し 見出し 見出し
    内容 内容 内容
    内容 内容 内容

    CO2

    m3、cm2

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

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

    ダウンロード:tree.zip(1,363バイト)