Как добавить найти на странице

«Будем искать»

Что делаем: добавляем поиск Яндекса на свой сайт, чтобы посетители могли найти на сайте что-нибудь эдакое (например, такое же, но с перламутровыми пуговицами). Получится, что вся поисковая мощь Яндекса будет служить вашим личным целям.

Время: 5 минут.

Понадобится: аккаунт в Яндексе.

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

Регистрируемся в сервисе

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

Заполняем данные о сайте

После регистрации в сервисе перед нами появляется первый этап настройки — нужно ввести название поиска, подсказку в строке ввода и сайты, где Яндекс будет всё искать:

Чтобы добавить сайт, нажимаем кнопку «Добавить сайты и исключения» и вводим название своего сайта. В нашем случае мы будем добавлять поиск на нашу учебную страницу про Михаила Максимова:

Когда это будет сделано, переходим к следующему шагу.

Настраиваем внешний вид строки поиска

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

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

Когда Яндекс закончит поиск на сайте, ему нужно будет где-то показать всё, что он нашёл. Есть два варианта — показать результаты в виде привычного Яндекс-поиска или встроить выдачу в дизайн сайта, показав их на отдельной странице.

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

Проверка работы

На этом этапе Яндекс предлагает увидеть, как всё будет работать. Для проверки введём слово «фото» и посмотрим, что получится:

Фотокарусель найдена — значит, поиск работает. Возвращаемся назад и нажимаем на кнопку «Далее к шагу 5».

Копируем код для вставки

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

Мы добавим его в самое начало нашей страницы mihailmaximov.ru, но вы можете добавить этот код куда угодно:

Посмотреть на работу поиска на странице проекта.

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

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

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

Internet Explorer

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

Google Chrome

Зная комбинацию клавиш, можно осуществить быстрый поиск текста в браузере на странице.  Это актуально для всех веб-проводников, в том числе Google Chrome. Чтобы найти какую-либо информацию на страничке, необходимо нажать комбинацию клавиш Ctrl+F.

Mozilla Firefox

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

Opera

Теперь рассмотрим особенности поиска на странице в браузере Опера (сочетание клавиш). Для нахождения нужной информации необходимо нажать на Ctrl+F. Чтобы найти следующее значение, используется комбинация клавиш Ctrl+G, а предыдущее — Ctrl+Shift+G.

Yandex

Для поиска какой-либо информации через браузер Яндекс, необходимо нажать комбинацию клавиш Ctrl+F. После этого появляется окно, с помощью которого осуществляется поиск слова или фразы. При вводе система находит все слова с одинаковым или похожим корнем. Чтобы увидеть точные совпадения по запросу, нужно поставить отметку в поле «Точное совпадение».

Safari

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

Промежуточный вывод

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

Как найти слова или фразы через настройки в разных браузерах?

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

Google Chrome

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

• откройте Гугл Хром;
• жмите значок Еще (три точки справа вверху);
• выберите раздел Найти;

• введите запрос и жмите на Ввод;
• совпадения отображаются желтой заливкой (в случае прокрутки страницы эта особенность сохраняется).

Если нужно в браузере открыть строку поиска, найти картинку или фразу, сделайте такие шаги:

• откройте веб-проводник;
• выделите фразу, слово или картинку;
• жмите на выделенную область правой кнопкой мышки;
• осуществите поиск по умолчанию (выберите Найти в Гугл или Найти это изображение).

Применение этих инструментов позволяет быстро отыскать требуемые сведения.

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

Mozilla Firefox

Чтобы в браузере найти слово или фразу, можно задействовать комбинацию клавиш (об этом упоминалось выше) или использовать функционал меню. Для поиска текста сделайте следующее:

• жмите на три горизонтальные полоски;
• кликните на ссылку Найти на этой странице;
• введите поисковую фразу в появившееся поле (система сразу подсвечивает искомые варианты);
• выберите одно из доступных действий — Х (Закрыть поисковую панель), Следующее или Предыдущее (стрелки), Подсветить все (указываются интересующие вхождения), С учетом регистра (поиск становится чувствительным к регистру) или Только слова целиком (указывается те варианты, которые полностью соответствуют заданным).

Если браузер не находит ни одного варианта, он выдает ответ Фраза не найдена.

