How to Create a Table of Contents for Your Essay

document.querySelectorAll('main h2(id), main h3(id), main h4(id)');

And now it returns our headers and nothing more.

How to Create a ToC in Markdown

Many blogging platforms support Markdown, so this will be the first thing we’ll build.

First, we’ll convert the node list to an array. We can use Diffusion operator:

(...document.querySelectorAll('main h2(id), main h3(id), main h4(id)'));

Then we can map to the array and create markdown links that point to the given header.

const headers = (...document.querySelectorAll('main h2(id), main h3(id), main h4(id)'));

headers.map(function(node) {
    // H2 header should have 0 indent
    const level = parseInt(node.nodeName.replace('H', '')) - 2;
    const hash = node.getAttribute('id');
    const indent=" ".repeat(level * 2);
    return `\({indent}* (\){node.innerText})(#${hash})`;
});

The output looks like this:

(4) ('* (Dev Tools)(#heading-dev-tools)', '* (JavaScript Console)(#heading-javascript-console)', '* (Understanding the DOM Structure)(#heading-understanding-the-dom-structure)', '* (What to do if I don’t have headers?)(#heading-what-to-do-if-i-dont-have-headers)')

To get the text, we can join the array with a newline character and use console.log to display the output. If we don’t use console.logit will show a string next to it. \n letters

const headers = (...document.querySelectorAll('main h2(id), main h3(id), main h4(id)'));

console.log(headers.map(function(node) {
    // H2 header should have 0 indent
    const level = parseInt(node.nodeName.replace('H', '')) - 2;
    const hash = node.getAttribute('id');
    const indent=" ".repeat(level * 2);
    return `\({indent}* (\){node.innerText})(#${hash})`;
}).join('\n'));

The output of this article will look like this:

* (Dev Tools)(#heading-dev-tools)
* (JavaScript Console)(#heading-javascript-console)
* (Understanding the DOM Structure)(#heading-understanding-the-dom-structure)
* (Creating TOC in Markdown)(#heading-creating-toc-in-markdown)
  * (This is fake header)(#heading-this-is-fake-header)

I created a fake subheader. Platforms, even when not supporting Markdown when writing articles, often support Markdown when copying and pasting. The ToC at the top of the article was created by copying and pasting the generated Markdown with the last JavaScript snippet.

How to create HTML ToC

If your platform doesn’t support Markdown (like Medium), you can generate HTML, preview that HTML, and copy the output to the clipboard. Pasting it into the editor for the platform you’re using should retain the formatting.

To convert Markdown to HTML, you can use any online tool, but you’ll see it in bits and pieces. It will be faster after building the code.

const headers = (...document.querySelectorAll('main h2(id), main h3(id), main h4(id)'))

function indent(state) {
    return ' '.repeat((state.level - 1) * 2);
}

function closeUlTags(state, targetLevel) {
    while (state.level > targetLevel) {
        state.level--;
        state.lines.push(`${indent(state)}`);
    }
}

function openUlTags(state, targetLevel) {
    while (state.level < targetLevel) {
        state.lines.push(`${indent(state)}
`);
        state.level++;
    }
}

const result = headers.reduce((state, node) => {
    const level = parseInt(node.nodeName.replace('H', ''));

    closeUlTags(state, level);
    openUlTags(state, level);
    
    const hash = node.getAttribute('id');
    state.lines.push(`\({indent(state)}
${node.innerText}
`);
    return state;
}, { lines: (), level: 1 });

closeUlTags(result, 1);

console.log(result.lines.join('\n'));

This is the output of the code in this article:

I’ve added some headers at the end, so you can see that this will work for any level of nested headers. Note that we also have ToC as the first element in the list.

Copy the HTML code for the editor.

The most so called WYSIWYG The editors are using HTML, and you should be able to copy and paste the output of the HTML code with formatting into that editor. The easiest is to save it to a file, open that file, and select the text:

What if I don’t have headers?

You need to find anything that can be targeted with CSS. If they are p Tags with a specific class (like headers), you can use p.header instead of h2.

How to create a table of contents for DEV.to

If your DOM structure is different, you can use different DOM methods to extract the element you need. For example, on DEV.to, the headers look like this:

  
  
  Overview

So the selector should be fair. main h2. But when you execute this code:

(...document.querySelectorAll('main h2, main h3, main h4'));

You’ll notice that there are more headers than document content. Fortunately, we can use a new selector in CSS. :has(). A final selector for a header might look like this: main h2:has(a(name)).

Here is the complete code:

const selector="main h2:has(a(name)), main h3:has(a(name)), main h4:has(a(name))";
const headers = (...document.querySelectorAll(selector));

console.log(headers.map(function(node) {
    // H2 header should have 0 indent
    const level = parseInt(node.nodeName.replace('H', '')) - 2;
    // this is how you get the hash
    // you can also access href attribute and remove # from the output string
    const hash = node.querySelector('a').getAttribute('name');
    const indent=" ".repeat(level);
    return `\({indent}* (\){node.innerText})(#${hash})`;
}).join('\n'));

The result

Creating a table of contents can help your readers digest your article. Since most people don’t read the entire article, they only scan for what they need. You can also find many articles about its impact on SEO. So if the article is long, it is always worth adding it.

And as you can see, creating a ToC with a little knowledge of web development is not that difficult.

If you like this article you may want to follow me on social media 🙁Twitter/X, GitHuband/or LinkedIn). You can also check mine. Personal website And mine New blog.