Rechercher

Un sommaire auto en JS

Placeholder image

Créer un sommaire automatique pour vos pages en JS :

  • Mettre une div pour recevoir le code généré par le JS
  • Choisir dans quelle div vous souhaitez chercher vos titres
function generateSlug(text) {
    return text.normalize("NFD")
                .replace(/[\u0300-\u036f]/g, "")
                .toLowerCase()
                .replace(/[^\w\s]/g, '')
                .replace(/\s+/g, '-');
}

// Fonction pour créer la table des matières
function createTableOfContents() {
    // Sélectionner tous les titres de niveau 2 dans la div page-body
    const pageBody = document.querySelector('.page-body');
    const headings = pageBody.querySelectorAll('h2');

    // Sélectionner la div #toc et la liste UL où insérer les liens
    const toc = document.querySelector('#toc ul');

    // Parcourir tous les <h2>
    headings.forEach((heading, index) => {
        // Générer une slug (ID) à partir du texte du titre
        const headingText = heading.textContent;
        const slug = generateSlug(headingText);

        // Ajouter une ID au titre <h2> avec la slug générée
        heading.id = slug;

        // Créer un élément <li> pour la table des matières
        const listItem = document.createElement('li');
        
        // Créer un lien <a> qui pointe vers le titre avec l'ID
        const link = document.createElement('a');
        link.href = `#${slug}`;
        link.textContent = headingText;

        // Ajouter le lien à l'élément <li>
        listItem.appendChild(link);

        // Ajouter l'élément <li> à la table des matières (dans l'ul)
        toc.appendChild(listItem);
    });
}

// Appeler la fonction pour créer la table des matières
createTableOfContents();