Кодинг
★ Рубрика: Кодинг
★ Тема: jquery, Javascript

Подсветка слов в тексте

Здесь приведен пример скрипта, который позволяет находить и выделять в тексте определенные слова. Пример работы скрипта можно видеть в блоке текста, приведенного ниже. Скрипт находит и выделяет вхождение в текст следующих слов или, точнее, сочетаний букв: слово, пример, текст, так.
Это пример блока слов, в которых скрипт находит заданные слова и выделяет их зеленым цветом. Вам надо просто задать список слов и они будут автоматически найдены в тексте и выделены цветом. Выделяется как отдельное слово так и текст, входящий в слово. Скрипт компактный, работает быстро и поддерживает выделение в тексте слов, написанных кириллицей. Может пригодиться, например, для выделения стоп-слов.
Теперь приведем коды скриптов и стилей, с помощью которых было реализовано выделение нужных слов в тексте. Для начала зададим стиль подсветки выделенного слова:
.highlight { background:#0C3; color:#fff;}
Дальше приведем полный код основного скрипта. Как вы понимаете, здесь вы можете настроить свой класс для текстового блока, в котором будет выполняться подсветка. В нашем случае - это highlight. Как вы легко сообразите, этот код будет работать только если подключена библиотека jQuery.
(function($){
 $.fn.liHighLight = function(params){
 var p = $.extend({
 words: '',
 class: 'highlight'
 }, params);
 return this.each(function(){
 var wrap = $(this);
 var wArr = $.trim(p.words).split(' ');
 htmlreplace($(this));
 function htmlreplace(element){
 if (!element) element = document.body;
 var wrap = $(element).contents().each(function () {
 if (this.nodeType === 3) {
 var result = $(this).text();
 for(i = 0; i < wArr.length; i++){
 result = result.replace(new RegExp(wArr[i],'gi'),'$&');
 }
 $(this).after(result).remove();
 } else {
 htmlreplace(this);
 };
 });
 };
 });
 };
})(jQuery);
И в завершение остается только указать список для подсветки в следующем скрипте:
$(function(){
 $('.content').liHighLight({
 words:'слово пример текст так',
 class: 'highlight'
 });
});
 Похожие публикации: jquery, Javascript

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]