Что нажать для поиска на странице. Быстрый поиск слов на странице браузера. Переход между фрагментами

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

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

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

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


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

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

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

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

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

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

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

Многие посетители сайтов не знают о поиске по странице по нажатию 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 кб текста) скрипт зависает на пару минут.

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

Представляем вам новую версию Яндекс.Браузера. Наиболее интересные изменения в этой версии:

  • поиск по странице научился понимать морфологию русского языка - насколько нам известно, это первый браузер, который такой поиск поддерживает;
  • появились жесты для управления навигацией в браузере;
  • проводится эксперимент с объединением омнибокса и поисковой строки на странице поискового сервиса;
  • для закладок теперь можно включить отображение фавиконок.
Поиск по странице с учетом морфологии
Яндекс с 1997 года специализируется на понимании ваших поисковых запросов. Важную роль в этом играют наши алгоритмы , которые позволяют анализировать и учитывать для качественной поисковой выдачи морфологию русского языка. Было бы странно не использовать наши достижения в области морфологии в других продуктах. Возможно, вы уже слышали про программу Mystem , а теперь они нашли применение в Яндекс.Браузере.

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

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

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

Разумеется, вы можете искать и только точные соответствия вашему запросу. Для этого достаточно поставить галочку «Точное совпадение».

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

Жесты
Возможность управлять браузером при помощи жестов мыши известна достаточно давно. В одних браузерах это реализуется с помощью расширений, в других - встроено изначально. Начиная с этой версии Яндекс.Браузер поддерживает жесты «из коробки». Теперь такие часто выполняемые действия, как «вперед», «назад», открытие, закрытие, перезагрузка или восстановление вкладок, можно совершать быстрее.

При желании вы можете отключить жесты в настройках. Описание всех доступных жестов можно найти в справке .

Поисковость
Посетители нашего стенда на YaC 2013 уже могли заметить, что в тестовой версии Яндекс.Браузера на странице с поисковой выдачей Яндекса поисковая строка объединена с адресной. Как следствие, увеличился объем полезной информации на странице. В новой версии Браузера это реализовано в виде эксперимента (cейчас только под Windows), чтобы оценить, насколько удобно это будет для пользователя.

По умолчанию эта возможность отключена. Для того чтобы ее подключить, необходимо запустить Браузер с параметром:

  • --toolbar-experiment=1 , чтобы включить белую шапку на поисковой выдаче Яндекса;
  • --toolbar-experiment=2 , чтобы включить серую шапку на поисковой выдаче Яндекса.

Новый способ нумерации версий
Несколько слов о новом способе нумерации версий. Теперь номер содержит год и месяц выхода обновления: например, 13.10 означает, что версия вышла в октябре 2013 года. Подобный способ уже знаком многим по операционной системе Ubuntu. Это позволяет нам уйти от простого увеличения первого числа в номере версии в начале каждого цикла разработки (подобный способ нумерации принят у браузеров Chrome, Firefox, Opera). Кроме того, такой способ позволяет отказаться от субъективной оценки «значимости» обновления (как мы делали раньше).

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

Яндекс.Браузер постепенно обновится у всех пользователей, но если вы хотите скачать обновление уже сейчас, то зайдите на страницу «О браузере Yandex» в меню браузера и нажмите на кнопку «Обновить» (уже очень скоро появится у всех). Скачать также можно с

Представляем вам новую версию Яндекс.Браузера. Наиболее интересные изменения в этой версии:

  • поиск по странице научился понимать морфологию русского языка - насколько нам известно, это первый браузер, который такой поиск поддерживает;
  • появились жесты для управления навигацией в браузере;
  • проводится эксперимент с объединением омнибокса и поисковой строки на странице поискового сервиса;
  • для закладок теперь можно включить отображение фавиконок.
Поиск по странице с учетом морфологии
Яндекс с 1997 года специализируется на понимании ваших поисковых запросов. Важную роль в этом играют наши алгоритмы , которые позволяют анализировать и учитывать для качественной поисковой выдачи морфологию русского языка. Было бы странно не использовать наши достижения в области морфологии в других продуктах. Возможно, вы уже слышали про программу Mystem , а теперь они нашли применение в Яндекс.Браузере.

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

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

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

Разумеется, вы можете искать и только точные соответствия вашему запросу. Для этого достаточно поставить галочку «Точное совпадение».

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

Жесты
Возможность управлять браузером при помощи жестов мыши известна достаточно давно. В одних браузерах это реализуется с помощью расширений, в других - встроено изначально. Начиная с этой версии Яндекс.Браузер поддерживает жесты «из коробки». Теперь такие часто выполняемые действия, как «вперед», «назад», открытие, закрытие, перезагрузка или восстановление вкладок, можно совершать быстрее.

При желании вы можете отключить жесты в настройках. Описание всех доступных жестов можно найти в справке .

Поисковость
Посетители нашего стенда на YaC 2013 уже могли заметить, что в тестовой версии Яндекс.Браузера на странице с поисковой выдачей Яндекса поисковая строка объединена с адресной. Как следствие, увеличился объем полезной информации на странице. В новой версии Браузера это реализовано в виде эксперимента (cейчас только под Windows), чтобы оценить, насколько удобно это будет для пользователя.

По умолчанию эта возможность отключена. Для того чтобы ее подключить, необходимо запустить Браузер с параметром:

  • --toolbar-experiment=1 , чтобы включить белую шапку на поисковой выдаче Яндекса;
  • --toolbar-experiment=2 , чтобы включить серую шапку на поисковой выдаче Яндекса.

Новый способ нумерации версий
Несколько слов о новом способе нумерации версий. Теперь номер содержит год и месяц выхода обновления: например, 13.10 означает, что версия вышла в октябре 2013 года. Подобный способ уже знаком многим по операционной системе Ubuntu. Это позволяет нам уйти от простого увеличения первого числа в номере версии в начале каждого цикла разработки (подобный способ нумерации принят у браузеров Chrome, Firefox, Opera). Кроме того, такой способ позволяет отказаться от субъективной оценки «значимости» обновления (как мы делали раньше).

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

Яндекс.Браузер постепенно обновится у всех пользователей, но если вы хотите скачать обновление уже сейчас, то зайдите на страницу «О браузере Yandex» в меню браузера и нажмите на кнопку «Обновить» (уже очень скоро появится у всех). Скачать также можно с

error: Content is protected !!