L'idée est de parcourir le DOM à la recherche d'un item contenant un texte.
Si le nœud contient ce string on met le nœud en rouge.
Nous allons nous inspirer de la structure du code récursif pour parcourir le DOM
printDOM = (node, prefix) => {
//action : affichage
for(let nd of node.children) {
printDOM ( nd, prefix + '-' );
}
}
printDOM(document," ");
Remplaçons simplement action par :
if (node.innerHTML.indexOf(string) > -1) {
node.style.color="red";
}
ce code met en rouge le noeud node contenant le mot string.
function find(node, string) {
if (node.innerHTML.indexOf(string) > -1) {
node.style.color="red";
}
for (n of node.children) {
find(n, string);
}
}
console.log(find(document.body, "para"));
Testez le code ;
Passons à un code offrant une plus grande granularité sur les nœuds
Etudier le code suivant
function find(node, string) {
if (node.nodeType == document.ELEMENT_NODE) {
for (var i = 0; i < node.childNodes.length; i++) {
if (find(node.childNodes[i], string))
return true;
}
return false;
} else if (node.nodeType == document.TEXT_NODE) {
if (node.nodeValue.indexOf(string) > -1) {
alert("le HTLM contient le nom cherché");
return true;
}
return false;
}
}
coller le code suivant dans la console.
function find(node, string) {
if (node.nodeType == document.ELEMENT_NODE) {
for (var i = 0; i < node.childNodes.length; i++) {
if (find(node.childNodes[i], string))
return true;
}
return false;
} else if (node.nodeType == document.TEXT_NODE) {
if (node.nodeValue.indexOf(string) > -1) {
alert("le HTLM contient le nom cherché");
return true;
}
return false;
}
}
puis tapez
console.log(find(document.body, "evry"));
puis
console.log(find(document.body, "second"));
En action
code
Trouver enfin un dernier bug !
Pourquoi ce code ne met pas en rouge l'item trouvé ?function find(node, string) {
if (node.nodeType == document.ELEMENT_NODE && node.nodeName !=
"SCRIPT") {
for (var i = 0; i < node.childNodes.length; i++) {
if (find(node.childNodes[i], string))
return true;
}
return false;
} else if (node.nodeType == document.TEXT_NODE) {
if (node.nodeValue.indexOf(string) > -1) {
//node.classList.add("find");
node.style.color="red";
return true;
}
return false;
}
}
find(document.body, "second");
idée !