Comment remplacer du texte dans un document html sans affecter le balisage?

Question

Comment puis-je écrire une fonction javascript/jquery qui remplace le texte dans le document html sans affecter le balisage, seul le contenu du texte?

Par exemple, si je veux remplacer le mot « style » avec « pas de style » ici:

<tr> 
<td style="width:300px">This TD has style</td> 
<td style="width:300px">This TD has <span class="style100">style</span> too</td> 
</tr> 

Je ne veux pas le remplacement d'affecter le balisage, tout le contenu du texte qui est visible l'utilisateur.

Answer 1

Vous devrez rechercher les nœuds de texte sur votre document, j'utilise une fonction récursive comme ceci:

function replaceText(oldText, newText, node){ 
    node = node || document.body; // base node 

    var childs = node.childNodes, i = 0; 

    while(node = childs[i]){ 
    if (node.nodeType == 3){ // text node found, do the replacement 
     if (node.textContent) { 
     node.textContent = node.textContent.replace(oldText, newText); 
     } else { // support to IE 
     node.nodeValue = node.nodeValue.replace(oldText, newText); 
     } 
    } else { // not a text mode, look forward 
     replaceText(oldText, newText, node); 
    } 
    i++; 
    } 
} 

Si vous le faites de cette façon, vos gestionnaires de balisage et d'événements resteront intacts.

Edit: code modifié pour soutenir IE, puisque les IE sur ne nœuds texte ont pas une propriété textContent, dans Internet Explorer, vous devez utiliser la propriété nodeValue et il ne met en œuvre également pas l'interface Node.

Vérifiez un exemple here.

Answer 2

Utilisez le sélecteur :contains pour rechercher des éléments avec le texte correspondant, puis remplacez leur texte.

$(":contains(style)").each(function() { 
    for (node in this.childNodes) { 
    if (node.nodeType == 3) { // text node 
     node.textContent = node.textContent.replace("style", "no style"); 
    } 
    } 
}); 

Malheureusement, vous ne pouvez pas utiliser text() pour qu'il en bandes en HTML à partir de tous les noeuds descendants, non seulement les nœuds enfants et le remplacement ne fonctionne pas comme prévu.