Підсвічування знайдених слів

При створенні пошуку на сайті, захотілося підсвічувати знайдені слова.

Для цього можна скористатися практично готовим рішенням, яке є в 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' // тег обрамлення
));