JavaScript поиск по странице. Живой поиск по странице с помощью jQuery Итак пишем скрипт с нуля

Здравствуйте уважаемые читатели блога LifeExample, все мы пользуемся электронным поиском по странице в наших веб браузерах при помощи горячих клавиш CTRL+F либо F3. И кажется уже от таких привилегий нам никуда не деться, так как самостоятельно читать все содержимое страницы, зачастую бывает некогда. Беда в том, что далеко не все начинающие пользователи знают о таких скрытых возможностях любого браузера, но им можно помочь, прикрутив самодельный JavaScript поиск по странице, в тех проектах, где без него совсем никак.

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

Искать на странице нужную информацию будет удобнее, если для этого реализовать соответствующий интерфейс:

В поле нужно ввести слово для поиска и нажать кнопку «Искать», тут все интуитивно понятно. Давайте перейдем к реализации самого механизма поиска по странице и посмотрим, какие могут быть нюансы при его реализации.

Как искать слово на странице?
Нужно проверить корректность ввода данных, в нашем случае мы только обрежем пробельные символы по бокам фразы для поиска, а также просто проверим на саму форму на наличие в ней поискового запроса.
Так как данные статичны, и хранятся только в DOM’e страницы, то поиск по ней будет производиться именно по содержимому DOM (Document Object Model).
Важным является, показать пользователю все результаты, которые нашел наш JavaScript поиск. Т.е. подсветить фон под найденными частями содержимого страницы.
Так как этот мини модуль поиска по странице имеет смысл подключать только к большим страницам, которые имеют прокрутку, то при наличии найденной фразы, где-то вне зоны видимости неплохо будет прокрутить scroll до найденного элемента.
Повторное использование поиска, также является важным моментом в работе данного скрипта. Т.к. подсветка найденных частей является результатом изменения содержимого DOM объекта, то каждый последующий цикл поиска должен затирать результаты предыдущего и возвращать содержимое страницы к исходному виду, для дальнейших изменений новой итерации.
Ну, так вкратце вроде бы и все. Несмотря на объемность выделенных пунктов, реализация их не занимает много времени и места в коде, вот готовый скрипт для механизма JavaScript поиска по странице:

var lastResFind=""; // последний удачный результат
var copy_page=""; // копия страницы в ихсодном виде
function TrimStr(s) {
s = s.replace(/^s+/g, "");
return s.replace(/s+$/g, "");
}
function FindOnPage(inputId) {//ищет текст на странице, в параметр передается ID поля для ввода
var obj = window.document.getElementById(inputId);
var textToFind;

If (obj) {
textToFind = TrimStr(obj.value);//обрезаем пробелы
} else {
alert("Введенная фраза не найдена");
return;
}
if (textToFind == "") {
alert("Вы ничего не ввели");
return;
}

If(document.body.innerHTML.indexOf(textToFind)=="-1")
alert("Ничего не найдено, проверьте правильность ввода!");

If(copy_page.length>0)
document.body.innerHTML=copy_page;
else copy_page=document.body.innerHTML;

Document.body.innerHTML = document.body.innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//стираем предыдущие якори для скрола
document.body.innerHTML = document.body.innerHTML.replace(eval("/"+textToFind+"/gi"),""+textToFind+""); //Заменяем найденный текст ссылками с якорем;
lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
window.location = "#"+textToFind;//перемещаем скрол к последнему найденному совпадению
}


JavaScript поиск по странице



Введите слово или фразу для поиска.

ТоварВесСтоимость

Монитор 19 дюймов	1 кг	1900 руб.
монитор 18 дюймов	2 кг	1800 руб.
Монитор 20 дюймов	2 кг	1900 руб.

Попробуйте, протестировать поисковыми запросами «19», «2 кг» и другими. Также советую проверить авто скролинг, для этого добавляйте текст до тех пор пока справа не появится полоса прокрутки.

Вот так выглядит пример использования скрипта:

Что касается комментариев по коду, наверное, они тут излишни, так как присутствуют внутри скрипта. Единственное, с чем могут возникнуть трудности у новичков, это понимание смысла регулярных выражений при обрезании пробелов. Всем кому понадобится помощь, советую почитать соответствующую статью о регулярных выражениях.

