Как искать в содержимом текущей страницы текст или ссылки
При просмотре веб-сайта в Firefox, вы можете искать на странице слова и фразы. Firefox покажет вам, где на странице находится введённая фраза, а также позволит подсветить все места, где она находится.
Оглавление
Использование панели поиска
Для поиска текста на странице:
- Щёлкните по кнопке меню
, затем щёлкните по Найти на этой странице… , или используйте сочетание клавиш, нажав Ctrl command + F .) Строка поиска появится внизу окна. 
- Введите поисковую фразу в панели поиска. Firefox автоматически подсветит первый совпадающий результат на странице по мере вашего ввода.
- Если выбран вариант Подсветить все, все другие совпадающие результаты будут также подсвечены другим цветом.
- Номер текущего подсвеченного результата и общее количество совпадающих отображаются на панели поиска. Если совпадений нет, отображается Фраза не найдена.
- Нажмите на стрелку Предыдущее или Следующее, чтобы прейти между совпадениями на странице.
- Нажмите X или нажмите Esc , чтобы закрыть панель поиска.
Вы можете включить или отключить любую из следующих опций, чтобы изменить результаты поиска:
- Подсветить все: Подсвечивает все результаты, которые совпадают с введённым поисковым запросом. Нажмите снова, чтобы это отключить.
- С учётом регистра: Делает поиск чувствительным к регистру. Обычно, если вы ищете «поисковая фраза», то такие результаты как «Поисковая Фраза» также будут найдены при использовании панели поиска. Если выбрана эта опция, то будут найдены только те фразы, которые вы вводите.
- С учётом диакритических знаков: Когда выбрана эта опция, поиск будет различать буквы с акцентом и их базовые буквы. Например, поиск по «рéзюмé» не найдёт соответствия для «резюме».
-
- Только слова целиком: Будут подсвечены только целые слова, совпадающие с вашим поиском.
Быстрый поиск
Панель Быстрого поиска обычно используется для быстрого поиска и она исчезнет через несколько секунд.
Нжмите клавишу / (слэш вправо), когда не находитесь в текстовом поле, чтобы открыть панель Быстрого поиска. Затем введите то, что хотите найти.
В панели Быстрого поиска нет всех элементов управления и опций, просто поле поиска и кнопка закрытия, но поиск следует тем опциям, которые были выбраны в полной панели поиска. Выбранные опции будут отображены рядом с полем поиска.
Чтобы закрыть панель Быстрого поиска, подождите немного, пока она исчезнет или нажмите клавишу Esc на клавиатуре, чтобы закрыть её немедленно. Вы также можете щёлкнуть где-нибудь в Firefox на том, что не является частью панели Быстрого поиска, и она закроется.
Искать только ссылки
Если вы хотите найти только фразы, которые содержатся в ссылках на просматриваемой странице:
- Наберите ‘ (символ одиночной кавычки), пока не находитесь в текстовом поле, чтобы открыть панель быстрого поиска (только ссылки).
- Введите фразу для поиска в поле Быстрый поиск (только ссылки). Будет выбрана первая ссылка, которая содержит набранную фразу.
Автоматический поиск по странице по мере ввода
Firefox может начать поиск введённой фразы, которую вы вводите, без предварительного открытия панели поиска. Чтобы включить эту функцию:
На Панели меню в верхней части экрана щёлкните Firefox и выберите Настройки . Нажмите кнопку и выберите Настройки . Нажмите кнопку 
и выберите Настройки .
После включения этой функции панель Быстрого поиска будет автоматически появляться, когда вы начинаете ввод внутри веб-сайта, не находясь в текстовом поле.
Сочетания клавиш
- Нажмите Ctrl command + F , чтобы показать панель поиска.
- Нажмите / , чтобы показать панель Быстрого поиска, не находясь в текстовом поле.
- Нажмите ‘ , чтобы показать панель Быстрого поиска (только ссылки), пока не находитесь в текстовом поле.
- Нажмите Ctrl command + G или F3 для подсвечивания следующего совпадения с вашей поисковой фразой или ссылкой, даже если панель поиска не отображается.
- Нажмите Shift + Ctrl command + G или Shift + F3 , чтобы подсветить предыдущее совпадение.
- Нажмите Esc , чтобы закрыть видимую в настоящий момент панель поиска, когда фокус находится на ней, и отменить подсветку.
Эти прекрасные люди помогли написать эту статью:
Станьте волонтёром
Растите и делитесь опытом с другими. Отвечайте на вопросы и улучшайте нашу базу знаний.
Поиск слова на сайте
Контент в браузере – это многочисленные ролики, видео и статьи, которые пользователь может открыть в результате поиска определенного запроса. Иногда может возникнуть такая ситуация, когда человек просто перешел на необходимую ему страницу, но та в итоге содержит очень много информации, которую человек в целом не может отфильтровать сразу, а нужный текст так и не найдет.
Для того, чтобы решить и оптимизировать эту проблему, был создан поиск по страничке в браузере. Это такая специальная функция, при помощи которой пользователь может быстро на определенной страничке найти ту информацию, которая ему нужна. Это актуально для тех, кто постоянно находится в поиске той или иной конкретной информации.
Поиск по странице в браузере с помощью горячих клавиш
Есть разные способы, при помощи которых можно найти определенный фрагмент текста или же нужное слово на страничке. Самый простой способ – использование горячих клавиш. Но подвох в том, что для каждого браузера есть свои горячие клавиши, более подробно о которых стоит поговорить далее.
В Google Chrome
Для популярного браузера Гугл Хром есть свои специальные горячие клавиши. Горячие клавиши – это так комбинация кнопок на клавиатуре, при помощи которых активизируется необходимая функция. Таким образом в браузере пользователь может найти нужное слово следующим способом:
- Для начала переходим в сам браузер, а далее открываем ту страничку, на которой пользователю хотелось бы провести поиск;
- После этого стоит зажать такое сочетание клавиш, как Ctrl+F. Это сочетание на компьютере можно найти при нажатии кнопки на самом нижнем углу слева, а также при помощи нажатия одноименной буквы;
- После этого необходимо ввести то слово, которое пользователь хочет найти. Проводится поиск по страничке, а необходимые слова, которые соответствуют введённым, подсвечиваются желтым цветом.
В зависимости от версии браузера, горячие кнопки могли поменяться. Стоит внимательно посмотреть на сайте разработчиков четкие горячие кнопки, ведь они могли измениться с обновлением.
В Opera
Опера – это тот браузер, который имеет на данный момент не такое широкое распространение, но даже несмотря на это, многие люди пользуются им, потому что привыкли к той системе, которая есть в этом поисковом сервере.
Как и для других браузеров, пользователь может использовать универсальные горячие клавиши, которые помогут найти нужное слово или же целое словосочетание на страничке. Если пользователь вобьет сочетание Ctrl + F, то он сможет ввести нужное ему сочетание, а после оно автоматически найдется на страничке.
В Yandex
Яндекс никак не отличается от других браузеров, потому что у него точно такой же поиск по страничке, как и у других веб-поисковиков. Поиск по страничке в Яндексе появился давно. Чтобы пользователь мог найти слово, он может зажать сочетание клавиш Ctrl + F, а после ввести то слово, которое ему нужно.
В Яндексе удобно то, что даже если пользователь ошибся с раскладкой, то браузер автоматически исправит ту раскладку, которую он поставил, при этом найдет то слово, которое будет на правильной раскладке. Это поможет избежать некоторых проблем при вводе текста.
В Internet Explorer
Интернет Эксплорер – браузер, который ничем не отличается от себе подобных. Существуют пользователи, которые продолжают им пользоваться, хотя на смену этому «старичку» пришли другие, более прогрессивные браузеры. Несмотря на это, в офисах часто любят использовать именно этого «черного коня».
Для того, чтобы найти необходимое слово, пользователю стоит сначала нажать Ctrl, а после уже найти необходимо F. Таким образом это сочетание является универсальным для всех браузеров, а интернет – исследователь – не исключение.
В Mozilla Firefox
Если говорить также про популярный браузер Mozilla, то в нем пользователь также может использовать необходимое ему сочетание клавиш. В этом сервисе удобно то, что пользователь может выбрать несколько режимов:
- С учетом регистра;
- Подсветить все;
- Только слово целиком.
Это разные режимы, которые выдают отличные друг от друга значения. Таким образом пользователь может как и использовать только тот текст, который он ввел, а может использовать и отыскать однокоренные выражение. Такое важно при помощи сочетания горячий клавиш Ctrl +F. Как видно, у каждого браузера свои горячие клавиши, поэтому дополнительные значения стоит смотреть на официальных источниках.
В Safari
Сафари – это браузер, который не встретить на обычном Виндовс, потому что этот поисковик приспособлен для устройств от компании Apple. У Эппл совершенно другие клавиши для поиска, поэтому неприспособленному пользователю будет сложно перестроиться с одной операционной системы на другую.
Несмотря на это, пользователю необходимо применить сочетание клавиш CMD + F, после чего браузер откроет необходимое окно для поиска. Человеку остается только ввести слово, чтобы отыскать его на страничке браузера.
Как включить поиск по словам в браузере через меню
Второй способ – использование мышки, а также дополнительных кнопок в браузере. Этот способ подойдет тем, кто не может запомнить сочетания, поэтому работа с меню поисковика для него легче. Для того, чтобы включить поиск по словам, нужно:
- Если рассматривать самый примитивный браузер, а именно Гугл, то пользователю для начала необходимо кликнуть на три точки, который располагаются в правом верхнем углу;
- После этого стоит найти пункт, который называется «Найти». Тапаем на него;
- Пользователю откроется окно, в котором он может написать нужное для поиска слова.
Как видно, поиск через меню также возможен, если пользователь не может разобраться в клавишах.
Как найти слово на веб странице
wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали авторы-волонтеры.
Количество просмотров этой статьи: 38 902.
Практически в каждом веб-браузере есть инструмент «Найти», с помощью которого на веб-страницах можно искать слова или фразы. Также можно пользоваться операторами поисковой системы Google, чтобы искать слова или фразы на всех страницах определенного сайта. Операторами можно пользоваться вместе с инструментом «Найти», чтобы найти слово на любом сайте.
Организация поиска по веб-странице на 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()
Тут все просто: метод innerHTML возвращает html код объекта. В данном случае мы просто заменяем текущий body на оригинальный, который мы сохранили при загрузке всей страницы.
Двигаемся дальше. Даем значения основным переменным.
Итак, на данном этапе у нас уже есть основные переменные и значения. Теперь надо придать нужным участкам кода стили с выделенным фоном. Т.е. проверка выбранного текста на регулярное выражение (по сути мы выбранный регулярным выражением текст снова парсим регулярным выражением). Для этого надо из введенного текста сделать регулярное выражение (сделали), а затем выполнить метод, переданный в виде такста. Тут нам поможет метод eval().
В общем, после того, как мы заменим текст и получим результат со стилями, надо текущий html заменить на полученный. Делаем.
По сути все готово, и скрипт уже работает. Но добавим еще пару деталей для красоты.
1) Обрежем пробелы у текста, который вводит пользователь. Вставляем этот код:
После этой строки:
2) Сделаем проверку на совпадения (если совпадений не найдено — сообщим об этом). Этот код вставляем внутрь функции function FindOnPageGo() после переменных.
Посмотреть исходник можно тут.
Скачать исходник можно тут.
Теперь все. Конечно, можно добавить скролл к первому найденному результату, живой поиск ajax, да и вообще улучшать можно бесконечно. Сейчас это довольно примитивный поиск по сайту. Целью статьи было помочь новичкам, если возникет такой же вопрос как у меня. Ведь простого готового решения я не нашел.
P.S.: для корректной работы необходимо убрать переносы текста в html документе в тех местах, где есть обычный текст между тегами.
Это не принципиально, можно от этих переносов избаляться автоматически на сервисе, но может подскажете заодно, как это пофиксить, если поймете раньше меня.
Также, если кто писал подобное, но с живым поиском, поделитесь исходником, будет интересно разобрать.
Буду рад выслушать конструкнтиную критику, мнения, может, рекомендации.
На днях дописал немного код, сделал живой поиск по странице. Так, что вопрос снят. Код HTML не менялся. JS можете посмотреть тут.
Поиск ведется по тегам с классом «place_for_live_search». Так что для того, чтоб алгоритм парсил нужный контент, добавляем класс и готово.