Регулярные выражения Javascript

Question

Имея небольшую проблему для быстрого скрипта «Поиск и выделение», над которым я работаю. Я использую регулярные выражения, потому что я хотел бы выполнить поиск на клиентской стороне после загрузки документа. Моя функция поиска/выделить выглядит следующим образом:

function highlight(word, colour, container) { 
    var regex = new RegExp("(>[^<]*?)(" + word + ")", "ig"); 
    var replace = "$1<span name='searchTerm' style='background-color: " + colour + "'>$2</span>"; 

    if (regex.exec(container.innerHTML)) { 
     container.innerHTML = container.innerHTML.replace(regex, replace); 
     return true; 
    } 
    return false; 
} 

word слово для поиска, colour цвет, чтобы выделить его и container является элементом для поиска в

Рассмотрим элемент, содержащийся в этом. :

<ul> 
    <li>Set the setting to the correct setting.</li> 
</ul> 

Скажем, я передал слово «установить» в функцию выделения. В текущем состоянии он находит только первый экземпляр набора из-за ленивой репликации.

Так что, если изменить регулярное выражение для этого:

var regex = new RegExp("(>[^<]*?)?(" + word + ")", "ig"); 

Теперь это прекрасно работает, он выделяет все экземпляры строки «набор». Но если я передам поисковое слово «li», то он заменит текст внутри тегов!

Есть ли быстрое решение для этого регулярного выражения, чтобы получить поведение, которое я хочу? Мне нужно, чтобы он заменил все экземпляры строки поиска, но не те, которые были найдены как часть тега. Я хотел бы сохранить его на стороне клиента, используя регулярное выражение.

Спасибо!

Answer 1

You shouldn't be using regex to parse HTML. Пройдите дерево DOM правильно и выполните поиск и замените на чистый текст.

Кстати, есть плагин jQuery, который делает то, что вы хотите; вы можете использовать его, или смотреть на него, чтобы получить представление о том, как это сделать:
http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html