<< PHP - автоматическое закрытие всех открытых HTML тегов Полезные CSS приемы >>

Подсветка найденных слов

При создании поиска на сайте, захотелось подсвечивать найденные слова. Для этого можно воспользоватся практически готовый решением, которое есть в 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' // тег обрамления
));


01.05.2019 63 Gor Abrahamyan -> web developer : views