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

Question

I have headers in <h1> through <h6> tags. Is there a way that I can use JavaScript to generate a table of contents for the contents that serves as anchor tags as well?

I would like the output to be something like:

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

I am not currently using a JavaScript framework, but I don't see why I couldn't use one.

I am also looking for something done, since I'm guessing this is a common problem, but if not, a starting point to roll my own would be good.

Can you elaborate a little? Maybe an HTML snippet would be helpful. — Mark Biek, Oct 09 '08 at 14:56
It should be easy. Please specify desired structure in HTML. — Marko Dumic, Oct 09 '08 at 14:56
Also, can we assume the use of any Javascript framework like Prototype or jQuery? — Mark Biek, Oct 09 '08 at 15:00

score 52 · Accepted Answer · edited Mar 15 '19 at 05:27

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])>([^<]+)<\/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;
};

Your page should be structured something like this:

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

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

I had to put the script at the bottom of the body tag so that the DOM has a chance to be initialized before the script runs. — Nathan, Dec 15 '14 at 16:53
Thanks for the solution. Would you please give some hints how to modify of js to cover nested headers, unfortunately i'm not good at JS — 27P, Jan 15 '20 at 07:19
Does not work if the headings have attributes defined on them, because the regex is too simple. — Ini, Mar 18 '20 at 20:33
If I use `/]+)*>([^<]+)<\/h([\d])>/` instead then chrome crashes. Any suggestions? I guess it's because the regex is greedy, but I at first glance I see no other way to get around the `*`. — Ini, Mar 19 '20 at 08:32
Works perfectly in a my Markdown generated courseware. Thanks for clearing up my morning schedule. — Jonathan Spiller, Jul 17 '20 at 09:04

score 9 · Answer 2 · edited Oct 29 '16 at 00:55

Here's a great script to do this:

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

To use it:

Add this tag:

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

Call the function, such as in your body's onload attribute:
```
<body onload="htmlTableOfContents();"> 
```

Here is the definition of the method that does the generation:

