Регулярные выражения 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>

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

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

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

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

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

Спасибо!

Answer 1

Вы не должны использовать регулярные выражения для анализа HTML . Пройдите по дереву DOM правильно и выполните поиск и замену на чистом тексте.

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