Table des matières automatique #

Sur le site du hollandaisvolant, on trouve un bout de javascript pour obtenir une table des matières automatique à partir des titres présents dans une page.

https://lehollandaisvolant.net/?id=20170309180412

Je l'ai un peu modifié pour qu'il ne tienne pas compte des "h1" car c'est souvent le titre de la page, et qu'il rajoute des "id" vers les différentes parties s'il n'y en a pas déjà.

Par ailleurs, la table des matières n'apparaît que s'il y a plus de 3 titres dans une page.

Afin d'en profiter, il suffit d'insérer dans le code html la balise suivante :

<ul id="toc"></ul>

Voici la fonction qui se charge d'afficher la table des matières:

/* display toc */
function toc() {
var TOC = document.getElementById('toc'),
    headings = document.querySelectorAll('h2, h3, h4, h5, h6'),
    parentLevel = 2,
    tocn = 0,
    cursorNode = TOC;
    if (headings.length < 3) {
        return;
    } else {
        TOC.style.display = 'block';
    }

    for (var i = 0, len = headings.length ; i < len ; ++i) {
        var currentHeading = headings[i];
        var newLevel = parseInt(currentHeading.tagName.substr(1,1));
        var diff = newLevel - parentLevel;
        if (diff > 0) {
            var containerLiNode = cursorNode.lastChild;
            var ulNode = document.createElement('UL')
            containerLiNode.appendChild(ulNode);
            cursorNode = ulNode;
            parentLevel = newLevel;     
        }
        if (diff < 0) {
            while (0 !== diff++) {
                cursorNode = cursorNode.parentNode.parentNode;
            }
            parentLevel = newLevel;
        }

        var liNode = document.createElement('LI');
        if (!(currentHeading.hasAttribute('id'))) {
        tocn++;
        currentHeading.setAttribute('id', "toc"+tocn);
      }
            var link = document.createElement('A');
            link.setAttribute('href', '#' + currentHeading.getAttribute('id'));
            link.appendChild(document.createTextNode(currentHeading.textContent))
            liNode.appendChild(link);
        cursorNode.appendChild(liNode);
    }
}