/**
 * 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
}

Any experience with it? Judging by the number of responses there might be quirks and this code looks suspiciously short. — Sridhar Sarnobat, Oct 29 '16 at 00:56
This code is suprisingly good. What is not mentioned here is the ability to add a stylesheet to the elements, to get a nested look. I improved it slightly [here](http://stackoverflow.com/a/41085566/4405465) for html5 notation and made it even shorter! — Hasse Björk, Dec 11 '16 at 11:25

score 6 · Answer 3 · answered Oct 09 '08 at 15:01

6

JQuery comes to mind as a fast and easy solution. A quick google search for jquery table of contents yields two promising results:

answered Oct 09 '08 at 15:01

Francis Beaudet

607
4
7

1

So, these "solutions" do not do re-create the structure recursively (with all h1..h6), right? - – Sergey Ilinsky Oct 09 '08 at 15:29

Hendrik · Answer 4 · 2015-09-30T13:26:10.197

I've modified the function in AtesGoral's accepted answer to output correctly nested lists and valid HTML5.

Just add the code below to your scripts and call TableOfContents(container, output); on load, where container is the class or id of your content element and output is the class or id of the TOC element. Default values are '#contents' and '#toc', respectively.

See http://codepen.io/aufmkolk/pen/RWKLzr for a working demo.

function TableOfContents(container, output) {
var toc = "";
var level = 0;
var container = document.querySelector(container) || document.querySelector('#contents');
var output = output || '#toc';

container.innerHTML =
    container.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('</li></ul>');
            } else {
                toc += (new Array(level+ 1)).join('</li>');
            }

            level = parseInt(openLevel);

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

            return '<h' + openLevel + '><a href="#' + anchor + '" id="' + anchor + '">'
                + titleText + '</a></h' + closeLevel + '>';
        }
    );

if (level) {
    toc += (new Array(level + 1)).join('</ul>');
}
document.querySelector(output).innerHTML += toc;
};

Hasse Björk · Answer 5 · 2020-02-04T20:51:40.163

I really love d13's answer, but would like to improve it slightly to use html5 notations and keep a header's existing id:

document.addEventListener('DOMContentLoaded', function() {
    htmlTableOfContents();
} );                        

function htmlTableOfContents( documentRef ) {
    var documentRef = documentRef || document;
    var toc = documentRef.getElementById("toc");
//  Use headings inside <article> only:
//  var headings = [].slice.call(documentRef.body.querySelectorAll('article h1, article h2, article h3, article h4, article h5, article h6'));
    var headings = [].slice.call(documentRef.body.querySelectorAll('h1, h2, h3, h4, h5, h6'));
    headings.forEach(function (heading, index) {
        var ref = "toc" + index;
        if ( heading.hasAttribute( "id" ) ) 
            ref = heading.getAttribute( "id" );
        else
            heading.setAttribute( "id", ref );

        var link = documentRef.createElement( "a" );
        link.setAttribute( "href", "#"+ ref );
        link.textContent = heading.textContent;

        var div = documentRef.createElement( "div" );
        div.setAttribute( "class", heading.tagName.toLowerCase() );
        div.appendChild( link );
        toc.appendChild( div );
    });
}

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

You use it by including the script in your header.

The awesome thing is, you can use stylesheets for your table of contents:

<style>
    #toc div.h1 { margin-left: 0 }
    #toc div.h2 { margin-left: 1em }
    #toc div.h3 { margin-left: 2em }
    #toc div.h4 { margin-left: 3em }
</style>

In my personal script, I use a slightly different selector:

var headings = [].slice.call(documentRef.body.querySelectorAll("article h1, article h2, article h3, article h4, article h5, h6"));

The main page is kept inside <article></article> and the script will search for headings inside the main article only. I can use a heading inside the table of contents, like <nav id="toc"><h3>Table of contents</h3></nav> or in a footer/header without it showing up inside the toc.

In the comments below Gabriel Hautclocq has optimizations of the article code. He also points out, this is not strictly a list but a list-like div structure, which is simpler and generates shorter code.

Looks like the answer you linked to was actually given by @d13. Sridhar-Sarnobat was just a commentator who, in fact, didn't seem too happy with the solution — Fr0zenFyr, Feb 05 '19 at 05:24
Why not using: ``var article = document.querySelector("article"); var headings = article ? [].slice.call(article.querySelectorAll( "h1, h2, h3, h4, h5, h6")) : [] `` (thus avoiding the repetition of the article selector) ? That said, it works, but it uses divs, not lists as requested by the question. — Gabriel Hautclocq, Jan 31 '20 at 14:14
Nice! Instead of injecting anchors you're referencing the element id. When I wrote the original code I was having trouble with browsers scrolling just below the heading, so I injected anchors just above them. I like the idea of narrowing the scope to search for headers. I guess I should have put in a second parameter for specifying the root node to search from. — Kastor, Jan 14 '23 at 20:06

CMSG · Answer 6 · 2021-05-19T03:29:05.587

This is a vanilla JavaScript version of a Table of Contents I came up with for work.

It looks for all the headings in a specified content container and creates IDs for them, then generates the TOC links. I have it adding classes for styling and use nested lists to create a hierarchy.

window.addEventListener('DOMContentLoaded', function (event) { // Let the DOM content load before running the script.
//Get all headings only from the actual contents.
var contentContainer = document.getElementById('content'); // Add this div to the html
var headings = contentContainer.querySelectorAll('h1,h2,h3,h4'); // You can do as many or as few headings as you need.

var tocContainer = document.getElementById('toc'); // Add this div to the HTML
// create ul element and set the attributes.
var ul = document.createElement('ul');

ul.setAttribute('id', 'tocList');
ul.setAttribute('class', 'sidenav')

// Loop through the headings NodeList
for (i = 0; i <= headings.length - 1; i++) {

    var id = headings[i].innerHTML.toLowerCase().replace(/ /g, "-"); // Set the ID to the header text, all lower case with hyphens instead of spaces.
    var level = headings[i].localName.replace("h", ""); // Getting the header a level for hierarchy
    var title = headings[i].innerHTML; // Set the title to the text of the header

    headings[i].setAttribute("id", id)  // Set header ID to its text in lower case text with hyphens instead of spaces.

    var li = document.createElement('li');     // create li element.
    li.setAttribute('class', 'sidenav__item') // Assign a class to the li

    var a = document.createElement('a'); // Create a link
    a.setAttribute("href", "#" + id) // Set the href to the heading ID
    a.innerHTML = title; // Set the link text to the heading text
    
    // Create the hierarchy
    if(level == 1) {
        li.appendChild(a); // Append the link to the list item
        ul.appendChild(li);     // append li to ul.
    } else if (level == 2) {
        child = document.createElement('ul'); // Create a sub-list
        child.setAttribute('class', 'sidenav__sublist')
        li.appendChild(a); 
        child.appendChild(li);
        ul.appendChild(child);
    } else if (level == 3) {
        grandchild = document.createElement('ul');
        grandchild.setAttribute('class', 'sidenav__sublist')
        li.appendChild(a);
        grandchild.appendChild(li);
        child.appendChild(grandchild);
    } else if (level == 4) {
        great_grandchild = document.createElement('ul');
        great_grandchild.setAttribute('class', 'sidenav__sublist');
        li.append(a);
        great_grandchild.appendChild(li);
        grandchild.appendChild(great_grandchild);
    }
}

toc.appendChild(ul);       // add list to the container

// Add a class to the first list item to allow for toggling active state.
var links = tocContainer.getElementsByClassName("sidenav__item");

links[0].classList.add('current');

// Loop through the links and add the active class to the current/clicked link
for (var i = 0; i < links.length; i++) {
    links[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("current");
        current[0].className = current[0].className.replace(" current", "");
        this.className += " current";
    });
}
});

I have a demo on CodePen.

I like this a lot, thanks! How can I remove styles, span etc from anchor links? The headers I have are:
The header text
then the anchor links get these tags also — Diana, Jun 15 '22 at 16:22
Since this is getting the innerHTML of the header tags it will grab the styles you're setting inside of them, which you're doing with a span. I see a couple of options here, the quickest to explain with a character limit being be to move the style="font-weight-bold" into the h2 tag (
) and avoid using a span altogether. Since that can get repetitive if you have a lot of headings...maybe move your css into an external file and link the CSS in your HTML so you only have to set the rule once. — CMSG, Jun 17 '22 at 05:23
Thanks, I had to replace() because the content is edited with WYSIWYG editor, had not only styles but also strong, italics etc all sort of tags lol — Diana, Jun 17 '22 at 16:57

score 3 · Answer 7 · answered Jul 13 '18 at 22:03

So I had a problem with the answer provided by @Ates Goral and @Hendrik, I use a WYSIWYG which adds some html snippets in the H1-h6 elements like br tags and the rest. So the code breaks and doesn't recognize it as a valid h element since it doesn't match the search pattern. Also some WYSIWYG leave empty h-tags which are not excluded since they have no content. And the various modifications that follows often break with the same problem. A major bug I fixed was that if you had a heading, with the same text it would only reference the first- solutions provided by @Ates Goral and @Hendrik

I should state that this solution is good if you are generating the table of content from data stored in the database. And I used some of the solutions above and built upon, especially @Ates Goral and @Hendrik

function TableOfContents(container, output) {
        var txt = "toc-"; 
        var toc = "";
        var start = 0;
        var output = output || '#toc';

        var container = document.querySelector(container) || document.querySelector('#contents');
        var c = container.children;

        for (var i = 0; i < c.length; i++) {
        var isHeading = c[i].nodeName.match(/^H\d+$/) ;
        if(c[i].nodeName.match(/^H\d+$/)){
            var level = c[i].nodeName.substr(1);
// get header content regardless of whether it contains a html or not that breaks the reg exp pattern
            var headerText = (c[i].textContent);
// generate unique ids as tag anchors
            var anchor = txt+i;

            var tag = '<a href="#' + anchor + '" id="' + anchor + '">' + headerText + '</a>';

            c[i].innerHTML = tag;

            if(headerText){
                if (level > start) {
                    toc += (new Array(level - start + 1)).join('<ul>');
                } else if (level < start) {
                    toc += (new Array(start - level + 1)).join('</li></ul>');
                } else {
                    toc += (new Array(start+ 1)).join('</li>');
                }
                start = parseInt(level);
                toc += '<li><a href="#' + anchor + '">' + headerText + '</a>';
            }
        }
    }
    if (start) {
        toc += (new Array(start + 1)).join('</ul>');
    }
    document.querySelector(output).innerHTML += toc;
}

document.addEventListener('DOMContentLoaded', function() {
    TableOfContents();
  }
  );

score 1 · Answer 8 · answered Oct 09 '08 at 14:59

1

Are you looking for a prepackaged solution or are you asking how this can be implemented?

For the latter, you could use ~~getElementsByTagName() recursively on <h1> through <h6>~~ XPath to iterate through all <h*> elements and construct the corresponding nested <ul> or <ol> lists. You'd also have to add the <a> tags to the headers.

answered Oct 09 '08 at 14:59

Ates Goral

137,716
26
137
190

Using Xpath assumes the document will be well-form XHTML. – Diodeus - James MacFarlane Oct 09 '08 at 15:13
Yeah, and it also assumes that the browser supports XPath. Not the most universal solution I guess... – Ates Goral Oct 09 '08 at 15:21

score 1 · Answer 9 · answered Dec 02 '21 at 12:28

I may be a bit late to the game but I've put together my own jQuery plugin...

Available via jsDeliver CDN: https://cdn.jsdelivr.net/npm/@thelevicole/toc.js@1/dist/toc.jquery.js

A quick example of page structure:

<div class="table-of-contents"></div>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h2>Heading 2</h2>
<h2>Heading 2</h2>
<h1>Heading 1</h1>

Now initiate the plugin:

$('.table-of-contents').tableOfContents();

Which will output this list:

<ul class="toc-list">
    <li class="toc-item">
        <a href="#heading-1" class="toc-link">Heading 1</a>
        <ul class="toc-list">
            <li class="toc-item">
                <a href="#heading-2" class="toc-link">Heading 2</a>
                <ul class="toc-list">
                    <li class="toc-item">
                        <a href="#heading-3" class="toc-link">Heading 3</a>
                    </li>
                </ul>
            </li>
            <li class="toc-item">
                <a href="#heading-4" class="toc-link">Heading 2</a>
            </li>
            <li class="toc-item">
                <a href="#heading-5" class="toc-link">Heading 2</a>
            </li>
        </ul>
    </li>
    <li class="toc-item">
        <a href="#heading-6" class="toc-link">Heading 1</a>
    </li>
</ul>

Screenshot for reference:

There are a number of options that can be passed...

$('.table-of-contents').tableOfContents({
    contentTarget: $( document.body ), // The element with content.
    selectors: 'h1$1; h2$2; h3$3; h4$4; h5$5; h6$6;', // Tree structure.
    nestingDepth: -1, // How deep we'll allow nesting. -1 for infinate.
    slugLength: 40, // The max number of chars in the hash slug.
    anchors: true, // Add anchors to headings.
    anchorText: '#', // The symbol added to headings.
    orderedList: false // True to use <ol> instead of <ul>
});

The selectors option allows you create a table of contents from other selectors not just h1, h2, h3's etc.

The selector option accepts a string, array or object of selectors and depths:

String

$('.table-of-contents').tableOfContents({
    // '{selector}${depth}; {selector}${depth}; ...'
    selectors: 'h1$1; h2$2; h3$3; p:not(.my-class)$2; ...'
});

The selector pattern is fairly straight forward, and follows a simple pattern. We first have the DOM/CSS selector {selector} followed by the nesting depth which starts with a dollar symbol ${depth} and finished with a semicolon ;

The default pattern used for nested headings looks like this: 'h1$1; h2$2; h3$3; h4$4; h5$5; h6$6;'

Array

$('.table-of-contents').tableOfContents({
    selectors: [
        // '{selector}${depth}'
        'h1$1',
        'h2$2',
        'h3$3',
        'p:not(.my-class)$2',
        ...
    ]
});

Object

$('.table-of-contents').tableOfContents({
    selectors: {
        // '{selector}': {depth}
        'h1': 1,
        'h2': 2,
        'h3': 3,
        'p:not(.my-class)': 2,
        ...
    }
});

Custom selector example:

<div class="table-of-contents"></div>

<article>
    <p class="level-1">I'm level 1</p>
    <p class="level-2">I'm level 2</p>
    <p class="level-1">I'm level 1 again</p>
    <p class="level-2">I'm level 2 again</p>
    <p class="level-3">I'm level 3</p>
    <p><strong>I'm a div element</strong></p>
    <p class="level-2">I'm level 2</p>
</article>

$('.table-of-contents').tableOfContents({
    contentTarget: 'article',
    selectors: '.level-1 $1; .level-2 $2; .level-3 $3; p > strong $4'
});

Will result in...

I haven't yet had chance to write proper documentation but you can follow this project on GitHub: https://github.com/thelevicole/toc.js or see the homepage here: https://thelevicole.com/toc.js/

Sergey Ilinsky · Answer 10 · 2008-10-09T15:33:04.853

0

Check out the component you are looking for on this page: Re-inventing XMLHttpRequest: Cross-browser implementation with sniffing capabilities

It walks over entire document and creates a TOC with all h1-h6 elements reflected in an openable (upon hover) structure. The component is standalone and it doesn't use any library.

edited Oct 09 '08 at 15:33

answered Oct 09 '08 at 15:07

Sergey Ilinsky

31,255
9
54
56

score 0 · Answer 11 · answered May 19 '16 at 22:33

 let headers = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
  let list    = document.createElement('ol');

  let _el = list;
  for(i=0; i<headers.length; i++) {
    while(_el) {
      let li = document.createElement('li');
      li.innerText = headers[i].innerText;
      li.setAttribute('tagName', headers[i].tagName);
      if(_el.getAttribute('tagName') < headers[i].tagName) {
        let ol = _el.children.length > 0 ? ol = _el.querySelector('ol') : document.createElement('ol');
        ol.appendChild(li);
        _el.appendChild(ol);
        _el = li;
        break;
      } else {
        if(_el.tagName == 'OL') {
         _el.appendChild(li);
         _el = li;
         break;
        } else if (!_el.parentNode.parentNode) {
          _el.parentNode.appendChild(li);
          _el = li;
          break;
        }
        else {
          _el = _el.parentNode.parentNode;
        }
      }
    }
  }
  console.log(list);

score 0 · Answer 12 · answered May 19 '16 at 23:43

  this.insert = (el, h) => {
    let li = document.createElement('li');
    li.innerText = h.innerText;
    li.setAttribute('tagName', h.tagName);
    if(el.tagName == 'OL') {
      el.appendChild(li);
      return li;
    } else if(el.getAttribute('tagName') < h.tagName) {
      let ol = el.children.length > 0 ? ol = el.querySelector('ol') : document.createElement('ol');
      ol.appendChild(li);
      el.appendChild(ol);
      return li;
    } else if(!el.parentNode.parentNode) {
      el.parentNode.appendChild(li);
      return li;
    } else {
      return this.insert(el.parentNode.parentNode, h);
    }
  }

  this.parse = (headers) => {
    let list = document.createElement('ol');
    let el = list;
    for(i=0; i<headers.length; i++) {
      el = this.insert(el, headers[i]);
    }
    return list;
  }
  let headers = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
  let toc = this.parse(headers);
  console.log(toc);

score 0 · Answer 13 · answered Apr 20 '21 at 19:10

Here's a jQuery-based function that analyzes heading elements <h1>, <h2> ... in provided content and returns jQuery object with TOC hierarchy that you may append to your page:

<div class="table_of_contents">
    <ul>
        <a href="#Level1_Heading">Level1 Heading</a>
        <li>
            <a href="#Level2_Heading">Level2 Heading</a>
            <ul>
                ...
        </li>
    </ul>
</div>

It also modifies $content by inserting invisible <a name="..."> anchors to which a user will jump when clicking the created TOC items.

function generate_toc($content) {
    let $toc = $("<div>", {class: "table_of_contents"});
    let level2$toc_item = {0: $toc};
    let used_anchors = {};
    $content.find("h1, h2, h3, h4, h5").each(function() {
        // find out the level of heading
        let level = parseInt($(this).prop("tagName").replace(/[^0-9]/gi, ""));
        let heading_text = $(this).text();
        // define the unique anchor id
        let heading_anchor = heading_text.replace(/[^a-z0-9]/gi, "_");
        while (heading_anchor in used_anchors) {heading_anchor += "_";}
        used_anchors[heading_anchor] = true;                
        // add target point into main content
        $(this).prepend($("<a>", {name: heading_anchor}));
        // find the parent level for TOC item
        let parent_level = level-1;
        for (; !(parent_level in level2$toc_item); parent_level--); 
        // remove all jumped over levels
        for (let l in level2$toc_item) {
            if (parseInt(l) > parent_level) {
                delete level2$toc_item[l];
            }
        }
        let $parent = level2$toc_item[parent_level];
        // create new TOC item inside parent's <ul>
        level2$toc_item[level] = $("<li>").appendTo(
            $parent.children("ul").length == 1
            ? $($parent.children("ul")[0])
            : $("<ul>").appendTo($parent)
        ).append($("<a>", {href: `#${heading_anchor}`}).text(heading_text));
    });
    return $toc;
}

Example of use:

$("body").prepend(generate_toc("body"));

Carson · Answer 14 · 2023-05-08T05:28:09.420

The key is to capture the data of headings and convert it into an object^{TocItem see below code}.

As for the TOC presentation, you can use ul or rely on markmap.js, d3.js to generate, etc.

core code

/**
 * @param {string} text
 * @param {int} level
 * @param {TocItem} parent
 * */
