Как выполнить замену на стороне клиента с помощью Javascript?

Question

У меня есть HTML-страница, с которой я хочу сделать замену на стороне клиента, используя Javascript. Значения я хотел бы заменить в массиве таким образом:

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

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

Таким образом, каждый экземпляр «коричневый» должен быть заменен на «черный». Какой самый простой способ сделать это, чтобы работать в браузере?

Answer 1

Я бы рекурсию во все узлы DOM, используя по умолчанию W3C DOM обхода, выбирая текстовые узлы только для обработки:

// 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) 
}