Выше мы рассмотрели, как найти нужный текст на странице в браузере Mozilla Firefox. Но бывают ситуации, когда требуется отыскать только ссылку на странице. В таком случае сделайте следующее:

1. наберите символ одиночной кавычки, которая открывает панель быстрого поиска ссылок;
2. укажите нужную фразу в поле Быстрый поиск (выбирается первая ссылка, содержащая нужную фразу);
3. жмите комбинацию клавиш Ctrl+G для подсветки очередной ссылки с поисковой фразы.

Чтобы закрыть указанную панель, выждите некоторое время, а после жмите на кнопку Esc на клавиатуре или жмите на любое место в браузере.

Возможности Firefox позволяют осуществлять поиск на странице в браузере по мере набора фразы. Здесь комбинация клавиш не предусмотрена, но можно использовать внутренние возможности веб-проводника. Для начала нужно включить эту функцию. Сделайте следующее:

• жмите на три горизонтальные полоски и выберите Настройки;
• войдите в панель Общие;
• перейдите к Просмотру сайтов;
• поставьте отметку в поле Искать текст на странице по мере набора;
• закройте страничку.

Теперь рассмотрим, как искать в браузере по словам в процессе ввода. Для этого:

1. наберите поисковую фразу при просмотре сайта;
2. обратите внимание, что первое совпадение выделится;
3. жмите Ctrl+G для получения следующего совпадения.

Закрытие строки поиска происходит по рассмотренному выше принципу — путем нажатия F3 или комбинации клавиш Ctrl+G.

Opera

Если нужно что-то найти на странице, которая открыта в Опере, можно воспользоваться комбинацией клавиш или кликнуть на значок «О» слева вверху. Во втором случае появится список разделов, в котором необходимо выбрать Найти. Появится поле, куда нужно ввести слово или фразу для поиска. По мере ввода система сразу осуществляет поиск, показывает число совпадений и подсвечивает их. Для перемещения между выявленными словами необходимо нажимать стрелочки влево или вправо.

Yandex

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

• жмите на три горизонтальные полоски;
• войдите в раздел Дополнительно;
• выберите Найти.

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

• жмите на три горизонтальные полоски;
• войдите в Настройки;

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

Safari

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

Итоги

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

Отличного Вам дня!

Недавно мы говорили о библиотеках и фреймворках — и обещали, что попробуем что-нибудь на них собрать. Настало время.

Сегодня мы возьмём популярную библиотеку jQuery и сделаем на её основе поиск по странице. Браузеры это умеют делать встроенными инструментами, но с помощью нашего метода можно будет более тонко всё настроить и сделать поле поиска видимым и удобным.

Нам понадобятся:

Общая идея

У нас есть сайт с неким текстом, и нам нужно быстро находить в нём нужные слова или части слов. Для этого мы в самом начале страницы делаем поле ввода, куда будем писать наши слова для поиска, и кнопку, которая этот поиск запускает.

Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит — пишет сообщение о том, что таких слов в тексте нет.

Готовим каркас

Сделаем как обычно — возьмём наш стандартный шаблон из предыдущих задач и немного поправим описания разделов. Сохраним его как .html-файл и открывать в браузере пока не будем — всё равно мы ничего не увидим на странице, кроме названия вкладки.

<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Поиск на странице</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
  </style>
  <!-- закрываем служебную часть страницы -->
</head>
<!-- началось содержимое страницы -->

<body>
  <!-- пишем скрипт, который поможет нам с поиском -->
  <script>
  </script>
  <!-- Здесь будет текст, в котором нам нужно что-то найти -->
  <!-- закончилось содержимое страницы -->
</body>
<!-- конец всего HTML-документа -->

</html>

Добавляем форму поиска и текст

Наша форма поиска — это поле ввода и кнопка, которая запускает скрипт. Мы не будем сильно настраивать внешний вид формы, при желании вы можете сделать это сами — все нужные знания для этого у вас уже есть. Если что-то забыли — посмотрите, как мы настраивали вид поля ввода в статье про планировщик задач.

Добавим код формы сразу после тега <body>:

<!-- говорим браузеру, что мы хотим разместить форму -->
<form id="search-highlight" method="post" action="#">
  <!-- добавляем текстовое поле ввода, где будем писать наш поисковый запрос -->
  <input type="text" name="term" id="term" />
  <!-- добавляем кнопку, которая запускает поиск -->
  <input type="submit" name="submit" id="submit" value="Найти" />
  <!-- конец формы -->
