Как сделать поиск на странице

Поиск ключевых слов и информации на странице в браузере

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

Но что если на поиск необходимой информации совершенно нет времени, а найти какое-либо слово нужно как можно скорее? В этом случае нужно включать функцию поиска по странице, встроенную практически во всех компьютерные программы для работы с текстом. Основными из этих программ являются текстовые редакторы и браузеры для выхода в интернет. В каждом из них есть определенные горячие клавиши, которые позволяют быстро отыскать все вхождения словосочетания или целого предложения.

Быстрый поиск необходимых слов

Для быстрого поиска ключевого слова или фразы в браузере или текстовом документе можно использовать функцию «поиск на странице». Горячие клавиши помогают искать нужные абзацы и облегчают работу с поисковыми системами, позволяют быстро редактировать текст.

При использовании любого браузера — Гугл Хром, Яндекс Браузер, Мозилла, Сафари — можно пользоваться горячими клавишами, для чего нужно сделать такой шаг: в поисковой системе или текстовом документе необходимо нажать комбинацию клавиш Ctrl + F. При использовании планшетов, компьютеров и телефонов компании Apple подходит сочетание клавиш Cmd + F. Это действие откроет окно для ввода слов, необходимых для поиска.

Строка поиска в разных браузерах может находиться в таких местах:

• в Опере — верхний левый угол;
• в Мозилле — нижний левый угол;
• в Гугл Хром — верхний правый угол;
• в Internet Explorer — верхний левый угол;
• в Яндекс Браузере — верхний правый угол.

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

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

Поиск в текстовом редакторе

При просмотре документов используются текстовые редакторы, в которых также нужно искать ключевые слова. Найти необходимую фразу на страницах в редакторе текста Microsoft Office Word можно таким же образом:

1. В открытом текстовом документе необходимо нажать сочетание клавиш Ctrl + F. Некоторые программы позволяют открыть поисковую строку с помощью клавиши F3. Появится строка или окно, в котором нужно вести искомую фразу.
2. После ввода нажимается кнопка «Найти», появится меню, в котором необходимо выбрать пункт «Основной документ».
3. В тексте цветом выделится фраза, которую искали. Если выделяется несколько аналогичных фраз, то необходимо пользоваться кнопкой «Найти далее» для просмотра всего документа. В поисковой строке будет стоять количество искомых слов в тексте.
4. Текстовый документ закрывается крестиком или кнопкой «Закрыть» на панели поиска.

Больший выбор возможностей для поиска нужных слов в текстовом документе Word можно найти с помощью кнопки «Больше». Она позволяет искать слова с учетом регистра, суффиксов, приставок. Особенно удобно использовать эту опцию, когда нужно найти слова иностранного происхождения или профессионального сленга.

Возможности поисковой панели

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

Чтобы сделать поиск по странице в браузере Опера, нужно нажать клавишу «/», и искомое предложение или словосочетание на странице выделится цветом. Если при этом курсор мыши находится в каком-либо поле, то функция поиска не будет работать.

Функция поиска в браузерах — лучший способ быстро найти необходимую информацию по ключевым словам или фразам. Ею удобно пользоваться при ограниченном времени выхода в интернет или просмотре большого количества документов.

Видео

Это видео поможет вам научиться быстро находить необходимую информацию в интернете.

Организация поиска по веб-странице на JavaScript (без jQuery)

Пару дней назад получил тестовое задание от компании на вакансию 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.

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

Итак, следующее регулярное выражение будет искать только текст след. вида: «>… текст. <«. Т.е. будет проходить поиск только текстовых объектов, в то время, как теги и атрибуты будут оставаться нетронутыми.

Так мы будем находить нужные части кода, которые будем парсить и искать совпадения с текстом, который ввел пользователь. Затем будем добавлять стили найденным объектам и после этого заменять html — код на новый.

Приступим. Сперва переменные, которые нам понадобятся.

И сразу определим locale_HTML значение независимо от того, ищем мы что-то или нет. Это нужно, чтоб сразу сохранить оригинал страницы и иметь взможность обнулять стили.

Ок, теперь уже стоит создать функцию, которая вызывается у нас из DOM. Сразу прикинем, что внутри у нас должны быть 2 функции, каждая из которых срабатывает в зависимости от нажатой кнопки. Ведь мы либо проводим поиск, либо обнуляем его. И контроллируется это атрибутом true/false, как вы помните. Так же надо понимать, что при повторном поиске прежние стили должны обнуляться. Таким образом получим следующее:

Ок, часть логики реализована, двигаемся дальше. Необходимо проверять полученное слово на количество символов. Ведь зачем нам искать 1 букву/символ. В общем, я решил эту возможность ограничить 3+ символа.

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

Сейчас поясню этот участок кода. Единственное, что могло стать не ясно — вот эта строка:

function FindOnPageBack()