Как открыть поиск по словам. Быстрый поиск слов на странице браузера. Использование панели поиска

01.09.2023

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

Панели поиска в браузерах

В каждом браузере есть своя панель поиска. Чтобы вызвать ее, следует нажать Ctrl+F. Рассмотрим панели поиска таких браузеров как Хром, Firefox и Яндекс Браузер.

Поиск текста в Google Chrome

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

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

Поиск текста в Mozilla Firefox

В Firefox панель поиска более продвинутая и удобная. Обладает следующими опциями:

  • подсветить все;
  • с учетом регистра;
  • только слова целиком.


«Подсветить все», как вы догадались, позволяет увидеть все нужные слова в документе.

Функция «С учетом регистра» придает поиску чувствительность к большим и маленьким буквам. Например, если вы напечатали слово «нефть», то есть слово с маленькой буквы, то в качестве совпадений варианты «Нефть» или «НЕФТЬ» учитываться не будут.

Поиск при помощи опции «Только слова целиком» отсеивает слова со склонениями и окончаниями. Вобъем персидское слово «нефт», чтобы проверить результат.

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

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

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

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

Не зависимо от версии и названия браузера разработчиками была принята за стандарт единая комбинация клавиш для вызова окна ввода текста поиска на странице. Это последовательно зажатые кнопки на клавиатуре «CTRL» + «F» .

Кнопки CTRL + F на клавиатуре

Как только вы их нажмете, то в одном из углов экрана браузера отобразится окно для ввода нужного фрагмента текста.

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

После ввода нескольких букв браузер автоматически подсветит все совпадения на текущей странице.

Подсветка найденных фрагментов текста на странице браузера

Очень часто бывает так, что при поиске, ну например, определенной проблемы в автомобиле BMW E60, вы натыкаетесь на форум, состоящий из нескольких сот страниц по 20 сообщений на каждой. Вас интересует конкретная проблема — «металлический стук спереди». Чтобы не читать все страницы этого форума достаточно нажать сочетание клавиш «CTRL» + «F» и в поле ввода ввести «Металлический» или «Стук».

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

Данную комбинацию можно отнести к одной из наиболее популярных и востребованных после .

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


Лучший способ отблагодарить автора статьи- сделать репост к себе на страничку

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

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

Как найти слово на странице в браузере
В Опере (Opera), Гугл Хроме (Google Chrome), Мозилле (Mozilla Firefox) и Яндекс браузере и любом другом веб-обозревателе поиск слов на странице выполняется единым образом. Отличаться может только оформление окна поиска, его результатов и навигации по ним.

  1. Чтобы найти слово на открытой в браузере странице нажмите сочетание клавиш Ctrl + F на клавиатуре. В Mac OS необходимо нажимать + F .
  2. После нажатия должна появится панель поиска, которая в зависимости от браузера может располагаться в нижней или верхней частях окна. В строку поиска введите искомое ключевое слово.
  3. После завершения ввода все вхождения данного слова в текст документа на странице будут выделены характерным цветом.
  4. Если будет найдено несколько соответствий введенному ключевому слову, то можете перемещаться по ним с помощью кнопок, которые можно найти на панели поиска.
  5. Закрыть панель поиска можно нажатием на ее крестик, или с помощью клавиши Esc на клавиатуре.
На изображении ниже приведен фрагмент панели поиска в браузере Mozilla Firefox.


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

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

Многие посетители сайтов не знают о поиске по странице по нажатию Ctrl+F и ищут необходимый фрагмент глазами, просто пролистывая текст. Этот способ становится проблематичным, если на странице текста больше, чем три-четыре экрана. Для таких посетителей я решил реализовать поиск по странице с использованием jQuery.
Пример подобного поиска есть на сайте Конституции РФ , но там он работает как-то странно.

Предупреждение

Я не профессиональный программист, просьба не пинать за кривой код и возможное изобретение велосипеда.

HTML-форма

Первым делом разместим на странице HTML-код формы поиска. Форма включает два элемента - поле для ввода текста и DIV для вывода результатов поиска.

