Поиск и подсветка текста на странице (JavaScript — jQuery)

Нужен был поиск на страничке, точнее в тексте, не серверный, а обычный. То есть — загрузил страничку где много текста, читаешь, и при надобности ищешь. Порылся в интернете и, к сожалению, готово варианта (с переходом между словами и прокруткой странички) не нашел, хотя в реализации нету ничего сложного — или плохо искал, или никому не надо было.
Вот как раз заканчиваю — решил поделиться первым вариантом.

Само собой используется библиотека jQuery.
За основу я взял статейку jQuery – подсветка слов в тексте или HTML отсюда (их пример). Как подключить к страничке скрипт там описано.

буду использовать ниже «слово» = «словосочетание» = «словосочетание букв и\или символов».

Теперь начнем расширять функционал:
кнопки поиска, выделение следующего слова и предыдущего, и скролл странички к выделенному слову

1) делаем подсветку конкретного слова
в файл jquery.highlight.js добавляем
jQuery.fn.selectHighlight = function(number) {
	return this.find("span.highlight:eq("+number+")").addClass('selectHighlight').end();
};


2) в стиль прописываем отображение выделяемого слова и меняем стиль подсветки для себя
.highlight { background-color: gray; color: white }
.selectHighlight { background-color: rgb(35, 140, 0) }


3)Создаем кнопки и поле ввода
<div id="search_block">
	<label>
		Search:
		<input id="search_text" type="text" value=""/>
	</label>
		<input id="search_button" type="button" value="Search"/>
		<input id="prev_search" type="button" value="<"/>
		<input id="next_search" type="button" value=">"/>
		<input id="clear_button" type="button" value="Clear"/>
</div>


4)приписываем кнопкам действия
копируем код:

(ниже опишу для чего эта функция)
function scroll_to_word(){
	pos = $('#text .selectHighlight').position()
	$('#content').jqxPanel('scrollTo', 0, pos.top - 5);
}	

			var search_number = 0; //индекс конкретного сочетания из найденных
			var search_count = 0;	//количество найденных сочетаний			
			
			//search - поиск слова по нажатию на кнопку "search_button"
			$('#search_button').click(function() {
				$('#text').removeHighlight();
				txt = $('#search_text').val();
				if (txt == '')
					return;
				$('#text').highlight(txt);
				search_count = $('#text span.highlight').size() - 1;
				search_number = 0;
				$('#text').selectHighlight(search_number); //выделяем первое слово из найденных
				scroll_to_word(); //скролим страничку к выделяемому слову
			});
			
			//clear - очистка выделения по нажатию на кнопку "clear_button"
			$('#clear_button').click(function() {
				$('#text').removeHighlight();
			});
			
			//prev_search - выделяем предыдущие слово из найденных и скролим страничку к нему
			$('#prev_search').click(function() {
				if (search_number == 0)
					return;
				$('#text .selectHighlight').removeClass('selectHighlight');
				search_number--;
				$('#text').selectHighlight(search_number);
				scroll_to_word();
			});
			
			//next_search - выделяем следующее слово из найденных и скролим страничку к нему
			$('#next_search').click(function() {
				if (search_number == search_count)
					return;
				$('#text .selectHighlight').removeClass('selectHighlight');
				search_number++;
				$('#text').selectHighlight(search_number);
				scroll_to_word();
			});
			


5)
function scroll_to_word(){...} — функция скрола (перемотки) странички к нужному нам слову
ну вообще делается очень легко с помощью простого плагина jqueryscrollto, который берем отсюда, и ищем по классу .highlight и номером eq('+search_number +') (search_number — смотрим в список глобальных переменных скрипта).
jQuery('#content').scrollTo('.highlight('+search_number +')');


Но мне пришлось использовать этот набор плагинов (jqwidgets), так как был нужен собственный скрол для странички а не браузерный, поэтому я воспользовался их API:
scrollTo Method
Scroll to specific position.
Code examples
Invoke the scrollTo method.
$('#jqxPanel').jqxPanel('scrollTo', 10, 20);


function scroll_to_word(){
    pos = $('#text .selectHighlight').position()
    $('#content').jqxPanel('scrollTo', 0, pos.top - 5); // 5 - отступ в пикселях при прокрутке от верхнего края к выделяемому слову - для эстетического вида
}


Demo
Вот походу и все.
Прошу прощения за неоптимизированный код — вот только что закончил и решил поделится, это только начальная версия
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 17

    +8
    Мне кажется, или в посте действительно нет ссылки на пример?
      –9
      Не счел нужным. Сильно надо? — выложу демку
        +1
        Как-то все таки привычнее с демкой. Иначе, чтобы оценить то, о чем Вы рассказываете — придется самому написать и запустить.
          0
          Выложил
        +7
        Я что-то не понял или Ctrl-F действительно не то?
          –1
          Ctrl-F то, но в проекте нужно было сделать альтернативу на скрипте
            0
            Как меня раздражает панелька поиска в Мегаплан, которая перехватывает Ctrl-F и не дает искать текст на странице…
              0
              Отключай скрипты
            0
            Есть интерфейсные среды, где JS доступен, но Ctrl-F нет. PhoneGAP тому пример.
              +1
              Ctrl-F большинство людей слыхом не слышали.

              Ой, это ответ make_luv.
            0
            За основу я взял статейку jQuery – подсветка слов в тексте или HTML отсюда. Как подключить к страничке скрипт там описано
            Так в чём суть статьи? Это tutorial, или код с пояснениями? Если tutorial, то поставьте флаг и, пожалуйста, не надо посылать нахрен людей искать что-то в сторонних ресурсах; если код с пояснениями, хорошо бы сразу же определить аудиторию, то-есть сразу же сказать, что ничего более использования виджетов jQuery в статье не будет, никаких интересных фишек и решений в пару строчек.
              –1
              Такое впечатление что со обратной стороны монитор забрызган слюной :). Ну а если внимательно прочесть, то виджеты мне пришлось использовать, поэтому я написал пример как для обычной реализации через плагин «СкролТо», так и к тому виджету который я юзал.
              +1
              Какой-то странный день на хабре, сначала туториал по установке Rails, теперь вот это
                0
                Поделюсь и я своим вариантом подсветки, но на чистом JS (поддержка кириллицы, без innerHTML (чтобы без reflow), разные слова подсвечены разными цветами, искать можно сразу по нескольким словам в одном поле ввода). Основан был на варианте, который, к сожалению, работал только с латинскими текстами. Используемые там либы к ядру подсветки не относятся, просто как оболочки.

                spmbt.kodingen.com/wk/test2-20130517.htm
                  0
                  В браузере есть прекрасная функция поиска как писали выше, которая отлично работает.

                  Ну и как всегда простыня jq говнокода, вместо осознанного подхода к делу.
                    –1
                    Если статья для кого то вовсе не нужная, пожалуйста не читайте и не дублируйте комент о «Ctrl-F».
                    1 — в примере (а так и было в моем задании) браузерный поиск работает не коректно. 2 — в задании как раз и было: альтернатива браузерному поиску ( о котором не все знают) и возможность задать общий стиль и нужное размещение
                      0
                      Всё замечательно, но действительно, нужно бы сделать как в примере habrahabr.ru/post/180573/#comment_6271147 поиск не только словосочетаний, а и абсолютно любого набора слов и частей слов
                      Вот еще один из таких плагинов masscode.ru/index.php/k2/item/33-lihighlight

                      Only users with full accounts can post comments. Log in, please.