Организация поиска по веб-странице на 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». Так что для того, чтоб алгоритм парсил нужный контент, добавляем класс и готово.
Как сделать поиск по сайту с помощью PHP и MySQL
Одна из самых популярных и необходимых функций на любом сайте – это поиск, реализованный с помощью специальной формы. Этот функционал позволяет посетителям быстро находить на сайте интересующий их контент.
Сегодня мы хотим рассказать, как сделать поиск по сайту с помощью специальной формы, которая будет опрашивать таблицы базы данных и выводить информацию о текущих руководителях на сайте. Вы научитесь создавать таблицы базы данных, которая будет содержать в себе информацию о текущем персонале.
Разрабатывать формы поиска при помощи PHP , а также познакомитесь с SQL ( Structured Query Language ) – специальным языком для сбора, записи и модификации информации, содержащейся в базах данных. Перед тем как начать, рекомендуем вам скачать файлы проекта .
Что вам понадобится
- Инструмент для работы с базами данных MySQL .
- Локальный или удаленный сервер с поддержкой PHP .
- Текстовый редактор.
Создаем базу данных
Если вы не совсем уверены, что сможете разобраться с базой данных на вашем хостинге, то свяжитесь с хостером для получения соответствующих инструкций или помощи. После того как база данных будет создана, вам нужно будет подключить ее, создать таблицу и записать в нее необходимые данные.
Самым популярным инструментом для управления MySQL является PHP My Admin , Этого инструмента будет достаточно для нашего сегодняшнего руководства.
Создание таблицы
Наша таблица должна быть создана в следующем формате:
| Column Name | Data Type | Length | Null or Not Null | Primary key? | Auto Increment |
| ID | INT | 1 | Not Null | Yes | Yes |
| FirstName | Varchar | 50 | Not Null | No | No |
| LastName | Varchar | 50 | Not Null | No | No |
| Varchar | 50 | Not Null | No | No | |
| PhoneNumber | Varchar | 15 | Not Null | No | No |
Таблица базы данных состоит из столбцов и строк, как в Excel . Первый столбец позволяет идентифицировать данные по имени. Далее идет колонка Data types ( тип данных ), которая указывает нам на тип данных, содержащихся в колонке. В поле Length ( Длина ) указывается максимальный объем памяти ( хранилища ) для столбца таблицы. Мы используем переменные, которые дают больше гибкости. Другими словами, если длина ФИО меньше 50 символов, то будет занята лишь часть отведенного места.
И среди данных персонала не может быть пустых значений ( null, empty ). Первая строка выделена желтым цветом, потому что столбец ID – наш основной ключ. Основной ключ в базе данных гарантирует, что каждая запись будет уникальной. К этой колонке также применен автоинкремент, а это значит, что каждой записи в нашей базе данных будет присваиваться уникальный номер автоматически.
Вносим представителей персонала в таблицу
Как только разберетесь с таблицей, начните заполнять ее данными. 6 записей вполне достаточно, чтобы закрепить в уме процедуру. Ниже предлагаю вам собственный пример:
| Column ID | FirstName | LastName | PhoneNumber | |
| 2 | Ryan | Butler | ryanbutler@domain.com | 417-854-8547 |
| 3 | Brent | Callahan | brentcallahan@domain.com | 417-854-6587 |
Разработка формы
Чтобы создать форму поиска по сайту через Google , откройте любой подходящий текстовый редактор. Я рекомендую воспользоваться бесплатным PSPad . Вы можете использовать любой текстовый редактор, где предусмотрена подсветка синтаксиса. Это в значительной степени облегчит процесс написания и отладки PHP-кода . Создавая страницу для формы поиска, не забудьте сохранить ее в формате .php , иначе PHP-код не будет обрабатываться должным образом. Как только сохраните документ, скопируйте в него следующую разметку:
Если вы знакомы с языком HTML , то тут вам все должно быть понятно как минимум до открывающего тега form . Внутри этого тега находится важнейший элемент всего кода – атрибут action . В качестве действия нашей формы мы указали название нашего файла, а затем применили к нему строку запроса “ go ”.
Проверка на соответствие критерию
Когда пользователь вводит имя или фамилию, а затем нажимает кнопку подтверждения, форма передает данные самой себе и добавляет в конце строку запроса “ go ”. На данном этапе мы проверяем наличие строки запроса go . Если результат положительный, выводим результаты поиска.
До вывода запрашиваемых результатов нам нужно перепроверить: (1) была ли подтверждена форма, (2) содержит ли строка запроса значение go, (3) был ли поисковой запрос введен в нижнем или верхнем регистре? Если ни одна из проверок не дает положительного результата ( true ), то от нас не требуется выполнять какие-либо действия.
Для начала добавим небольшой блок кода PHP поиск по сайту после закрывающего тега </form>:
Сначала мы открываем блок PHP-кода тегом ””.
Любой PHP-код внутри этой пары тегов будет исполняться сервером. Затем мы проверяем, была ли подтверждена форма:
Мы воспользуемся встроенной функцией isset , которая возвращает значение типа bool , и поместим в нее массив $_POST . Логическое выражение в программировании позволяет получить нам либо true , либо false .
Следовательно, если функция возвращает значение true , то форма была подтверждена, и нам нужно продолжить выполнение кода дальше. Если же функция возвращает значение false , то мы выведем сообщение об ошибке. Сохраните весь набранный код в файле search_submit.php .
Далее нам нужно проверить, имеется ли в строке запроса значение go :
Мы вкладываем еще одно условное логическое выражение внутрь основного, но только в этот раз мы используем массив $_GET вместе со значением “ go ”. Сохраните изменения в файле search_go.php .
Теперь нам нужно убедиться, что посетители могут вводить первую букву в строку запроса только в верхнем или только в нижнем регистре. Нам также нужно предусмотреть способ учета критериев поиска, введенных посетителем. Лучше всего проверять введенные посетителем данные с помощью регулярного выражения:
Мы вкладываем еще одно условное логическое выражение внутрь наших двух. На этот раз мы используем регулярное выражение для проверки ввода. Мы используем встроенную функцию preg_match с двумя параметрами: регулярное выражение, и поле формы, к которому должна применяться проверка.
В нашем случае, это будет поле « Имя » ( name ). Чтобы извлечь параметры поиска, указанные посетителем, мы создаем переменную $name, и привязываем к ней значение POST с названием поля из формы, которое будет использоваться в SQL-запросе . Сейчас мы реализовали: (1) отправку данных формы, (2) строка запроса включает значение go и (3) посетитель ввел либо заглавную, либо строчную первую букву. И все эти проверки происходят еще до внесения изменений в базу данных. Сохраните все изменения.
Результаты Connect, Select, Query и Return из таблицы базы данных
Чтобы получить данные из таблицы, сначала в скрипте поиска по сайту нужно подключиться к серверу. Для этого мы используем следующий код:
Мы создаем переменную $db , и привязываем ее к встроенной функции MySQL mysql_connect , которая принимает три параметра: сервер с базой данных ( localhost , если вы работаете локально ), логин и пароль.
После этого мы запускаем встроенную PHP-функцию die , которая останавливает дальнейшее выполнение кода, если нет соединения с базой данных. И выводим информацию об ошибке, запуская встроенную функцию MySQL mysql_error , которая вернет причину ошибки. Сохраните файл search_connectdb.php .
Далее при помощи представленного ниже кода, мы выбираем, какую базу данных использовать:
Создаем переменную под названием mydb и привязываем ее ко встроенной MySQL-функции mysql_select_db , а затем указываем название базы данных, которую создали ранее. Далее мы опрашиваем таблицу базы данных при помощи SQL-запроса с переменной name, в которой содержатся параметры поиска, введенные посетителем:
При опросе таблицы базы данных мы создаем переменную $sql , и привязываем ее к строке, содержащей SQL-запрос . Мы используем оператор SELECT для извлечения значений из столбцов id , а также имени и фамилии из таблицы contacts . Затем мы используем инструкцию WHERE вместе со значениями имени и фамилии, чтобы сузить поиск.
Вместе с оператором LIKE мы используем знак процента (%) – спецсимвол, который возвращает 0 и более знаков, а также переменную name из строки поиска. В результате LIKE ( в сочетании со спецсимволом ) находит любое соответствующее имя в таблице базы данных. Можно описать весь процесс следующим образом: « Мы выбираем имя и фамилию из таблицы contacts , которые соответствуют введенным посетителем ». Сохраните файл search_query.php .
Далее нам нужно поместить результаты SQL-запроса в переменную, и запустить ее при помощи функции mysql_query , как показано ниже:
Мы создаем переменную $result , и присваиваем ей значение функции mysql_query () , внося ее в $query. Теперь наш запрос хранится в переменной result . Чтобы вывести результат в PHP , мы создаем цикл, а затем выводим данные в неупорядоченном списке:
Сначала мы создаем цикл while , внутри него создаем переменную под названием row , и инициализируем ее возвращаемым значением функции mysql_fetch_array , которая принимает переменную result , в которой находится наш SQL-запрос . Внутри цикла while мы присваиваем каждому значению столбца значение переменной с идентичным названием. Затем мы выводим значения внутрь неупорядоченного списка.
Здесь важно обратить внимание на два момента: (1) внутри цикла while не нужно присваивать значения переменным массива row , так как значения можно брать напрямую из массива row ; (2) тег anchor , который мы используем в названии нашего файла вместе с id и основным ключом. Причина этого заключается в том, что во многих поисковых элементах изначально ничего не отображается.
Так как мы показываем только имя и фамилию, приписывая ID в конце нашего тега anchor , то мы можем использовать ID для дополнительного запроса, который позволит вывести дополнительную информацию о персонале. Сохраните файл и протестируйте форму PHP поиска по сайту ( search_display.php ).
Убираем табуляцию
Результаты выводятся в виде неупорядоченного списка, но суть в том, что нам не нужна табуляция. Чтобы избавиться от нее, добавьте следующее CSS-правило в самое начало вашего файла в head :
Поиск по буквам
Для реализации поиска по буквам потребуется лишь несколько дополнительных строк кода. Добавим этот удобный функционал для посетителей. Таким образом, они смогут находить представителей персонала по буквам, которые содержатся в имени или фамилии.
Добавьте следующую строку кода после закрывающего тега form :
Мы привязываем тег <a> к строке запроса с by с помощью анкора, и устанавливаем его равным определенной букве. Чтобы реализовать функционал поиска по буквам, нам нужно добавить следующий код прямо после закрывающей фигурной скобки в исходном скрипте, как показано ниже:
Здесь мы изменили четыре фрагмента кода скрипта поиска по сайту:
- Мы используем функцию isset() , и вносим в нее массив $_GET , а затем проверяем значение by ;
- Создаем переменную $letter и инициализируем ее значение массивом $_GET ;
- Добавляем переменную letter в SQL-запрос ;
- Указываем переменную letter внутри выражения, в котором получаем подсчитанное количество строк.
Сохраните файл search_byletter.php и проверьте результат.
Поиск определенного сотрудника
Чтобы отобразить информацию об остальном персонале, которая передается через уникальное id внутри нашей ссылки, нужно добавить следующий код прямо после закрывающей фигурной скобки в скрипте letter , как показано ниже:
Здесь мы изменили четыре фрагмента кода:
- Мы используем функцию isset() , и с ее помощью проверяем значение ID в массиве $_GET ;
- Создаем переменную $contactid и инициализируем ее массивом $_GET ;
- В таблице выделяем все, что отмечено звездочкой * . Звездочка – это сокращенное обозначение в SQL , которое означает « дайте мне все столбцы и строки из таблицы» . Чтобы определить, какую информацию выводить, мы упоминаем переменную contactid в конце SQL-выражения ;
- Выводим дополнительную информацию о каждом представителе персонала.
Сохраните файл search_byid.php и проверьте результат.
Обратите внимание, что наш функционал работает так, как и положено. При вводе имени или фамилии в поле, или при выборе буквы в качестве гиперссылки, отображаются только имена представителей персонала. Если навести курсор на ссылку, то в строке статуса можно увидеть уникальный ID . Если кликнуть по конкретному человеку, то адресная строка изменится, и отобразится дополнительная информация об этом сотруднике.
SQL-инъекция
Причина, по которой мы добавили в наше поле поиска регулярное выражение, заключается в том, чтобы никто не смог вмешаться в наш SQL-запрос . Раньше эта проблема была распространена, и хакеры умудрялись проводить собственные SQL-запросы , манипулируя при этом вашим приложением. Например, если бы мы допустили возможность использовать апостроф в нашем поле, то хакер мог бы просто удалить базу данных, используя запрос:
Как уже было отмечено, регулярное выражение гарантирует, что в качестве первого символа посетитель может вводить лишь буквы в нижнем или верхнем регистре.
В завершение
В сегодняшней статье мы рассмотрели, как сделать поиск по сайту, а также:
- Создавать базы данных и соответствующие таблицы;
- Использовать инструменты для управления базами данных, создавать столбцы и вводить данные;
- Разрабатывать формы поиска на основе PHP , которая умеет осуществлять проверку вводимых данных, наличия переменных в запросе, а также соединяться с базой данных и выводить результаты из таблицы;
- Как защитить приложение и базу данных от SQL-инъекций .
Используя знания, полученные из этой статьи, вы сможете без труда модифицировать чужой код, а также при необходимости расширять функционал формы поиска.
Как использовать Google для поиска на определённом веб-сайте
Andrew Childress Last updated Nov 2, 2018
Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)
Глубины, которых достигает Google кажутся бесконечными. Введите практически любое слово, и вы найдёте интересующую вас страницу. Я часто думаю о том, как редко приходится выходить за рамки первых двух результатов.
Но иногда вы хотите сфокусироваться на результатах с одного сайта. Вместо прочёсывания всего интернета, для поисков соответствующего запроса, вы захотите просканировать лишь один URL. Если вы уже знаете, что ищете, использование Google для поиска по сайту, может обеспечить самые быстрые и точные результаты.
В то время как Google, конечно же, блистает своей простотой использования и непритязательностью, «под капотом» у этой поисковой системы есть более продвинутые опции. В этом уроке я расскажу вам, как искать на сайте с помощью Google. Ещё мы рассмотрим передовые методы, чтобы вы тратили меньше времени на поиск и больше времени на контент, который найдёте. Поехали!
Смотри и учись
Ниже приведён короткий видеоурок, показывающий, как выполнить поиск по сайту с помощью Google. Изучение способов поиска в Google на определённом сайте гарантирует, что вы можете потратить меньше времени на то, что ищете, и вернуться к задаче. В видео ниже, я покажу вам как это сделать и сфокусироваться на одном-единственном домене.
Хотите узнать больше? Тогда продолжайте читать этот урок, и вы увидите иллюстрированное руководство по продвинутому поиску на сайтах с помощью Google.
Почему вы должны искать на сайтах через Google
Как упоминалось в начале этого урока, есть и другие способы поиска в Google, нежели сканирование всей сети. Вы можете направить поиск на один домен, например, tutsplus.com, и получать результаты только из соответствующего домена.
Несмотря на то, что Google, как правило, помогает мне сразу найти правильный контент, он не всегда может определить что-то конкретное, что я мог видеть раньше во время просмотра веб-страниц. На мой взгляд, есть две отличные причины для поиска на сайтах с помощью Google:
- Вы помните веб-сайт, на котором вы видели контент, но не помните конкретную страницу. В этом случае поиск содержимого, сфокусированного на одном домене, поможет вам гораздо быстрее найти то, что вы ищете.
- Сайт, на котором вы ищете, имеет плохой функционал поиска или вообще не имеет его, поэтому, проще передать работу по копанию в иерархии этого сайта Гуглу. Посмотрим правде в глаза: функция поиска на большинстве веб-сайтов работает не так хорошо, как у Google, поэтому используйте поиск по сайту через Google.
В любом случае, даже через Google проще искать на одном сайте, чем потом отсеивать кучу ненужных результатов. Продолжайте читать, чтобы узнать, как это сделать.
Как выполнить поиск по сайту через Google
Если вы используете Google, то обычно вы вводите условие для поиска на сайте Google.com или, возможно, прямо в адресную строку вашего веб-браузера. Вы нажимаете «Enter», и вуаля! Результаты со всего Интернета у вас под рукой.
Но иногда и эти результаты настолько обширны, что вам нужен способ их улучшить. Выдалось так много данных, что теперь вам придётся тратить время и просматривать длинный список результатов. Наоборот, поиск на определённом сайте может значительно уменьшить количество результатов, а, следовательно, количество времени, которое требуется, для поиска того, что вы ищете.
Поиск на определённых сайтах сводится к ограничению URL-адресов, включенных в поиск. Давайте рассмотрим пример.
Если бы я хотел найти результаты по PowerPoint, которые публикуются только в сети Tuts+, вот что я бы набрал:
PowerPoint tutorials site:tutsplus.com
Как видите, в этих результатах поиска, страницы получены только с tutsplus.com из-за «site:tutsplus.com», который я добавил в поисковый запрос.
«site:tutsplus.com» в конце этого поискового запроса — вот, где происходит волшебство. Вместо поиска по всей сети, Google будет искать только в домене, указанном вами с помощью оператора «site:».
В случае таких сайтов, как Tuts+, есть много поддоменов, на которых мы публикуем, например, Business (на business.tutsplus.com) или Computer Skills (на computer.tutsplus.com.). В поисковом запросе, который я показал в приведённом выше примере, поиск выполнен по всем поддоменам.
Если вы хотите уточнить поиск ещё больше и сосредоточиться только на одном из этих поддоменов, вот пример поискового запросах, который вы можете использовать:
PowerPoint tutorials site:business.tutsplus.com
Такой поиск вернёт материалы только из раздела сайта Business, а не из всей сети Tuts+. Большие сайты с множеством, поддоменов действительно выигрывают от этого более конкретного подхода к поиску.
Расширенные функции поиска Google
Все ещё не нашли, что ищете? Не беспокойтесь, у Google есть ещё более расширенные функции, которые помогут вам в работе с задуманным содержимым.
Поиск конкретных фраз
Иногда я вспоминаю конкретные фразы из прочитанных статей. Автор сказал что-то очень осмысленно, а я это запоминаю.
Такой метод поиска является одним из самых важных, при поиске чего-то с помощью фразы. Чтобы найти конкретную фразу, просто вставьте её в кавычки, например:
«add animations in Keynote»
Для уточнения результатов, вы также можете объединить это с поиском по определённому URL:
«add animations in Keynote» site:tutsplus.com
На этом снимке экрана вы видите, что все результаты на изображении имеют фразу, заключённую в кавычки.
Когда вы используете этот оператор поиска, в результатах поиска будут только страницы, содержащие именно эту фразу. Если на сайте есть фраза «add animations in Apple Keynote,», страница не будет включена в результаты поиска из-за разницы в поисковых запросах.
Исключение результатов
Иногда я точно знаю, чего я не ищу. В таких случаях, можно искать на сайте через Google и исключить определённые фразы или результаты. Используя знак «-» (минус) перед URL или фразой, вы можете исключить эти данные из списка результатов Google.
Есть несколько способов применения этой техники. Во-первых, вы можете исключить все сайты из поиска, если знаете сайт, который не подходит вам для поиска. Например, я часто пропускаю учебники на YouTube, потому что предпочитаю текстовые версии уроков. Чтобы исключить весь домен, введите поисковый запрос, который бы использовал я:
PowerPoint tutorials -site:youtube.com
Заметьте разницу в поисковых результатах, при исключении всего домена YouTube.
Вы можете добавить несколько операторов в это исключение, если захотите исключить другие домены:
PowerPoint tutorials -site:youtube.com -site:tutsplus.com
Можно исключить определённые фразы из результатов поиска таким же способом. Следующее полностью исключает любые страницы, которые содержат фразу «PowerPoint for Mac».
PowerPoint tutorials -«PowerPoint for Mac» -site:youtube.com
Обычно я не рекомендую использовать исключение, но эти операторы помогут вам исключить нежеланные условия из поиска.
Поиск в заголовках, тексте и URL
Давайте будем более конкретными в том, хотим ли мы найти заголовки, текст или URL. Объясню разницу в этих понятиях:
- Заголовок. Заголовок страницы показывается на странице результатов, а также и во вкладке вашего браузера. Он не обязательно будет на самой странице.
- Текст. В этом случае, текст — это любой текст на странице или в материале.
- URL. В URL между словами есть дефисы, но тем не менее, вы можете запросить поиск по определённым словам в URL сайта.
Хорошо, что Google достаточно умён, чтобы работать с этим по отдельности, а значит, вы можете более конкретизировать результаты поиска.
Для поиска по заголовкам материалов, попробуйте параметр title. Если в заголовке будет содержаться искомая фраза, то Google включит эти страницы в результаты поиска.
Для поиска в тексте материала, вы можете использовать параметр «intext», в начале поискового запроса. Это удобно, когда искомое находится в тексте, а не заголовке или URL.
И наконец, попробуйте искать слова в URL сайта, используя следующую структуру.
Опять же, вы можете комбинировать эти с другими приёмами из этого урока. Попробуйте поиск по тексту или заголовку, а также с указанием определённого домена, на котором вам нужно выполнить поиск, для улучшения, выданных Гуглом, результатов.
Обязательно проверьте урок от Боба Флиссера (ниже по ссылке), по этим продвинутым техникам поиска и другому. Освоение нескольких дополнительных трюков Google, поможет вам проводить меньше времени за поиском.
Продолжайте учиться
Поиск иногда похож на магию. Как страницы попадают в начало результатов? Стоит ли смотреть на другие поисковые машины? Ответы на эти вопросы ищите в этих других материалах на Tuts+:
Как найти что-то конкретное или уникальное при поиске в Интернете? Сообщите мне в комментариях ниже, есть ли у вас есть любимый приём, чтобы поделиться с другими читателями Tuts+.
Как сделать поиск по сайту
Давайте начнем с самого распространенного варианта. Мы с вами рассмотрим способ, как сделать поиск по сайту html. Для начала следует отметить, что выглядит такая графа достаточно привычно для любого интернет пользователя. Вы можете увидеть его на изображении ниже. 
Как всем известно, простой сайт на html пишется посредством кодов. И когда возникает вопрос того, как сделать поиск по сайту в html, то ответ, конечно же, прост. Необходимо написать код. Но как правильно его выстроить, чтобы получить самый простой вариант поиска? Для этого вы можете воспользоваться нашей визуальной подсказкой, которую мы разместили ниже. Просто напишите данный кодовый набор в формате HTML. 
Таким образом, вы сможете создать самый простой вариант поиска по вашему сайту.
Форма поиска с подсветкой
Стоит отметить, что строка поиска не обязательно должна иметь стандартный вид. Вы вполне можете сделать ее, к примеру, с подсветкой. Для этого стоит просто введите код, который мы разместили ниже, на вашем сайте в тег между <боди>форма поиска</боди>. Внешний вид такого поиска выглядит, как серая полоса поиска, которая исчезает при введении запроса. Такая форма поиска обязательно понравиться посетителям вашего сайта.
Простая но красивая форма поиска
Резиновая форма поиска
Вы наверно думаете, что мы явно что-то путаем. Как форма поиска может быть резиновой? Но не волнуйтесь, мы не сошли с ума. Просто именно так обозначается тот вариант, когда изначально строка поиска занимает мало пространства, а после наведения на нее курсора вытягивается в длину. Чтобы активировать данный поиск, введите следующий код:
Красивая форма поиска
Мы с вами уже рассмотрели основные формы поиска, но наверняка большинство из вас предпочли бы более, эстетический вариант. Как же его сделать? Конечно же, посредством html-кода, как и предыдущие варианты. Он наиболее длинный из всех, вот почему мы решили не останавливаться на данном вопросе, а просто разместить, изображение такого поиска, в качестве ознакомительного фрагмента.