0

HTML（アンカー付き）から「目次」をその場で生成するJavaScriptを探しています。

例：

<h1>First level1 heading</h1>
lorem ipsum
<h2>1a heading</h2>
lorem ipsum
<h2>1b heading</h2>
lorem ipsum
<h1>Second level1 heading</h1>
lorem ipsum

次のようなものを返す必要があります

 First level1 heading   
   1a heading   
   1b heading 
 Second level1 heading

見出しにリンクされた行を使用し、元のhtmlもアンカーを挿入して返す必要があります。

大きなjavascriptライブラリまたはフレームワークの1つに何かが含まれていますか？

それらのどれも持っていない場合、誰かがこの目的のための良いJSモジュールを見たことがありますか？

4

3 に答える 3

4

jQueryはあなたの友達です。このプラグインは目次です。ホームページはhttp://code.google.com/p/samaxesjs/です。

于 2009-05-22T00:34:09.043 に答える
1

自分で作ってください、私はそれを書きました:)、それが役立つことを願っています

body要素の最初の子としてdiv要素を追加し、「tableOfContents」としてIDを指定します

以下のスクリプトをbody要素の最後の子として追加します

<script>
    var el = document.getElementsByTagName("*") || [];
    var toc = "<ul>";
    var lvl = 1;
    for(var i=0;i<el.length;i++)
    {
        var ce = el[i];
        var tag = ce.tagName + "";
        var m = tag.match(/^h([1-5])$/i);
        if(m)
        {
            var n = Number(m[1]);
            if(lvl > n)
            {
                while(lvl-->n)toc+="</ul></li>";  
            }else if(lvl < n){
                while(lvl++<n)toc+="<li style='list-style:none'><ul>";
            }
            toc +=  '<li><a href="#toc_' + i + '">' + 
                    (ce.innerText || ce.text()) +
                    '</a></li>';
            var ta = document.createElement("div");
            ta.innerHTML = '<a name="toc_' + i + '" />';
            ce.insertBefore(ta, ce.firstChild);
        }
    }
    while(lvl-->1)toc+="</ul></li>";
    toc+="</ul>";
    document.getElementById("tableOfContents").
        innerHTML = toc;
</script>

このスクリプトは、各H（1〜5）を検出し、目次を生成します

于 2009-05-22T01:11:39.857 に答える
-1

これは非常に単純な問題であり、10〜20行の関数で解決できます。フレームワークは必要ありません。getElementsByTagName（'h1'）、getElementsByTagName（'h2'）を使用してDOMをウォークするか、正規表現を使用します。フレームワークのロードにはパフォーマンスへの影響とリスクが伴うため、単純な問題のためにフレームワークをインストールしないことをお勧めします。

于 2009-05-22T00:52:26.430 に答える