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

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


Поделиться с друзьями:

Другие публикации:



Написать комментарий через:

 
       
  • ВКонтакте
  •        
  • Локальный блог
  •  
 
 

Ваш отзыв

Имя *

Почта (скрыта) *

Сайт

Напишите цифрами двa вoceмь двa *

Сообщение

 
Статьи пользователей на ArtKiev Design Studio