Discussion :

[thais781]

Bonjour,

Je voulais savoir si en JS, il était possible de cherche un mot dans un page html et de remplacer ce mot par un autre mot ou par exemple le mettre en gras ?

Thais

[yahiko]

A priori oui.
En faisant une recherche sur document.body.innerHTML.

[sekaijin]

oui et non

effectivement yahiko à raison innerHTML contient bien le code source de la page
un appel à replace remplacera le mot
mais en fait il va aussi changer toute la page.

modifier le innerHTML d'un élément revient à supprimer son contenu et le remplacer par le DOM correspondants au code HTML fourni.

si donc des valeurs ont changés (variable js) après le replace la page sera comme à l'origine (les modifs seront perdues)

mais il est possible de chercher tous les textNodes et de remplacer le texte dans ceux-ci
c'est long mais pas compliqué.

il est grandement préférable de mettre un id sur l'élément modifiable et de ne sélectionner que selui-ci lors du remplacement

A+JYT

[SylvainPV]

Il est effectivement préférable de préciser un sous-conteneur contenant le texte à remplacer pour des raisons évidentes de performance et de prévention de problèmes. Par contre un ID n'est pas forcément le plus approprié, attention avec les mauvais réflexes.

Un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
   var node;
    var walker = document.createTreeWalker(
        elementSousConteneur, 
        NodeFilter.SHOW_TEXT, 
        null, 
        false
    );
 
    while(node = walker.nextNode()) {
        node.textContent = node.textContent.replace("mot-a-remplacer", "remplacement");
    }

[sekaijin]

je pense tout de même que si on n'a à modifier qu'un seul élément

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("myId").innerText.replace("mot-a-remplacer", "remplacement");

est plus efficace.

je maintiens que l'ID est une bonne pratique. même si très souvent je dis qu'on peut efficacement s'en passer.

A+JYT

[SylvainPV]

L'ID n'est pas une bonne pratique, pas plus que ne l'est la classe, le tagName ou toute autre forme de sélection. La bonne pratique, c'est de choisir le plus approprié selon la situation. Et au vu du nombre de gens qui ne connaissent rien d'autre que document.getElementById, il me paraît important de mentionner les autres options.

Et pour info, innerText n'est pas standard. C'est textContent qu'il faut utiliser.