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

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

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


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

    language: HTML
      
  

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

<h2>Общая идея</h2><p>У нас есть сайт с неким текстом, и нам нужно быстро находить в нём нужные слова или части слов. Для этого мы в самом начале страницы делаем поле ввода, куда будем писать наши слова для поиска, и кнопку, которая этот поиск запускает.</p><p>Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит — пишет сообщение, что таких слов в тексте нет.</p>

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

Как работает форма поиска на сайте

Самый простой HTML-код

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

<form>
  <input type="search" name="text">
  <input type="submit" value="Найти">
</form>

Но в целях увеличения скорости загрузки документа, скрипт, обрабатывающий запрос, как правило, помещают только на одну страницу сайта, на которую будет сделан переход, если её адрес прописать в атрибуте : «».

<form action="http://shpargalkablog.ru/search/">
  <input type="search" name="text">
  <input type="submit" value="Найти">
</form>

Для работы скрипта могут понадобиться дополнительные параметры, которые указываются в . Это поле не отображается. Теперь форма будет вызывать «».

<form action="http://shpargalkablog.ru/search/">
  <input type="hidden" name="searchid" value="808327">
  <input type="search" name="text">
  <input type="submit" value="Найти">
</form>

Результат работы формы открыть в новой вкладке с помощью

<form action="http://shpargalkablog.ru/search/" target="_blank">
  <input type="hidden" name="searchid" value="808327">
  <input type="search" name="text">
  <input type="submit" value="Найти">
</form>

Где взять скрипт поиска по сайту

Можно воспользоваться

  • предложенным специальными сервисами Яндекса и ,
  • встроенным в используемую CMS (при наличии), например, на Blogger на «», где «» заменить на свой адрес блога,
  • разработанным самостоятельно, например, на PHP.

Самый простой вариант — перенаправить запрос Google:

<form action="http://google.com/search" target="_blank">
  <input type="search" name="q">
  <input type="hidden" name="as_sitesearch" value="shpargalkablog.ru">  
  <input type="submit" value="Найти">
</form>

На компьютере

Сначала разберемся с Яндексом на ПК. На компьютерной версии браузера, изменение поисковой системы происходит следующим образом:

  1. Откроем главную страницу яндекс браузера. В правой верхней части экрана найдем значок в виде трех горизонтальных линий.
  2. Кликаем левой кнопкой мыши по данному значку. В появившемся окошке находим пункт «Настройки» и жмем на него.
  3. Откроется окно со всеми настройками Яндекс браузера. Нам нужен раздел «Общие настройки», подпункт «Поиск».
  4. Найдем строчку «Настройки поисковой системы»
  5. Кликаем на данную графу левой кнопкой мыши. Нас перебросит на раздел, в котором можно изменить поисковую систему.

Сделать это можно двумя способами:

Первый метод: Найдем графу «Поисковая система по умолчанию». И ниже от неё будет написано «Яндекс», кликаем на значок в виде стрелочки вниз.

После этого выдвинется окно, в котором можно будет установить поисковую систему Google, Mail, Википедия и другие. Выбираем Гугл.

Это был первый метод по смене поисковой системы. Теперь второй:

  1. Ниже есть строчка «Другие поисковые системы» и дальше представлен возможный выбор. Наводим курсором мыши на любую строчку с поисковой системой. Появилась графа «Использовать по умолчанию». Кликаем на неё левой кнопкой мыши.
  2. После того, как мы воспользовались одним из двух методов, раздел «поисковая система по умолчанию» будет иметь следующий вид.
  3. Теперь закрываем данную страницу. Откроем главную страницу Яндекса и попробуем что-нибудь найти. Например, сделаем запрос «Котята».
  4. Все получилось! Теперь наши запросы будут находиться через поисковую систему Google.

Значок лупы

Неактивная

<form action="/search/" target="_blank">
  <input type="hidden" name="searchid" value="808327">
  <input type="search" name="text" required placeholder="Поиск по сайту" style="
