Поиск и подсветка текста на странице (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 - отступ в пикселях при прокрутке от верхнего края к выделяемому слову - для эстетического вида
}

Вот походу и все.
Прошу прощения за неоптимизированный код — вот только что закончил и решил поделится, это только начальная версия

Автор: KELeborn

Источник