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.

hollandaisvolant 🌐

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