Comment implémenter le remplacement côté client avec Javascript?

Question

J'ai une page HTML avec laquelle je veux faire un remplacement côté client en utilisant Javascript. Les valeurs que je voudrais remplacer sont dans un tableau comme ceci:

var searchFor = new Object(); 
var replaceWith = new Object(); 
searchFor = 
[ 
    "quick", 
    "brown", 
    "fox", 
]; 

replaceWith = 
[ 
    "nimble", 
    "black", 
    "cat", 
]; 

Ainsi, chaque instance de « brun » devrait être remplacé par « noir ». Quelle est la meilleure façon de faire cela qui fonctionne à travers le navigateur?

Answer 1

Je récursivité dans tous les nœuds du DOM à l'aide traversal par défaut W3C DOM, choisir les nœuds de texte uniquement pour le traitement:

// replacer object, containing strings and their replacements 
var replacer = { 
    "quick": "nimble", 
    "brown": "black", 
    "fox": "cat" 
}; 

// prepare regex cache 
var replacer_re = (function() 
    { 
    var replacer_re = {}; 
    // certain characters are special to regex, they must be escaped 
    var re_specials = /[][/.*+?|(){}\\\\]/g; 
    var word; 
    for (word in replacer) 
    { 
     var escaped_word = word.replace(re_specials, "\\\1"); 
     // add \b word boundary anchors to do whole-word replacing only 
     replacer_re[word] = new RegExp("\\b" + escaped_word + "\\b", "g"); 
    } 
    return replacer_re; 
    } 
)(); 

// replace function 
function ReplaceText(text) 
{ 
    var word; 
    for (word in replacer) 
    text = text.replace(replacer_re[word], replacer[word]); 
    return text; 
} 

// DOM recursing function 
function ReplaceTextRecursive(element) 
{ 
    if (element.childNodes) 
    { 
    var children = element.childNodes; 
    for (var i = children.length - 1; i >= 0; i--) 
     ReplaceTextRecursive(children[i]); 
    }  

    if (element.nodeType == 3) // 3 == TEXT_NODE 
    element.nodeValue = ReplaceText(element.nodeValue); 
} 

// test it 
function test() 
{ 
    ReplaceTextRecursive(document) 
}