Подсветка текста в HTML с помощью JavaScript

По ходу работы над проектом Быстрого поиска на Озон.ру мне понадобилось подсвечивать найденные книжки. И я написал небольшую функцию, которой и хочу с вам поделиться - вдруг пригодится? :)

Работает она просто: в параметрах ей надо передать DOM-элемент, в котором надо сделать подсветку, а также текст, который нужно выделить. Также она умеет подсвечивать отдельные слова из этого текста, для этого служит третий параметр, если его установить в true.

Вот небольшой пример использования.

<style type="text/css">
.found { font-weight: bold; } 
</style>
<script type="text/javascript"
  src="http://fast.blogslov.ru/text-highlight.js">
</script>
<p id="test">Ленинград. МАДЕ ИН ЖОПА</p>
<script type="text/javascript"> 
mark(
  document.getElementById("test"), 
  "жопа ин", false); 
</script>

И результат его работы.

Ленинград. МАДЕ ИН ЖОПА

Код функции можно загрузить с http://fast.blogslov.ru/text-highlight.js. Пользуйтесь на здоровье :)

P.S. В живую код в работе можно посмотреть на сайте быстрого поиска на Озон.ру, если поискать что-нибудь.

4 комментария:

Артём комментирует...

Я когда-то делал попроще:
$$('.searchResultBlock').each(function(item){
this.block = item.innerHTML;
Cookie.read('searchString').split(' ').each(function(word){
if (word.length>2) {
this.block = this.block.replace(eval('/ '+word+'/ig'), ' '+word+'');
}
},this);
item.innerHTML = this.block;
}.bind(this));

Из минусов: Если ввожу например "теКст", подменяет все текст "Текст", "ТЕКСТ" на "теКст", и перерисовывает элементы в которых выполняется подмена.

Stas Davydov комментирует...

Тоже неплохой вариант.

word по-хорошему надо бы еще и заэскейпить.

Артём комментирует...

Тут немного обрезалить тэги, но думаю смысл понятен.

А слово это элемент цикла, each его сам обнуляет.

Stas Davydov комментирует...

Ага, посмотрел внимательнее, понял :)