Un sommaire automatique — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 7)

Un sommaire automatique

Le DOM : lire et modifier la page · niveau 2

Énoncé

La page « À propos » a plusieurs titres <h2>, dont certains sans identifiant, et un <nav id="sommaire"> vide. Écrire un script qui y construit une liste numérotée de liens vers chaque <h2>. Un titre sans id en reçoit un, fabriqué à partir de son texte : minuscules, sans accents, les suites de caractères autres que lettres et chiffres remplacées par un tiret (« Venir à la librairie » donne venir-a-la-librairie).

Corrigé


// Construit un sommaire des <h2> : chaque titre reçoit un id s'il n'en a pas.
function identifiant(texte) {
  return texte
    .toLowerCase()
    .normalize("NFD")
    .replace(/\p{Diacritic}/gu, "")
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-|-$/g, "");
}

const titres = document.querySelectorAll("main h2");
const liste = document.createElement("ol");
for (const h2 of titres) {
  h2.id ||= identifiant(h2.textContent);
  const lien = document.createElement("a");
  lien.href = `#${h2.id}`;
  lien.textContent = h2.textContent;
  const li = document.createElement("li");
  li.append(lien);
  liste.append(li);
}
document.querySelector("#sommaire").append(liste);
console.log([...liste.querySelectorAll("a")].map((a) => a.getAttribute("href")).join(" "));


#histoire #equipe #venir-a-la-librairie

h2.id ||= ... n'affecte que si l'identifiant est vide : les deux premiers titres gardent le leur. normalize("NFD") sépare chaque lettre accentuée en une lettre et un accent, que l'expression /\p{Diacritic}/gu supprime ; les deux derniers remplacements forment les tirets et retirent ceux des extrémités.