Signaler les livres chers — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 7)

Signaler les livres chers

Le DOM : lire et modifier la page · niveau 2

Énoncé

Une liste affiche des prix sous la forme « 89,00 € » dans des <span class="prix">. Écrire une fonction qui lit un tel prix (y compris « 1 234,50 € », avec une espace des milliers) et donne le nombre correspondant, puis ajouter la classe cher aux prix supérieurs à 50 €. Pourquoi serait-il préférable de ne pas avoir à relire les prix dans le texte de la page ?

Corrigé


// Lit un prix affiché « 1 234,50 € » et rend le nombre 1234.5.
function lirePrix(texte) {
  return Number(texte.replace(/[^\d,]/g, "").replace(",", "."));
}

const SEUIL = 50;
for (const span of document.querySelectorAll(".prix")) {
  span.classList.toggle("cher", lirePrix(span.textContent) > SEUIL);
}
console.log([...document.querySelectorAll(".cher")].map((s) => s.textContent).join(" | "));
console.log(lirePrix("1 234,50 €"));


89,00 € | 59,00 €
1234.5

La première expression régulière ne garde que les chiffres et la virgule (elle élimine l'espace des milliers, quelle qu'elle soit, et le signe €), la seconde remplace la virgule décimale par un point avant Number. Relire un nombre dans un texte mis en forme est fragile : un changement de format d'affichage casserait le script. Mieux vaut partir des données (le tableau livres) ou stocker le prix brut dans un attribut data-prix.