Грязное, но работающее решение с innerHTML:
var words_and_colors = [
{'word':'this', 'color':'red'},
{'word':'to', 'color':'blue'}
];
function hilte_words_in_element (element, words) {
for (var z=0; z < words.length; z++) {
var re = new RegExp('('+words[z]['word']+'\\b)', 'gi')
element.innerHTML = element.innerHTML.replace(
re,
"<span style=\"color:"+words[z]['color']+"\">$1</span>"
);
}
}
hilte_words_in_element(document.getElementById('changeMe'), words_and_colors);
Поиграть с ним: http://jsfiddle.net/8vDgH/
Обратите внимание, что это считается "плохим" - с этим не следует иметь дело innerHTML если этого можно избежать.Не зная обстоятельств, в которых вы его используете, я не могу более конкретно взаимодействовать с DOM;вы действительно знаете, для чего вы его используете, поэтому я предлагаю вам реорганизовать код, чтобы использовать более приемлемые средства изменения содержимого узла.
Также обратите внимание, что если это может быть выполнено на стороне сервера, онобыло бы гораздо более эффективным.Вы бы использовали аналогичную концепцию, но делайте это до того, как содержимое будет выведено.Я не знаю, является ли это жизнеспособным для вашего варианта использования, но если это так, нет сомнений, что это будет маршрут с наилучшей производительностью (и вы сможете избежать ужаса и зла innerHTML)