Существует много плагинов jQuery для выделения текста, но можно легко реализовать решение такой задачи без использования библиотек. Скрипт возвращает оригинальный текст, в котором найденные термины помещены в тег, и поэтому их легко стилизовать с помощью CSS.
function highlight(text, words, tag) {
// Устанавливаем тег по умолчанию, если ничего не указано
tag = tag || 'span';
var i, len = words.length, re;
for (i = 0; i < len; i++) {
// Глобальное регульрное выражение для подсвечивания всех терминов
re = new RegExp(words[i], 'g');
if (re.test(text)) {
text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');
}
}
return text;
}
Также можно отменить выделение текста.
function unhighlight(text, tag) {
// Устанавливаем тег по умолчанию, если ничего не указано
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' // Пользовательский тег
));