Как делать поиск по странице в браузере

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

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

(Для наглядности далее буду сопровождать всю статью скринами и кодом, чтоб мне и вам было понятнее, о чем речь в конкретный момент)

Поиск готового решения

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

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

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

Поиск по странице сайта в Яндекс браузере с телефона

Почему скрипт работал некорректно?

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

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

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

Как убрать startmain ru в яндекс браузере

Было до поиска: Просмореть полностью
Стало после поиска: Просмореть полностью

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

Итак пишем скрипт с нуля

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

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

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

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

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

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

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

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

Тип: button
При нажатии вызывается функция FindOnPage(‘text-to-find’,false); и передает id поля с текстом, 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()

Тут все просто: метод innerHTML возвращает html код объекта. В данном случае мы просто заменяем текущий body на оригинальный, который мы сохранили при загрузке всей страницы.

Двигаемся дальше. Даем значения основным переменным.

Итак, на данном этапе у нас уже есть основные переменные и значения. Теперь надо придать нужным участкам кода стили с выделенным фоном. Т.е. проверка выбранного текста на регулярное выражение (по сути мы выбранный регулярным выражением текст снова парсим регулярным выражением). Для этого надо из введенного текста сделать регулярное выражение (сделали), а затем выполнить метод, переданный в виде такста. Тут нам поможет метод eval().

В общем, после того, как мы заменим текст и получим результат со стилями, надо текущий html заменить на полученный. Делаем.

По сути все готово, и скрипт уже работает. Но добавим еще пару деталей для красоты.

1) Обрежем пробелы у текста, который вводит пользователь. Вставляем этот код:

После этой строки:

2) Сделаем проверку на совпадения (если совпадений не найдено — сообщим об этом). Этот код вставляем внутрь функции function FindOnPageGo() после переменных.

Посмотреть исходник можно тут.
Скачать исходник можно тут.

Теперь все. Конечно, можно добавить скролл к первому найденному результату, живой поиск ajax, да и вообще улучшать можно бесконечно. Сейчас это довольно примитивный поиск по сайту. Целью статьи было помочь новичкам, если возникет такой же вопрос как у меня. Ведь простого готового решения я не нашел.

P.S.: для корректной работы необходимо убрать переносы текста в html документе в тех местах, где есть обычный текст между тегами.

Это не принципиально, можно от этих переносов избаляться автоматически на сервисе, но может подскажете заодно, как это пофиксить, если поймете раньше меня.

Как в Яндекс Браузере поиск по картинке

Также, если кто писал подобное, но с живым поиском, поделитесь исходником, будет интересно разобрать.

Буду рад выслушать конструкнтиную критику, мнения, может, рекомендации.

На днях дописал немного код, сделал живой поиск по странице. Так, что вопрос снят. Код HTML не менялся. JS можете посмотреть тут.

Поиск ведется по тегам с классом «place_for_live_search». Так что для того, чтоб алгоритм парсил нужный контент, добавляем класс и готово.

Источник

Дополнительные возможности поиска

Подсказки Яндекс Браузера помогут сформулировать поисковый запрос. А если вы выделите на странице любого сайта слово или словосочетание, Браузер покажет для них справку (быстрый ответ) прямо в контекстном меню.

Поисковые подсказки

— это варианты наиболее популярных запросов, которые начинаются с тех же символов, что и ваш запрос.

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

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

Браузер умеет давать ответы на часто задаваемые запросы прямо в поисковых подсказках. Например, вы можете узнать глубину Байкала или, не переходя к результатам поиска. Также вы можете ввести в Умную строку номер телефона, по которому вам позвонили. Если этот номер используется для рекламы и на него в интернете было достаточно отзывов, вы увидите предупреждение в подсказках.

Если адрес сайта введен с опечаткой, Браузер может предлагать исправления. Для этого:

Если вы не хотите видеть подсказки в Браузере, отключите их:

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

Чтобы начать поиск по странице, используйте один из способов:

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