CSS

Задаём два стиля: первый - для выделения фрагмента, второй - для ссылки на первый фрагмент.
span.highlight { background-color: #C6D9DB; cursor: pointer; } span.splink { color: #0A5794; cursor: pointer; }

Настройка поиска

var minlen = 3; // минимальная длина слова var paddingtop = 30; // отступ сверху при прокрутке var scrollspeed = 200; // время прокрутки var keyint = 1000; // интервал между нажатиями клавиш

Подсветка фрагментов

Базовая функциональность - подсветка фрагментов в тексте. Делается это с помощью регулярных выражений.
function dosearch() { term = jQuery("#spterm").val(); jQuery("span.highlight").each(function(){ //удаляем старую подсветку jQuery(this).after(jQuery(this).html()).remove(); }); var t = ""; jQuery("div.entry-content").each(function(){ // в селекторе задаем область поиска jQuery(this).html(jQuery(this).html().replace(new RegExp(term, "ig"), "$&")); // выделяем найденные фрагменты n = jQuery("span.highlight").length; // количество найденных фрагментов console.log("n = "+n); if (n==0) jQuery("#spresult").html("Ничего не найдено"); else jQuery("#spresult").html("Результатов: "+n); }); } jQuery("#spterm").keyup(function(){ if (jQuery("#spterm").val()!=term) // проверяем, изменилась ли строка if (jQuery("#spterm").val().length>=minlen) { // проверяем длину строки dosearch(); // если все в порядке, приступаем к поиску } else jQuery("#spresult").html(" "); // если строка короткая, убираем текст из DIVа с результатом });

Переход между фрагментами

Мало просто выделить фрагменты, гораздо удобнее организовать быстрый переход между ними. Под формой размещаем ссылку перехода на первый найденный фрагмент. Чтобы не занимать место стрелками, клик на каждый фрагмент ведет к следующему. Клик на последний фрагмент возвращает пользователя к форме поиска.
if (n==0) jQuery("#spresult").html("Ничего не найдено"); else jQuery("#spresult").html("Результатов: "+n); if (n>1) // если больше одного фрагмента, то добавляем переход между ними { var i = 0; jQuery("span.highlight").each(function(i){ jQuery(this).attr("n", i++); // нумеруем фрагменты, более простого способа искать следующий элемент не нашел }); jQuery("span.highlight").not(":last").attr({title: "Нажмите, чтобы перейти к следующему фрагменту"}).click(function(){ // всем фрагментам, кроме последнего, добавляем подсказку jQuery("body,html").animate({scrollTop: jQuery("span.highlight:gt("+jQuery(this).attr("n")+"):first").offset().top-paddingtop}, scrollspeed); // переход к следующему фрагменту }); jQuery("span.highlight:last").attr({title: "Нажмите, чтобы вернуться к форме поиска"}).click(function(){ jQuery("body,html").animate({scrollTop: jQuery("#spterm").offset().top-paddingtop}, scrollspeed); // переход к форме поиска }); }

Задержка запуска поиска

Поиск в большом тексте и подсветка занимают несколько секунд, на которые страница зависает. При наборе длинного слова поиск производится после каждой введённой буквы.
jQuery("#spterm").keyup(function(){ var d1 = new Date(); time_keyup = d1.getTime(); if (jQuery("#spterm").val()!=term) // проверяем, изменилась ли строка if (jQuery("#spterm").val().length>=minlen) { // проверяем длину строки setTimeout(function(){ // ждем следующего нажатия var d2 = new Date(); time_search = d2.getTime(); if (time_search-time_keyup>=keyint) // проверяем интервал между нажатиями dosearch(); // если все в порядке, приступаем к поиску }, keyint); } else jQuery("#spresult").html(" "); // если строка короткая, убираем текст из DIVа с результатом });

Бонус

Добавим возможность создавать ссылки на любой текст на странице без использования . Достаточно создать ссылку на страницу и добавить #текст.
if (window.location.hash!="") // бонус { var t = window.location.hash.substr(1, 50); // вырезаем текст jQuery("#spterm").val(t).keyup(); // вставляем его в форму поиска jQuery("#spgo").click(); // переходим к первому фрагменту }

Весь код

jQuery(document).ready(function(){ var minlen = 3; // минимальная длина слова var paddingtop = 30; // отступ сверху при прокрутке var scrollspeed = 200; // время прокрутки var keyint = 1000; // интервал между нажатиями клавиш var term = ""; var n = 0; var time_keyup = 0; var time_search = 0; jQuery("body").delegate("#spgo", "click", function(){ jQuery("body,html").animate({scrollTop: jQuery("span.highlight:first").offset().top-paddingtop}, scrollspeed); // переход к первому фрагменту }); function dosearch() { term = jQuery("#spterm").val(); jQuery("span.highlight").each(function(){ //удаляем старую подсветку jQuery(this).after(jQuery(this).html()).remove(); }); var t = ""; jQuery("div#content").each(function(){ // в селекторе задаем область поиска jQuery(this).html(jQuery(this).html().replace(new RegExp(term, "ig"), "$&")); // выделяем найденные фрагменты n = jQuery("span.highlight").length; // количество найденных фрагментов console.log("n = "+n); if (n==0) jQuery("#spresult").html("Ничего не найдено"); else jQuery("#spresult").html("Результатов: "+n+". Перейти"); if (n>1) // если больше одного фрагмента, то добавляем переход между ними { var i = 0; jQuery("span.highlight").each(function(i){ jQuery(this).attr("n", i++); // нумеруем фрагменты, более простого способа искать следующий элемент не нашел }); jQuery("span.highlight").not(":last").attr({title: "Нажмите, чтобы перейти к следующему фрагменту"}).click(function(){ // всем фрагментам, кроме последнего, добавляем подсказку jQuery("body,html").animate({scrollTop: jQuery("span.highlight:gt("+jQuery(this).attr("n")+"):first").offset().top-paddingtop}, scrollspeed); // переход к следующему фрагменту }); jQuery("span.highlight:last").attr({title: "Нажмите, чтобы вернуться к форме поиска"}).click(function(){ jQuery("body,html").animate({scrollTop: jQuery("#spterm").offset().top-paddingtop}, scrollspeed); // переход к форме поиска }); } }); } jQuery("#spterm").keyup(function(){ var d1 = new Date(); time_keyup = d1.getTime(); if (jQuery("#spterm").val()!=term) // проверяем, изменилась ли строка if (jQuery("#spterm").val().length>=minlen) { // проверяем длину строки setTimeout(function(){ // ждем следующего нажатия var d2 = new Date(); time_search = d2.getTime(); if (time_search-time_keyup>=keyint) // проверяем интервал между нажатиями dosearch(); // если все в порядке, приступаем к поиску }, keyint); } else jQuery("#spresult").html(" "); // если строка короткая, убираем текст из DIVа с результатом }); if (window.location.hash!="") // бонус { var t = window.location.hash.substr(1, 50); // вырезаем текст jQuery("#spterm").val(t).keyup(); // вставляем его в форму поиска jQuery("#spgo").click(); // переходим к первому фрагменту } });

Недостатки

На больших страницах (примерно 60 кб текста) скрипт зависает на пару минут.

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

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

Нажав этим кнопки Вы вызовите стандартную для этого приложения форму поиска в тексте и на странице.

Причём комбинация клавиш поиска не зависит от версии программы или операционной системы — это общепринятый стандарт и от него практически никто не отходит!

Для того, чтобы найти что-то нужное через проводник Windows — необходимо воспользоваться несколько иной комбинацией клавиш для поиска — Win+F . Она относится к основным горячим клавишам Виндовс.

Для новичков поясню: — это специальная клавиша с логотипом Windows, расположенная в нижнем ряду кнопок клавиатуры компьютера. Она используется для вызова ряда функций Windows, в том числе и для поиска.