Реализованный в данной статье, с помощью языка JavaScript , поиск по странице валиден во всех браузерах, включая Internet Explorer.

Пару дней назад получил тестовое задание от компании на вакансию Front-end dev. Конечно же, задание состояло из нескольких пунктов. Но сейчас речь пойдет только об одном из них - организация поиска по странице. Т.е. банальный поиск по введенному в поле тексту (аналог Ctrl+F в браузере). Особенность задания была в том, что использование каких-либо JS фреймворков или библиотек запрещено. Все писать на родном native JavaScript .

Поиск готового решения Первая мысль: кто-то уже точно такое писал, надо нагуглить и скопипастить. Так я и сделал. За час я нашел два неплохих скрипта, которые по сути работали одинаково, но были написаны по-разному. Выбрал тот, в коде которого лучше разобрался и вставил к себе на старничку.

Если кому интересно, код брал .

Скрипт сразу заработал. Я думал, что вопрос решен, но как оказалось, не в обиду автору скрипта, в нем был огромный недостаток. Скрипт вел поиск по всему содержимому тега... и, как вы уже наверное догадались, при поиске любого сочетания символов, которые напоминают тег или его атрибуты, ломалась вся страница HTML.

Почему скрипт работал некорректно? Все просто. Скрипт работает следующим образом. Сперва в переменную записываем все содержимое тега body , затем ищем совпадения с регулярным выражением (задает пользователь при вводе в текстовое поле) и затем заменяем все совпадения на следующий код:

...найденное совпадение...
А затем заменяем текущий тег body на новый полученный. Разметка обновляется, меняются стили и на экране подсвечиваются желтым все найденные результаты.

Вы уже наверняка поняли, в чем проблема, но я все же объясню подробней. Представьте, что в поле поиска ввели слово «div» . Как вы понимаете, внутри body есть множество других тегов, в том числе и div . И если мы всем к «div» применим стили, указанные выше, то это уже будет не блок, а непонятно что, так как конструкция ломается. В итоге после перезаписи разметки мы получим полностью сломанную веб-страницу. Выглядит это так.

Как видите, страница полностью ломается. Короче говоря, скрипт оказался нерабочим, и я решил написать свой с нуля, чему и посвящается эта статья.

Итак пишем скрипт с нуля Как все у меня выглядит.

Сейчас нас интересует форма с поиском. Обвел ее красной линией.

Давайте немного разберемся. Я это реализовал следующим образом (пока чистый HTML). Форма с тремя тегами.

Первый - для ввода текста;
Второй - для для отмены поиска (снять выделение);
Третий - для поиска (выделить найденные результаты).

Итак, у нас есть поле для ввода и 2 кнопки. JavaScript буду писать в файле js.js. Предпложим, что его вы уже создали и подключили.

Первое, что сделаем: пропишем вызовы функции при нажатии на кнопку поиска и кнопку отмены. Выглядеть будет так:

Давайте немного поясню что тут и зачем нужно.

Полю с текстом даем id=«text-to-find» (по этому id будем обращатсья к элементу из js ).

Кнопке отмены даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage("text-to-find",false); return false;»

- Тип: button
- При нажатии вызывается функция FindOnPage("text-to-find",false); и передает id поля с текстом, false

Кнопке поиска даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage("text-to-find",true); return false;»

- Тип: submit (не кнопка потому, что тут можно юзать Enter после ввода в поле, а так можете и button использовать)
- При нажатии вызывается функция FindOnPage("text-to-find",true); и передает id поля с текстом, true

Вы наверняка заметили еще 1 атрибут: true/false . Его будем использовать для определения, на какую именно кнопку нажали (отменить поиск или начать поиск). Если жмем на отмену, то передаем false . Если жмем на поиск, то передаем true .

Окей, двигаемся дальше. Переходим к JavaScriptБудем считать, что вы уже создали и подключили js файл к DOM.

Прежде, чем начнем писать код, давайте отвлечемся и сперва обсудим, как все должно работать. Т.е. по сути пропишем план действий. Итак, нам надо, чтоб при вводе текста в поле шел поиск по странице, но нельзя затрагивать теги и атрибуты. Т.е. только текстовые объекты. Как этого достичь - уверен есть много способов. Но сейчас будем использовать регулярные выражения.

Итак, следующее регулярное выражение будет искать только текст след. вида: ">… текст...