Что любят мужчины search php sc. Организация поиска по веб-странице на JavaScript (без jQuery)
Описание:
Фактически - это миниYandex на Вашем сайте.
Не верите?! Тогда введите запрос в поле поиск вверху страницы и посмотрите результаты...
Скрипт поиска по сайту без использования MySQL. Подходит для большинства малых и средних сайтов. Использует индексацию, благодаря чему время поиска значительно сокращается...
Для чего нужен?
Просматривая логи, я обнаружил, что некоторые из посетителей превратно толкуют слова миниYandex. Скрипт ищет НЕ ПО ВСЕМУ ИНТЕРНЕТУ, а ищет информацию ТОЛЬКО НА ВАШЕМ САЙТЕ. Говоря миниYandex, я имею ввиду, что скрипт показывает довольно неплохие (имеется ввиду качественные) результаты поиска.
Что нового:
Скрипт устанавливается в виде отделного модуля в отдельную папку.
Теперь результаты выводятся не в нижнем регистре, а в том виде, в каком текст представлен на Ваших страницах.
По-умолчанию заблокированы для поиска большинство ненужных файлов (бинарные файлы, служебные и т.д.)
Более корректно вырезается из текста javascript-код
Оптимизированы некоторые алгоритмы поиска, что позволило получить прирост в скорости порядка 2-3сек.
Несколько видоизменена панель администрирования.
Возможности:
1. Поиск во всех директориях Вашего сайта.
2. Удобная WEB-панель администрирования со встроенной надежной защитой.
3. Вывод участка документа и выделение цветом совпадений с запросом.
4. Настройка количества отображаемых строк, цвета, синтаксическое выделение совпадений (жирный, наклонный шрифт и т.д.), время последнего изменения файла.
5. Нахождение не только точных совпадений, но и похожих слов. Например на запрос функция будут также найдены: функции, функцию, функций, функционирования, функциональный, функцией, многофункциональный и т.д.
6. Подсчет количества точных совпадений и похожих словоформ.
7. Статистика: количество обработанных Kb, файлов и время поиска.
8. Возможность запрета индексации отдельных папок корневой директории, например cgi-bin, img и т.д.
9. Возможность запрета индексации конкретных файлов, например counter.
php , vote.txt, statistic.php и т.д.
10. Возможность запрета индексации файлов по маске, например.txt, .inc, .lib, .sql и т.д.
11. Возможность выбора отображения названия файла в результатах поиска: index.php - реальное название, или "Главная страница сайта" - название из тега.
Примечание:
Я не оказываю техподдержку:
1. Тем, кто не уважает авторские права.
2. Тем, чьи сайты находятся на бесплатных хостингах типа hoha.ru, fatal.ru и т.д. (не потому что I"m BAD, а потому что у меня нет времени разбираться в настройках подобных серверов).
3. Тем, кто тестирует скрипт на самостоятельно установленном локальном сервере, по причине изложенной Выше. Исключение составляет програмный комплекс ДЕНВЕР2.
Пару дней назад получил тестовое задание от компании на вакансию 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.Прежде, чем начнем писать код, давайте отвлечемся и сперва обсудим, как все должно работать. Т.е. по сути пропишем план действий. Итак, нам надо, чтоб при вводе текста в поле шел поиск по странице, но нельзя затрагивать теги и атрибуты. Т.е. только текстовые объекты. Как этого достичь - уверен есть много способов. Но сейчас будем использовать регулярные выражения.
Итак, следующее регулярное выражение будет искать только текст след. вида: ">… текст...