Подсветка текста в 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));
Из минусов: Если ввожу например "теКст", подменяет все текст "Текст", "ТЕКСТ" на "теКст", и перерисовывает элементы в которых выполняется подмена.
Тоже неплохой вариант.
word по-хорошему надо бы еще и заэскейпить.
Тут немного обрезалить тэги, но думаю смысл понятен.
А слово это элемент цикла, each его сам обнуляет.
Ага, посмотрел внимательнее, понял :)
Отправить комментарий