function TocItem(text, level, parent = undefined) {
  this.text = text
  this.level = level
  this.id = undefined
  this.parent = parent
  this.children = []
}

/**
* @param {[HTMLHeadingElement]} headingSet
* */
function parse(headingSet) {
  const tocData = []
  let curLevel = 0
  let preTocItem = undefined

  headingSet.forEach(heading => {
    const hLevel = heading.outerHTML.match(/<h([\d]).*>/)[1]
    const titleText = heading.innerText

    switch (hLevel >= curLevel) {
      case true:
        if (preTocItem === undefined) {
          preTocItem = new TocItem(titleText, hLevel)
          tocData.push(preTocItem)
        } else {
          const curTocItem = new TocItem(titleText, hLevel)
          const parent = curTocItem.level > preTocItem.level ? preTocItem : preTocItem.parent
          curTocItem.parent = parent
          if (parent !== undefined) {
             parent.children.push(curTocItem)
          }
          preTocItem = curTocItem
        }
        break
      case false:
        // We need to find the appropriate parent node from the preTocItem
        const curTocItem = new TocItem(titleText, hLevel)
        while (1) {
          if (preTocItem.level < curTocItem.level) {
            preTocItem.children.push(curTocItem)
            curTocItem.parent = preTocItem
            preTocItem = curTocItem
            break
          }
          preTocItem = preTocItem.parent

          if (preTocItem === undefined) {
            tocData.push(curTocItem)
            preTocItem = curTocItem
            break
          }
        }
        break
    }

    curLevel = hLevel

    if (heading.id === "") {
      heading.id = titleText.replace(/ /g, "-").toLowerCase()
    }
    preTocItem.id = heading.id
  })

  return tocData
}