</form>
<!-- сразу после формы будем писать, сколько совпадений мы нашли -->
<p class="results"></p>
<!-- а в этом блоке разместим наш основной текст -->
<div class="content">
  Сюда вставим наш текст
</div>

Осталось добавить сам текст в блок <div class="content">. Для простоты мы скопируем первые абзацы этой статьи и обернём их в HTML-теги. Вы можете вставить какой угодно текст, на работу скрипта это никак не повлияет.

<h2>Общая идея</h2>

<p>

У нас есть сайт с неким текстом, и нам нужно быстро находить в нём нужные слова или части слов. Для этого мы в самом начале страницы делаем поле ввода, куда будем писать наши слова для поиска, и кнопку, которая этот поиск запускает.

</p>

<p>

Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит — пишет сообщение, что таких слов в тексте нет.

</p>

Сохраняем, открываем в браузере:

Настраиваем стили

Стили отвечают за внешний вид всех элементов на странице. Главное, что нам нужно сделать, — нормальный внешний вид формы поиска и выбрать подсветку для найденных результатов. Это мы настроим в блоке <style> в начале страницы:

/*поле ввода*/
.searchtext {
  font-size: 16px;
  font-weight: bold;
  height: 27px;
  padding: 0 6px 0;
  width: 250px;
  /*делаем стильную границу вокруг поля*/
  border: 1px solid rgba(0, 0, 0, 0.1);
}
/* выбираем цвет подсветки — светло-зелёный*/
.highlight {
  background: #4cff00;
}
/*кнопка поиска*/
.search-button {
  background-color: #0b2f3f;
  font-weight: bold;
  font-size: 12px;
  /*устанавливаем высоту кнопки*/
  height: 28px;
  margin: 0;
  color: #ffffff;
  padding: 6px;
  /*тоже делаем стильную границу у кнопки*/
  border: 1px solid rgba(0, 0, 0, 0.1);
}

Сохраняем и обновляем страницу — теперь форма выглядит лучше:

Пишем скрипт

Задача скрипта — пробежаться по всему содержимому текста и сравнить все слова с тем, что мы ввели в строке поиска. Всю работу за нас сделает плагин highlight, нам остаётся только вывести количество найденных совпадений и очистить страницу от предыдущих результатов поиска.

<!-- подключаем библиотеку jQuery -->
<script src="http://thecode.local/wp-content/uploads/2019/06/jquery.js" type="text/javascript"></script>
<!--подключаем к ней плагин highlight.js -->
<script src='http://thecode.local/wp-content/uploads/2019/06/jqueryhighlight.js' />
</script>
<!-- говорим браузеру, что сейчас начнётся скрипт -->
<script type="text/javascript">
  $(document).ready(function () {
    // обрабатываем нажатие на кнопку
    $("#submit").click(function () {
      // очищаем переменную, в которой будет наш поисковый запрос
      var term = "";
      // и переменную, которая отвечает за количество найденных совпадений
      var n = "0";
      // убираем всю подсветку из прошлого поиска, если она была
      $('body').removeHighlight();
      // скрываем блок с текстом о количестве найденных результатов
      $("p.results").hide().empty();
      // с помощью магии jQuery берём текст из строки поиска и кладём его в переменную term
      term = $('#term').attr('value');
      // если строка поиска пустая — выводим сообщение
      if ($('#term').val() == "") {
        $("p.results").fadeIn().append("Вы ничего не ввели :(");
        return false;
        // иначе, если в строке поиска что-то было…
      } else {
        // в блоке content, где у нас находится весь текст, плагином подсвечиваем все найденные совпадения (если совпадений не будет — не будет и подсветки)
        $('.content').highlight(term);
        // берём количество совпадений
        n = $("span.highlight").length;
        // если совпадений нет — в разделе results пишем, что ничего не нашли
        if (n == 0) {
          $("p.results").fadeIn().append("Ничего такого в тексте нет");
          // иначе в том же разделе пишем число совпадений  
        } else {
          $("p.results").fadeIn().append('Найдено совпадений:' + n);
        }
        return false;
      }
    });
  });

Вставляем скрипт в HTML-файл, сохраняем и смотрим, что получилось в итоге:

А вот как всё будет работать: 

Общий код страницы

