При создании поиска на сайте, захотелось подсвечивать найденные слова. Для этого можно воспользоватся практически готовый решением, которое есть в PHP - но тогда нагрузка/скорость выполнения будет возрастать если проект окажется высоконагруженным. Пришлось искать решение на JavaScript.
Скрипт возвращает оригинальный текст, помещенный в теги, чтобы они могли быть оформлены в CSS.
function highlight(text, words, tag) {
// Default tag if no tag is provided
tag = tag || 'span';
var i, len = words.length, re;
for (i = 0; i < len; i++) {
// Global regex to highlight all matches
re = new RegExp(words[i], 'g');
if (re.test(text)) {
text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');
}
}
return text;
}
Также можно убрать подсветку текста.
function unhighlight(text, tag) {
// Default tag if no tag is provided
tag = tag || 'span';
var re = new RegExp('(<'+ tag +'.+?>|<\/'+ tag +'>)', 'g');
return text.replace(re, '');
}
Используем:
$('p').html( highlight(
$('p').html(), // текст для поиска
['foo', 'bar', 'baz', 'hello world'], // слова для обрамления
'strong' // тег обрамления
));