padding: 5px 2px 5px 25px;
background: url('http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s25/search.png') no-repeat scroll 0 50%;
">
</form>

Кликабельная кнопка-иконка

<style>
.form-search {
  display: inline-block;
  border-bottom: 1px solid;
}
.form-search input {
  all: unset;
}
</style>

<form action="/search/" target="_blank" class="form-search">
  <input type="hidden" name="searchid" value="808327">
  <input type="search" name="text" required placeholder="Поиск по сайту">
  <input type="submit" value="&#128269;">
</form>

Кликабельная картинка

<style>
.form-search {  
  position: relative;
  display: inline-block;
  border: 1px solid #747474;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;
  background-image: linear-gradient(#BCBCBC, #EBEBEB);
}
.form-search:before {  
  position: absolute;
  content: "";
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  z-index: -1;
  border-radius: 5px;
  background: linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
}
.form-search:focus-within {  
  box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
  background: linear-gradient(#9CC2CA, #DFECEF);
}
.form-search input {  
  width: 60px;
  height: 32px;
  line-height: 32px;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0 0 0 6px;
  background: transparent;
  font: 13px Helvetica, Arial, sans-serif;
  color: #6E7074;
  text-shadow: 0 1px 0 #FFF;
  transition: all .2s ease-out;
}
.form-search:focus-within input,  
.form-search input:focus {
  width: 160px;
  color: #25464D;
}
.form-search input {  
  padding: 0;
  vertical-align: bottom;
}
</style>

<form class="form-search" action="/search/" target="_blank">
  <input type="hidden" name="searchid" value="808327">
  <input type="search" name="text" required placeholder="поиск">
  <input type="image" src="http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png"/>  
</form>

Шаги

Метод 1 из 2: Как искать на открытой странице

  1. 1

    Нажмите Ctrl+F (в Windows) или ⌘ Command+F (в Mac OS X). В большинстве браузеров откроется поисковая строка. Также можно нажать «Правка» > «Найти» (в Internet Explorer) или «☰» > «Найти» (в Chrome и Firefox).

    • В мобильном браузере опция «Найти» находится в меню браузера. Эта опция может называться «Найти на странице».
    • Если вы пользуетесь Safari для iOS, удалите адрес, который находится в адресной строке, и введите в ней слово, которое нужно найти. В результатах поиска выберите «На этой странице». X Источник информации

  2. 2

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

  3. 3

    Переместитесь по найденным совпадениям. Для этого нажимайте кнопки «Следующее» или «Предыдущее» у строки поиска. Так вы переместитесь к следующему или предыдущему совпадению, которое будет выделено. X Источник информации

Метод 2 из 2: Как искать на сайте с помощью Google

  1. 1


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

  2. 2

    Введите site:адрес_сайта в поисковой строке Google. Этот оператор сообщает Google, что поиск будет осуществлен только на страницах указанного сайта.

  3. 3

    Введите слово или фразу, которую вы хотите найти, после адреса сайта. Можно ввести одно слово или фразу. Чтобы Google искал точное слово (или фразу), заключите его в кавычки. X Источник информации

    Чтобы найти слово «банан» на любой странице сайта ru.wikihow.com, введите site:ru.wikihow.com банан. Чтобы найти точную фразу «есть банан» на любой странице сайта ru.wikihow.com, введите site:ru.wikihow.com «есть банан».

  4. 4

    Перейдите на страницу из результатов поиска и воспользуйтесь инструментом «Найти».

    Про инструмент «Найти» можно узнать в первом разделе этой статьи.

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

Строка поиска

имя ключа параметра. Для поля поиска чаще всего применяется «q» или «text».
значение ключа параметра. Чаще всего не задаётся. Пользователь может его изменить на свой текст, если не указаны атрибуты и .
заблокировано изменение пользователем
заблокированы доступ, изменение пользователем и передача данных текущего параметра
поле не может быть пустым
шаблон ввода как в регулярных выражениях JS, следование которому необходимо для отправки формы
минимальное количество символов, необходимое для отправки формы
максимальное количество символов, которое может набрать пользователь
длина поля в символах
подсказка-заглушка
всплывающая подсказка при наведении курсора мышки
автозаполнение. Современные браузеры показывают ранее введённые поисковые запросы на текущем домене. Можно его отключить или сделать более конкретизированным.
список рекомендованных запросов
проверяется орфография и грамматика
фокус поля (то есть период между щелчком по элементу и щелчком вне элемента) получен при загрузке документа

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

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

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», «Mail.ru» или «Википедия» (либо другие, в разных браузерах приведены различные поисковые системы). Первые три — стандартные поисковые системы общего характера, но Википедия — справочный поискових, ищет не сайты, а информацию и описание. То есть вводя в «умную строку» не адрес сайта, а то, что Вы хотите найти, поиск будет производиться именно в выбранной системе поиска. Допустим, выбрав википедию, будет проходить поиск по википедии.

Вторая кнопка — настройка поисковых систем. Здесь можно задать значение выбора, если Вы пользуетесь разными поисковыми системами. То есть, если у Вас задана основная поисковая система — Яндекс, а необходимо искать в Google, то не надо открывать страницу Google. Достаточно задать значение поисковика, ну пусть это будет «г» (для краткости) и после этого, если ввести в умную строку «г» и поставить пробел, то автоматически поиск будет вестись в поисковике Google (но если после буквы «г» не пробел, то поиск ведется в поисковике, установленном по умолчанию).

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

В третьем разделе находится адрес, куда отправляется поисковой запрос, там лучше ничего не менять. Рядом с адресом находится кнопка «Использовать по умолчанию», то есть установить поисковик, через который будет идти поиск в умной строке (то же, что и первая кнопка в этом разделе). Справа находится крестик для удаления поисковой системы, если Вы ею никогда не собираетесь пользоваться. После изменений необходимо нажать кнопку «готово», иначе изменения не сохранятся.

В появившемся окне меняем или оставляем название «youtube.com», ключевое слово необходимо изменить, чтобы справа появился зеленый значок в виде галочки. Я изменил на «ютуб», можно вводить как русские, так и латинские буквы и цифры. В поле «ссылка» ничего изменять нельзя! И нажимаем кнопку «ок».

Теперь поисковик добавлен в Ваши поисковые системы, это можно увидеть в настройках — кнопка «настройка поисковых систем».

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

и нажимаем пробел.

Система сразу указала, что поиск будет производиться в youtube, соответственно все работает.

poisk-v-seti.ru

Добавляем сайт в поисковую систему Яндекса

Добавить сайт в Вебмастере несложно, просто нажмите «Начать работу» и выберите на открывшейся странице «Добавить сайт».

Затем введите url (адрес) своего сайта, например, fireseo.ru

Вам интересны интернет-маркетинг и продвижение бизнеса в интернете? Подписывайтесь на наш Telegram-канал!


Вторым шагом станет «Подтверждение прав на сайт». Яндекс. Вебмастер сам предложит вам 4 варианта подтверждения прав на ваш ресурс, среди которых:

  • Мета-тег на главной странице: необходимо добавить в HTML-код главной страницы сайта (в элемент head) специальный мета-тег.
  • HTML-файл в корневом каталоге: необходимо создать HTML-файл с заданным уникальным именем и содержимым, и разместить его в корневом каталоге сайта.
  • TXT-запись в DNS: необходимо добавить в DNS записи сайта запись типа TXT, содержащую указанное уникальное значение.
  • Электронный адрес из данных WHOIS: необходимо подтвердить электронный адрес, указанный в WHOIS на странице Адреса электронной почты.

Используйте этот способ, если ваш сайт является доменом второго уровня и находится не в доменной зоне RU или РФ. Рекомендуем вам самый простой способ решить ситуацию – добавить мета-тег. Это можно сделать самостоятельно через FTP. Также несложным будет и 4 вариант подтверждения прав на ресурс – добавьте лишь запись о почте в whols! Теперь вы знаете,что нужно сделать , чтобы сайт попал в поисковик Яндекс и,если сделали все согласно инструкциям, теперь вам доступна вся общая информация по сайту. Подождите окончания процедуры проверки прав, которая занимает обычно несколько секунд, и приступайте к полноценной работе с массой полезных инструментов Вебмастера.

Далее зайдите в раздел “Переобход страниц” Яндекс. Вебмастера и добавьте адреса основных страниц сайта. Вот здесь:

Если сайт сложнее, чем лендинг, с особым вниманием поработайте в Вебмастере над файлом robots.txt, который содержит параметры индексирования сайта для роботов поисковых систем. Создайте файл, заполните его в соответствии с требованиями (в Вебмастере есть хорошее видео на эту тему), проверьте файл в сервисе Яндекс

Вебмастер и загрузите его в корневую директорию сайта. А поможет вам вот это видео.

Итак, если у вас на сайте больше 1 страницы, то рекомендуем вам для более быстрой индексации остальные страницы также добавить в Переобход страниц Яндекс Вебмастера.

Но, помните! Существует дневной лимит по добавлению адресов. В день можно увеличить количество таких страниц не более 10. Вместе с тем, вы можете воспользоваться созданием и настройкой файла Sitemap, который будет содержать информацию о страницах сайта, подлежащих индексированию. В Яндекс. Вебмастер представлена подробная информация и инструкции к работе с этим . Ознакомиться с ней можно .

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

Заполните форму с указанием названия, адреса, контактных данных и вида деятельности вашей организации. Несколько несложных манипуляций, и вас легко найдут! Особенно, если будут искать по локальному признаку, например “парикмахерская в Перово”. Поздравляем! Теперь Ваш сайт найдут все пользователи в поисковике Яндекс!

Об этой статье

wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали авторы-волонтеры. Количество просмотров этой статьи: 22 807.

Категории: Интернет

English:Search for a Word on a Webpage

Español:buscar una palabra en una página web

Italiano:Cercare una Parola in una Pagina Web

Português:Pesquisar uma Palavra numa Página da Internet

Deutsch:Ein bestimmtes Wort auf einer Webseite suchen

中文:在某个网页上查找一个词

Français:rechercher un mot sur une page web

Bahasa Indonesia:Mencari Kata di Halaman Web

Nederlands:Zoeken naar een woord op een webpagina

ไทย:ค้นหาคำบนหน้าเว็บ

Tiếng Việt:Tìm kiếm một từ trên trang web

العربية:البحث عن كلمة في صفحة ويب

한국어:웹페이지에서 단어 검색하는 방법

日本語:ウェブページ内の単語を検索する

Türkçe:Web Sayfasında Bir Kelime Nasıl Aranır

हिन्दी:वैब पेज पर किसी शब्द (Word) को ढूंढें

Печать

Поиск на компьютере

Для использования встроенного в браузер поискового механизма, повторите следующее:

  1. Запустите Chrome и откройте необходимый сайт.
  2. Нажмите на значок опций в правом верхнем углу экрана, выберите строку Найти.
  3. В правом углу экрана появится поле для ввода запроса. Внесите туда запрос и нажмите клавишу ввода.
  4. Совпадения в тексте будут выделены желтым. Также желтым цветом будут обозначены области, где находятся найденные фразы, в области прокрутки.

Искать можно целые предложения и даже абзацы текста.

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

  1. Откройте веб-страницу и выделите мышкой необходимую фразу или изображение.
  2. Кликните по выделенной области правой кнопкой мыши, если у вас Windows, или левой кнопкой мыши с кнопкой Ctrl, если у вас MacOS.
  3. В списке опций выпадающего списка выберите строку “Найти в Google”.

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


С этим читают