新手上路，请多包涵

我在 <h1> 到 <h6> 标签中有标题。有没有一种方法可以使用 JavaScript 为也用作锚标记的内容生成目录？

我希望输出类似于：

 <ol>
    <li>Header 1</li>
    <li>Header 1</li>
        <li>Header 2</li>
            <li>Header 3</li>
</ol>

我目前没有使用 JavaScript 框架，但我不明白为什么我不能使用它。

我也在寻找完成的事情，因为我猜这是一个常见的问题，但如果不是，我自己动手做一个起点会很好。

原文由 Thomas Owens 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript

阅读 299

2 个回答

得票最新

社区维基

发布于
2022-12-12

✓ 已被采纳

我忍不住要快速实施。

在页面的任意位置添加以下脚本：

 window.onload = function () {
    var toc = "";
    var level = 0;

    document.getElementById("contents").innerHTML =
        document.getElementById("contents").innerHTML.replace(
            /<h([\d])>([^<]+)<\/h([\d])>/gi,
            function (str, openLevel, titleText, closeLevel) {
                if (openLevel != closeLevel) {
                    return str;
                }

                if (openLevel > level) {
                    toc += (new Array(openLevel - level + 1)).join("<ul>");
                } else if (openLevel < level) {
                    toc += (new Array(level - openLevel + 1)).join("</ul>");
                }

                level = parseInt(openLevel);

                var anchor = titleText.replace(/ /g, "_");
                toc += "<li><a href=\"#" + anchor + "\">" + titleText
                    + "</a></li>";

                return "<h" + openLevel + "><a name=\"" + anchor + "\">"
                    + titleText + "</a></h" + closeLevel + ">";
            }
        );

    if (level) {
        toc += (new Array(level + 1)).join("</ul>");
    }

    document.getElementById("toc").innerHTML += toc;
};

您的页面结构应如下所示：

 <body>
    <div id="toc">
        <h3>Table of Contents</h3>
    </div>
    <hr/>
    <div id="contents">
        <h1>Fruits</h1>
        <h2>Red Fruits</h2>
        <h3>Apple</h3>
        <h3>Raspberry</h3>
        <h2>Orange Fruits</h2>
        <h3>Orange</h3>
        <h3>Tangerine</h3>
        <h1>Vegetables</h1>
        <h2>Vegetables Which Are Actually Fruits</h2>
        <h3>Tomato</h3>
        <h3>Eggplant</h3>
    </div>
</body>

您可以在 https://codepen.io/scheinercc/pen/KEowRK （旧链接：http: //magnetiq.com/exports/toc.htm （适用于 IE、FF、Safari、Opera）中查看它的运行情况）

原文由 Ates Goral 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-12-12

这是一个很棒的脚本：

https://github.com/matthewkastor/html-table-of-contents/wiki

使用它：

添加此标记：

    <script src="./node_modules/html-table-of-contents/src/html-table-of-contents.js" type="text/javascript">

调用该函数，例如在您身体的 onload 属性中：

    <body onload="htmlTableOfContents();">

这是进行生成的方法的定义：

 /**
 * Generates a table of contents for your document based on the headings
 *  present. Anchors are injected into the document and the
 *  entries in the table of contents are linked to them. The table of
 *  contents will be generated inside of the first element with the id `toc`.
 * @param {HTMLDOMDocument} documentRef Optional A reference to the document
 *  object. Defaults to `document`.
 * @author Matthew Christopher Kastor-Inare III
 * @version 20130726
 * @example
 * // call this after the page has loaded
 * htmlTableOfContents();
 */
function htmlTableOfContents (documentRef) {
    var documentRef = documentRef || document;
    var toc = documentRef.getElementById('toc');
    var headings = [].slice.call(documentRef.body.querySelectorAll('h1, h2, h3, h4, h5, h6'));
    headings.forEach(function (heading, index) {
        var anchor = documentRef.createElement('a');
        anchor.setAttribute('name', 'toc' + index);
        anchor.setAttribute('id', 'toc' + index);

        var link = documentRef.createElement('a');
        link.setAttribute('href', '#toc' + index);
        link.textContent = heading.textContent;

        var div = documentRef.createElement('div');
        div.setAttribute('class', heading.tagName.toLowerCase());

        div.appendChild(link);
        toc.appendChild(div);
        heading.parentNode.insertBefore(anchor, heading);
    });
}

try {
     module.exports = htmlTableOfContents;
} catch (e) {
    // module.exports is not defined
}

原文由 d13 发布，翻译遵循 CC BY-SA 3.0 许可协议

查看全部 2 个回答

推荐问题

是否有为页面生成“目录”的 JavaScript 解决方案？

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

什么是闭包？闭包有哪些应用场景？

求一个能输入需求就可以写出代码的网站，支持一键部署？

Stack Overflow 翻译