<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Поиск на странице</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
    /*поле ввода*/
    .searchtext {
      font-size: 16px;
      font-weight: bold;
      height: 27px;
      padding: 0 6px 0;
      width: 250px;
      /*делаем стильную границу вокруг поля*/
      border: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* выбираем цвет подсветки — светло-зелёный*/
    .highlight {
      background: #4CFF00;
    }

    /*кнопка поиска*/
    .search-button {
      background-color: #0B2F3F;
      font-weight: bold;
      font-size: 12px;
      /*устанавливаем высоту кнопки*/
      height: 28px;
      margin: 0;
      color: #ffffff;
      padding: 6px;
      /*тоже делаем стильную границу у кнопки*/
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  </style>
  <!-- закрываем служебную часть страницы -->
</head>
<!-- началось содержимое страницы -->

<body>
  <!-- говорим браузеру, что мы хотим разместить форму -->
  <form id="search-highlight" method="post" action="#">
    <!-- добавляем текстовое поле ввода, где будем писать наш поисковый запрос -->
    <input type="text" name="term" id="term" class="searchtext" />
    <!-- добавляем кнопку, которая запускает поиск -->
    <input type="submit" name="submit" id="submit" value="Найти" class="search-button" />
    <!-- конец формы -->
  </form>
  <!-- подключаем библиотеку jQuery -->
  <script src="http://thecode.local/wp-content/uploads/2019/06/jquery.js" type="text/javascript"></script>
  <!-- подключаем к ней плагин highlight.js -->
  <script src='http://thecode.local/wp-content/uploads/2019/06/jqueryhighlight.js' />
  </script>
  <!-- говорим браузеру, что сейчас начнётся скрипт -->
  <script type="text/javascript">
    $(document).ready(function () {
      // обрабатываем нажатие на кнопку
      $("#submit").click(function () {
        // очищаем переменную, в которой будет наш поисковый запрос
        var term = "";
        // и переменную, которая отвечает за количество найденных совпадений
        var n = "0";
        // убираем всю подсветку из прошлого поиска, если она была
        $('body').removeHighlight();
        // скрываем блок с текстом о количестве найденных результатов
        $("p.results").hide().empty();
        // с помощью магии jQuery берём текст из строки поиска и кладём его в переменную term
        term = $('#term').attr('value');
        // если строка поиска пустая — выводим сообщение
        if ($('#term').val() == "") {
          $("p.results").fadeIn().append("Вы ничего не ввели :(");
          return false;
          // иначе, если в строке поиска что-то было…
        } else {
          // в блоке content, где у нас находится весь текст, плагином подсвечиваем все найденные совпадения (если совпадений не будет — не будет и подсветки)
          $('.content').highlight(term);
          // берём количество совпадений
          n = $("span.highlight").length;
          // если совпадений нет — в разделе results пишем, что ничего не нашли
          if (n == 0) {
            $("p.results").fadeIn().append("Ничего такого в тексте нет");
            // иначе в том же разделе пишем число совпадений  
          } else {
            $("p.results").fadeIn().append('Найдено совпадений:' + n);
          }
          return false;
        }
      });
    });
  </script>
  <!-- сразу после формы будем писать, сколько совпадений мы нашли -->
  <p class="results"></p>
  <!-- а в этом блоке разместим наш основной текст -->
  <div class="content">
    <p>
      Чтобы лучше понять, как работают библиотеки и плагины в веб-программировании, давайте с их помощью сделаем удобный
      поиск по странице. Мы знаем, что современные браузеры тоже умеют это делать, но мы сделаем свою версию, которая
      работает не хуже, чем в Хроме или Сафари.
    <p>
    <h2>Общая идея</h2>
    <p>
      У нас есть сайт с неким текстом, и нам нужно быстро находить в нём нужные слова или части слов. Для этого мы в
      самом начале страницы делаем поле ввода, куда будем писать наши слова для поиска, и кнопку, которая этот поиск
      запускает.
    </p>
    <p>
      Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит —
      пишет сообщение о том, что таких слов в тексте нет.
    </p>
  </div>
  <!-- закончилось содержимое страницы -->
</body>
<!-- конец всего HTML-документа -->

</html>

Как можно улучшить

Можно убрать кнопку «Найти» и запускать поиск при вводе текста в поле.

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

Регулярные выражения! О них отдельно напишем, это же просто праздник какой-то.