Javascript: выделение части строки с тегами <b>

Question

Я пытаюсь выделить совпадение в строке, вставив теги <b> вокруг соответствующей подстроки.Например, если запрос «cat», то:

"I have a cat."

должен стать:

"I have a <b>cat</b>."

Аналогично, если запрос «переполнение стека», то:

"Stack Overflow is great."

должно стать:

"<b>Stack Overflow</b> is great."

Другими словами, я должен сохранить регистр исходной строки, но не учитывать регистр при сопоставлении.

Одна вещь, которую ядо сих пор пытался:

var regex = new RegExp('(' + query + ')', 'i');
return strResult.replace(regex, '<b>$1</b>');

Однако, это вызывает исключение времени выполнения, если запрос содержит какие-либо круглые скобки, и я думаю, что было бы слишком много хлопот, чтобы попытаться избежать всех возможных символов регулярного выражения.

Answer 1

См. " Escape-символы регулярных выражений в строке - JavaScript " для получения информации о том, как экранировать специальные символы регулярного выражения, такие как ()

EDIT: также проверьте this старый вопрос SO, который задает очень похожий - почти идентичный - вопрос.

Answer 2

Не используйте регулярные выражения для управления HTML.

Например, если запрос «cat», то:

I have a <em class="category">dog</em>

станет беспорядком сломанной разметки. В тех случаях, когда запрос и текст могут быть сгенерированы пользователем, в результате атак с использованием HTML-инъекций, скорее всего, возникнут дыры в безопасности межсайтовых сценариев.

См. этот вопрос для примера того, как найти и разметить текст с помощью регулярных выражений в DOM.

(Для полноты, здесь есть функция для экранирования специальных символов регулярных выражений, поскольку версия, связанная с snipplr, недостаточна. Она не может экранировать ^ и $, плюс -, который является специальным для групп символов. )

RegExp.escape= function(s) {
    return s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
};

Answer 3

Как насчет использования плагина выделения?

• http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html