Skip to content
TOCjs - A JavaScript Generator of a Table of Contents from an HTML Document
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
LICENSE
README.md
tocjs.html

README.md

TOCjs logo

A Table of Contents Javascript Generator for HTML Documents

This tool crawles an HTML source code for heading tags and creates a structured table of contents using either sorted or unsorted nested lists.

It uses JavaScript with jQuery for the processing of the document and HTML with CSS for the tool's frontend. Everything is pulled locally, no Internet connection is required for the tool to work. Fonts are save in CSS using base64 encoding.

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. Also, you can choose whether to add a heading above the TOC and the maximum heading level depth which should be used for the TOC.

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.

You can’t perform that action at this time.