Example

<style>
  /* CSS is not necessary. That is for look better and easy to test. */

  /* Longer pages, so you can test to see if you can actually get to the specified location after clicking. */
  body {
    min-height: 160rem
  }

  /* similar to the bootstrap */
  .fixed-top {
    position: fixed;
    top: 0;
    right: 50vw;
    z-index: 1000;
  }
</style>

<div id="target">
  <h1 id="my-app">App1</h1>
  <h2>Video</h2>
  <h3>mp4</h3>
  <h3>webm</h3>

  <h2>Game</h2>
  
  <h2>Audio</h2>  
  <h3>Mp3</h3>
  <h3>m4a</h3>

  <h1>App2</h1>
  <h2>Overview</h2>
</div>

<script>

  class TOC {
    /**
     * @param {[HTMLHeadingElement]} headingSet
     * */
    static parse(headingSet) {
      const tocData = []
      let curLevel = 0
      let preTocItem = undefined

      headingSet.forEach(heading => {
        const hLevel = heading.outerHTML.match(/<h([\d]).*>/)[1]
        const titleText = heading.innerText

        switch (hLevel >= curLevel) {
          case true:
            if (preTocItem === undefined) {
              preTocItem = new TocItem(titleText, hLevel)
              tocData.push(preTocItem)
            } else {
              const curTocItem = new TocItem(titleText, hLevel)
              const parent = curTocItem.level > preTocItem.level ? preTocItem : preTocItem.parent
              curTocItem.parent = parent
              if (parent !== undefined) {
                parent.children.push(curTocItem)
              }
              preTocItem = curTocItem
            }
            break
          case false:
            // We need to find the appropriate parent node from the preTocItem
            const curTocItem = new TocItem(titleText, hLevel)
            while (1) {
              if (preTocItem.level < curTocItem.level) {
                preTocItem.children.push(curTocItem)
                curTocItem.parent = preTocItem
                preTocItem = curTocItem
                break
              }
              preTocItem = preTocItem.parent

              if (preTocItem === undefined) {
                tocData.push(curTocItem)
                preTocItem = curTocItem
                break
              }
            }
            break
        }

        curLevel = hLevel

        if (heading.id === "") {
          heading.id = titleText.replace(/ /g, "-").toLowerCase()
        }
        preTocItem.id = heading.id
      })

      return tocData
    }

    /**
     * @param {[TocItem]} tocData
     * @return {string}
     * */
    static build(tocData) {
      let result = "<ul>"
      tocData.forEach(toc => {
        result += `<li><a href=#${toc.id}>${toc.text}</a></li>`
        if (toc.children.length) {
          result += `${TOC.build(toc.children)}`
        }
      })
      return result + "</ul>"
    }
  }

  /**
   * @param {string} text
   * @param {int} level
   * @param {TocItem} parent
   * */
  function TocItem(text, level, parent = undefined) {
    this.text = text
    this.level = level
    this.id = undefined
    this.parent = parent
    this.children = []
  }

  window.onload = () => {

    const headingSet = document.querySelectorAll("h1, h2, h3, h4, h5, h6") // You can also select only the titles you are interested in.
    const tocData = TOC.parse(headingSet)
    
    console.log(tocData)

    const tocHTMLContent = TOC.build(tocData)
    const frag = document.createRange().createContextualFragment(`<fieldset class="fixed-top"><legend>TOC</legend>${tocHTMLContent}</fieldset>`)
    document.querySelector(`body`).insertBefore(frag, document.querySelector(`body`).firstChild)
  }
</script>

vanilla JavaScript too

score -2 · Answer 15 · answered Oct 09 '08 at 14:57

-2

after page load, cycle through the DOM and look for the elements that interest you. build a nice list of anchors and add it to the document at the place of your desire.

answered Oct 09 '08 at 14:57

Amir Arad

6,724
9
42
49

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

15 Answers15

The header text

) and avoid using a span altogether. Since that can get repetitive if you have a lot of headings...maybe move your css into an external file and link the CSS in your HTML so you only have to set the rule once.

core code

Example

Linked