Статья об организации на сайте поиска основанного на. Скрипт PHP, пошаговое описание установки скрипта поиска на сервер. Здесь обязательным является только HTML код внутри комментариев "Вставка поля поиска. Установить скрипт поиска по сайту.

Организация поиска по веб- странице на Java. Script (без j. Query) / Песочница / Хабрахабр. Пару дней назад получил тестовое задание от компании на вакансию Front- end dev.

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

1. Курсы HTML, CSS, PHP, JavaScript, лектор Трепачёв Д.П. Поищите в поисковиках "скрипт поиска по сайту php".
2. Этот вопрос часто задают себе владельцы сайтов, не знающие язык html настолько глубоко, чтобы написать скрипт поиска самостоятельно.

Все писать на родном native Java. Script.(Для наглядности далее буду сопровождать всю статью скринами и кодом, чтоб мне и вам было понятнее, о чем речь в конкретный момент)Поиск готового решения. Первая мысль: кто- то уже точно такое писал, надо нагуглить и скопипастить. Так я и сделал. За час я нашел два неплохих скрипта, которые по сути работали одинаково, но были написаны по- разному. Выбрал тот, в коде которого лучше разобрался и вставил к себе на старничку.

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

Сперва в переменную записываем все содержимое тега body, затем ищем совпадения с регулярным выражением (задает пользователь при вводе в текстовое поле) и затем заменяем все совпадения на следующий код: < span style=. Разметка обновляется, меняются стили и на экране подсвечиваются желтым все найденные результаты. Вы уже наверняка поняли, в чем проблема, но я все же объясню подробней.

Представьте, что в поле поиска ввели слово «div». Как вы понимаете, внутри body есть множество других тегов, в том числе и div. И если мы всем к «div» применим стили, указанные выше, то это уже будет не блок, а непонятно что, так как конструкция ломается. В итоге после перезаписи разметки мы получим полностью сломанную веб- страницу.

Выглядит это так. Было до поиска: Просмореть полностью. Стало после поиска: Просмореть полностью.

Как видите, страница полностью ломается. Короче говоря, скрипт оказался нерабочим, и я решил написать свой с нуля, чему и посвящается эта статья. Обвел ее красной линией. Давайте немного разберемся. Я это реализовал следующим образом (пока чистый HTML).

Форма с тремя тегами. Первый — для ввода текста; Второй — для для отмены поиска (снять выделение); Третий — для поиска (выделить найденные результаты).< form>. Java. Script буду писать в файле js.

Предпложим, что его вы уже создали и подключили. Первое, что сделаем: пропишем вызовы функции при нажатии на кнопку поиска и кнопку отмены. Инструкция По Укладке Пробкового Ламината.

Выглядеть будет так: < form>. Полю с текстом даем id=«text- to- find» (по этому id будем обращатсья к элементу из js). Кнопке отмены даем такие атрибуты: type=«button» onclick=«javascript: Find. On. Page('text- to- find',false); return false; » — Тип: button— При нажатии вызывается функция Find.

On. Page('text- to- find',false); и передает id поля с текстом, false. Кнопке поиска даем такие атрибуты: type=«button» onclick=«javascript: Find.

On. Page('text- to- find',true); return false; » — Тип: submit (не кнопка потому, что тут можно юзать Enter после ввода в поле, а так можете и button использовать)— При нажатии вызывается функция Find. On. Page('text- to- find',true); и передает id поля с текстом, true.

Вы наверняка заметили еще 1 атрибут: true/false. Его будем использовать для определения, на какую именно кнопку нажали (отменить поиск или начать поиск). Если жмем на отмену, то передаем false. Если жмем на поиск, то передаем true. Окей, двигаемся дальше.

Переходим к Java. Script. Будем считать, что вы уже создали и подключили js файл к DOM. Прежде, чем начнем писать код, давайте отвлечемся и сперва обсудим, как все должно работать. Итак, нам надо, чтоб при вводе текста в поле шел поиск по странице, но нельзя затрагивать теги и атрибуты. Как этого достичь — уверен есть много способов.

Но сейчас будем использовать регулярные выражения. Итак, следующее регулярное выражение будет искать только текст след. Затем будем добавлять стили найденным объектам и после этого заменять html — код на новый. Приступим. Сперва переменные, которые нам понадобятся.

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

Ведь мы либо проводим поиск, либо обнуляем его. И контроллируется это атрибутом true/false, как вы помните. Так же надо понимать, что при повторном поиске прежние стили должны обнуляться. Таким образом получим следующее: var input,search,pr,result,result. Необходимо проверять полученное слово на количество символов. Ведь зачем нам искать 1 букву/символ. В общем, я решил эту возможность ограничить 3+ символа.

Итак, сперва приниамем значение, которое ввел пользователь, и, в зависимости от его длины, выполняем либо основную функцию поиска, либо функцию вывода предупреждения и обнуления. Выглядеть будет так: var input,search,pr,result,result. Единственное, что могло стать не ясно — вот эта строка: function Find. On. Page. Back() . В данном случае мы просто заменяем текущий body на оригинальный, который мы сохранили при загрузке всей страницы.

Двигаемся дальше. Даем значения основным переменным.

Теперь надо придать нужным участкам кода стили с выделенным фоном. Для этого надо из введенного текста сделать регулярное выражение (сделали), а затем выполнить метод, переданный в виде такста. Тут нам поможет метод eval(). В общем, после того, как мы заменим текст и получим результат со стилями, надо текущий html заменить на полученный. Делаем. var input,search,pr,result,result.

Но добавим еще пару деталей для красоты. Обрежем пробелы у текста, который вводит пользователь. Вставляем этот код: input = numer. Этот код вставляем внутрь функции function Find.

On. Page. Go() после переменных. Конечно, можно добавить скролл к первому найденному результату, живой поиск ajax, да и вообще улучшать можно бесконечно. Сейчас это довольно примитивный поиск по сайту. Целью статьи было помочь новичкам, если возникет такой же вопрос как у меня. Ведь простого готового решения я не нашел. P. S.: для корректной работы необходимо убрать переносы текста в html документе в тех местах, где есть обычный текст между тегами. Например, вместо < p> бла бла бла.

Надо < p> бла бла бла < /p>. Игру Бегать И Стрелять. Это не принципиально, можно от этих переносов избаляться автоматически на сервисе, но может подскажете заодно, как это пофиксить, если поймете раньше меня.

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

Поиск ведется по тегам с классом «place. Так что для того, чтоб алгоритм парсил нужный контент, добавляем класс и готово.

Скрипт поиска по сайту на любую платформа - FAQ (Вопросы и Ответы)Здравствуйте всем вот нашел скрипт поиска по сайту, который ставится на любую платформу сайта на php Скачать здесь http: //ruseller. Но вот я его поставил, но он почему то не хочет искать слова. Просто я создал php страницу, где будет много адресов и мне нужно чтоб по поиску на этой странице находилось то слово с подчеркиванием, типо как в браузерах Ctrl+F.

Своего рода я хочу создать скромную базу данных. Или есть еще другой способ? Кто поможет мне в этом деле.

Гы исправьте на платформу Вот нашел скрипт, то что я и хотел, но он не ищет длинные слова вот пример.