哪个 javascript 库或框架支持“目录”？一代？

发布于 2024-07-21 13:24:02 字数 522 浏览 6 评论 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 库或框架之一中是否包含某些内容？

如果没有，有人见过用于此目的的良好 JS 模块吗？

原文

I am looking for a javascript on the fly "Table Of Contents" generation from HTML (with anchors).

Example:

<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

Should return something like

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

with the lines linked to the headings, and also the orignal html should be returned with anchors inserted.

Is there something included in one of the big javascript libraries or frameworks?

If none of them has, has someone seen a good JS module for this purpose?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深陷 2024-07-28 13:24:02

jQuery 是你的朋友，有这个插件：目录。首页是 http://code.google.com/p/samaxesjs/

回复收藏 0 原文

白芷 2024-07-28 13:24:02

自己制作，我写的:)，希望它有助于

添加一个 div 元素作为 body 元素的第一个子元素，并给出一个 id 作为“tableOfContents”

，并将下面的脚本添加为 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) 并生成目录

Make it yourself, i wrote it :), hope it helps

add a div element as first child of body element and give an id as "tableOfContents"

and add the script below as last child of body element

<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>

this script will detects each H (1 to 5) and generates your table of contents

回复收藏 0 原文