Если вам нужны только конкретные грамматические формы слова, без учета родственных форм, включите в диалоге поиска опцию Точное совпадение.

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

Горячие клавиши для поиска по странице

  • Windows и Linux
  • macOS

Поиск по картинке

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

Как сделать Гугл основным браузером в опере

Чтобы найти изображения, похожие на:

  • Картинку из интернета
  • Картинку с компьютера

Нажмите на картинку правой кнопкой мыши и выберите Найти это изображение в Яндексе.

Через панель инструментов

Наведите указатель на картинку и на появившейся панели нажмите кнопку.

Нажмите на картинку правой кнопкой мыши и выберите Поиск по картинке.

Результат поиска откроется в Яндекс.Картинках.

Дополнительные возможности поиска

Подсказки Яндекс Браузера помогут сформулировать поисковый запрос. А если вы выделите на странице любого сайта слово или словосочетание, Браузер покажет для них справку (быстрый ответ) прямо в контекстном меню.

Поисковые подсказки

— это варианты наиболее популярных запросов, которые начинаются с тех же символов, что и ваш запрос.

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

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

Браузер умеет давать ответы на часто задаваемые запросы прямо в поисковых подсказках. Например, вы можете узнать глубину Байкала или, не переходя к результатам поиска. Также вы можете ввести в Умную строку номер телефона, по которому вам позвонили. Если этот номер используется для рекламы и на него в интернете было достаточно отзывов, вы увидите предупреждение в подсказках.

Если адрес сайта введен с опечаткой, Браузер может предлагать исправления. Для этого:

Нажмите → Настройки → Общие настройки.

Если вы не хотите видеть подсказки в Браузере, отключите их:

Нажмите → Настройки → Общие настройки.

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

Чтобы начать поиск по странице, используйте один из способов:

нажмите → Дополнительно → Найти.

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

Если вам нужны только конкретные грамматические формы слова, без учета родственных форм, включите в диалоге поиска опцию Точное совпадение.

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

Источник

Как найти слово на сайте в интернете: пошаговое руководство

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

Как узнать какие страницы посещал

Способ 1: С помощью горячих клавиш

Как найти слово на сайте в интернете: пошаговое руководство

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

Неважно какой у вас браузер (Google Chrome, Internet Explorer, Mozilla Firefox, Opera) или программа, работающая с текстом (блокнот, Word, Excel, FineReader) – всегда используются одни и те же кнопки.

Итак, для начала вам нужно найти и зажать клавишу Ctrl – она находится в нижней части клавиатуры, в первом ряду (слева или справа от пробела). После этого, не отпуская кнопку Ctrl, жмем по английской букве F (русская А ).

Как найти слово на сайте в интернете: пошаговое руководство

Если у вас на компьютере установлена Mac OS система, то вместо Ctrl используем кнопку Command (или cmd ).

ПРИМЕЧАНИЕ! Во многих программах горячие клавиши обозначены в сокращенном виде с использованием знака «Плюс». В данном случае это Ctrl + F и Command + F.

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

Как найти слово на сайте в интернете: пошаговое руководство

СОВЕТ! Если название слишком сложное, то вы можете его скопировать. Для этого выделяем его с помощью той же левой кнопки мыши и далее используем кнопки Ctrl + C. Теперь устанавливаем курсор в строку поиска и вставляем скопированный текст – Ctrl + V.

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

Как найти слово на сайте в интернете: пошаговое руководство

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

Как найти слово на сайте в интернете: пошаговое руководство

Но убрав окончание браузер нашел сразу три слова.

Как найти слово на сайте в интернете: пошаговое руководство

Чтобы закрыть поиск, можно нажать на крестик или использовать кнопку:

Способ 2: Через меню

Давайте посмотрим, как еще можно произвести поиск по слову на каком-либо сайте. По сути данный метод будет отличаться только вариантом запуска поисковой строки. Выбираем главу для своего браузера.

Google Chrome

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

Источник
Рейтинг
Загрузка ...