发表新帖
发表新帖

Is there a JavaScript solution to generating a “table of contents” for a page?

后端 未结
关注
12 1717
广开言路
广开言路 2020-12-12 17:21

I have headers in

through
tags. Is there a way that I can use JavaScript to generate a table of contents for the contents tha

12条回答
  • 眼角桃花
    眼角桃花 (楼主)
    2020-12-12 18:11

    I couldn't resist putting together a quick implementation.

    Add the following script anywhere on your page:

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

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

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

                level = parseInt(openLevel);

                var anchor = titleText.replace(/ /g, "_");
                toc += "
  • " + titleText
                    + "
    • ";

                return ""
                    + titleText + "";
            }
        );

    if (level) {
        toc += (new Array(level + 1)).join("
"); } document.getElementById("toc").innerHTML += toc; };

Your page should be structured something like this:


    

        
Table of Contents

    

    

    

        
Fruits

        
Red Fruits

        
Apple

        
Raspberry

        
Orange Fruits

        
Orange

        
Tangerine

        
Vegetables

        
Vegetables Which Are Actually Fruits

        
Tomato

        
Eggplant

You can see it in action at https://codepen.io/scheinercc/pen/KEowRK (old link: http://magnetiq.com/exports/toc.htm (Works in IE, FF, Safari, Opera))

0 讨论(0)
 看不清?
提交回复
热议问题