TOCjs
A Table of Contents Javascript Generator
for HTML Documents

Usage documentation

Insert an HTML source code of your document into the Input textarea below and click the button Generate TOC. This generates nested ordered lists of the headings found in the document. The items in the lists are links to the headings. These links use IDs of the headings (called anchors). Those are either added to each heading tag if there was no ID before; the existing IDs are used as is unless you check the Overwrite existing anchors checkbox.

Please note the IDs are generated from the content of the headings so there must not be two identical headings for the anchors to work correctly. (However, a mere space at the end is sufficient to produce a different anchor since it's replaced by a dash so you'd get something like #my-heading and my-heading-.)

In the Output section, you will find the generated TOC rendered as HTML as well as inserted into the textarea as an HTML source. In the last textarea below, you'll find your document with the IDs and with the generated TOC at the beginning.

In the section Options, you can choose which type of lists you would like the tool to use and you can set a string to be prepended before the IDs of the headings. This can be, for example, a URL of the page in case you want to use the TOC in some other page. The links in the TOC will the look like e.g. https://example.org/my-page.html#my-heading.

To use the output of this tool, copy the source code of your document with the heading IDs back to where you use your document, or just add the source of the generated TOC to your document in case you had all the IDs in the document already. You can also copy the TOC to the document with the IDs from the visual output if you have a WYSIWYG editor.

Input

Options

Which type of a list do you wish to use for the TOC?

Unsorted
Sorted

In case your document already contains anchors (id="…") in the headings, should they be preserved, or overwritten with newly generated ones?

Overwrite existing anchors

Would you like to prepend something to the anchors (heading IDs)?

What is the maximum heading level the TOC should contain?

Should the TOC have some heading? (Leave blank for no heading)

Output

The generated TOC

Your generated TOC will appear here

A source code of the generated TOC

A source code of your document with heading IDs and the generated TOC

Issues

Should you find any bugs, please log an issue to this tool's repository on Github or contact the author of this tool (see the footer of this page).

Please note, this tool does not support Internet Explorer (and probably never will, don't bother to log an issue about this).

Created by edison23