- Поиск и подсветка текста на странице (JavaScript — jQuery)
- Мгновенный поиск, подсветка, переход к найденному
- Подсветка найденного при поиске
- Подсветка результатов поиска на странице
- Комментарии
- Подсветка результатов поиска, без использования плагинов
- Подсветка чего угодно
- Обновления
- Форум
- Discord чат
- Подсветка текста, основанная на вводимом слове, ведет себя неожиданно
- 2 ответа
- Легко выделять с помощью mark.js.
- Знакомство с mark.js
- подсветка найденных слов — Yandex — Обсуждение 2290852
Поиск и подсветка текста на странице (JavaScript — jQuery)
Нужен был поиск на страничке, точнее в тексте, не серверный, а обычный. То есть — загрузил страничку где много текста, читаешь, и при надобности ищешь. Порылся в интернете и, к сожалению, готово варианта (с переходом между словами и прокруткой странички) не нашел, хотя в реализации нету ничего сложного — или плохо искал, или никому не надо было.
Вот как раз заканчиваю — решил поделиться первым вариантом.
Само собой используется библиотека jQuery.
За основу я взял статейку jQuery – подсветка слов в тексте или HTML отсюда (их пример). Как подключить к страничке скрипт там описано.
буду использовать ниже «слово» = «словосочетание» = «словосочетание букв и\или символов».
Теперь начнем расширять функционал:
кнопки поиска, выделение следующего слова и предыдущего, и скролл странички к выделенному слову
1) делаем подсветку конкретного слова
в файл jquery.highlight.js добавляем
2) в стиль прописываем отображение выделяемого слова и меняем стиль подсветки для себя
3)Создаем кнопки и поле ввода
4)приписываем кнопкам действия
копируем код:
(ниже опишу для чего эта функция)
5)
function scroll_to_word() <. >— функция скрола (перемотки) странички к нужному нам слову
ну вообще делается очень легко с помощью простого плагина jqueryscrollto, который берем отсюда, и ищем по классу .highlight и номером eq(‘+search_number +’) ( search_number — смотрим в список глобальных переменных скрипта).
Но мне пришлось использовать этот набор плагинов (jqwidgets), так как был нужен собственный скрол для странички а не браузерный, поэтому я воспользовался их API:
scrollTo Method
Scroll to specific position.
Code examples
Invoke the scrollTo method.
Demo
Вот походу и все.
Прошу прощения за неоптимизированный код — вот только что закончил и решил поделится, это только начальная версия
Мгновенный поиск, подсветка, переход к найденному
Новичок. Ищу скрипты приспосабливаю под свои нужды. Помогите с простой задачей в оформлении html одной вебстранички и адаптировании скрипта, использующего jquery. Не пугайтесь что написал текста много, задача для профи — простая, для меня огромная помощь. Спасибо!
Задача: создать мгновенный поиск и подсветку найденного для больших веб-страниц, расположенных на локальном компьютере, замена CTRL+F:
1. Скрипты только JavaScript, текст скриптов вынести в отдельный файл js, работать скрипты должны в любом браузере (желательно включая браузеры на/для Android)
2. Страница должна иметь 2 блока: блок один, узкий с 2мя контролами (см. ниже), висящий все время вверху в топ страницы, поверх, не изменяющий позиции при скроллинге, блок два — с основным текстом страницы, где будет производится поиск
3. Дано: Основной текст страницы сверстан одинаковыми divами
4. Блок 1 содержит 2 контрола: текстовое поле #q и checkbox #q1, используемый для переключения режимов поиска True = режим 1, False = режим 2
5. Текст введенный в блок 1 должен подсвечиваться на вебстранице, не чувствительно к регистру, не зависит вначале/в середине слова, все вхождения
6. Режим 1 — если текст найден — перейти (scroll страницы) к первому вхождению, если текст не найден/ничего не введено — перейти (скролл) в начало страницы
7. Режим 2 — если текст найден в элементе search_item — показать этот div-элемент, не найден — скрыть этот div-элемент, если ничего не введено — показать всю страницу
8. Скрипт(ы) мгновенного поиска запускаются вводом символов в текстовом поле 1 (н-р отслеживаем нажатия, keyup), а также снятием|установкой checkbox 1, т.е. последнее также должно подсвечивать/переходить/скрывать-показывать текущий текст в текстовое поле #q
Все запчасти для будущей веб-страницы нашел в инете, помогите это подчистить, собрать в кучу
Подсветка найденного при поиске
Подсветка результатов поиска на странице
- Для поиска и просмотра a href = «/search» title = «Результаты поиска» > результатов
- поиска a > пройдите по поисковой ссылке .
- Для b > поиск b > а и просмотра a href = «/search» title = «Результаты поиска» >
- результатов b > поиск b > а a > пройдите по b > поиск b > овой ссылке .
- // Искомая строка для подсветки на странице
- $search = ‘html’ ;
- // Создаем строку для регулярного выражения
- $pattern = «/((?:^|>)[^ . $search . «)/si» ;
- // Подсвеченная строка
- $replace = ‘$1 $2‘ ;
- // Заменяем
- $html = preg_replace ( $pattern , $replace , $html );
Код также немного упрощен для удобства восприятия. В реальных проектах при составлении регулярного выражения $pattern надо обязательно экранировать в искомой строке все служебные символы, которые могут быть использованы в регулярных выражениях.
Протестируем скрипт. Для примера возьмем небольшую html-страницу с текстом и html-тегами и попробуем подсветить на ней все вхождения слова «html». Обратите внимание, что эта строка встречается не только в тексте, но и в самой разметке страницы, в адресе ссылки, а также в атрибуте title.
- html >
- head > title > Тестовая страница title > head >
- body >
- HTML ( от англ . HyperText Markup Language — язык разметки гипертекста ) —
- стандартный язык разметки документов во Всемирной паутине . Большинство
- веб — страниц создаются при помощи
- a href = «http://ru.wikipedia.org/wiki/HTML» title = «Описание языка HTML» > языка
- HTML a > ( или XHTML ).
- body >
- html >
Вот что у нас получилось после замены. Выглядит очень даже неплохо.
Теперь посмотрим на исходный код, не поломалось ли чего. Нет, и тут все в порядке. Подсвечен только текст вне тегов, внутри тегов он остался без изменения.
Если используется релевантный поиск, то регулярное выражение для подсветки можно доработать таким образом, чтобы подсвечивались несколько слов по отдельности и вся поисковая фраза целиком. Это вы можете сделать самостоятельно.
Комментарии
Здорово, спасибо! Работает на ура!
Поделюсь, как видоизменил, чтобы можно было выделять несколько слов и выделялось css-классами:
$html_lit = ‘ Text of html page to replace with color lighting. Used html tags «span» and «class» defined. ‘;
$words_and_classes = array ();
$words_and_classes[] = array ( ‘word’ => ‘html’, ‘class’ => ‘light_1’);
$words_and_classes[] = array ( ‘word’ => ‘with color’, ‘class’ => ‘light_2’);
foreach ($words_and_classes as $one) <
$regs_search = ‘/’.preg_quote($one[‘word’], ‘/’).’/usi’;
$regs_replace = ‘ \\0 ‘;
$html=preg_replace_callback(‘/(? )([^<>]+)(?=$| This is for REPLACE
При замене REPLACE — все ок
Но есть в строке несколько вхождений заменяемой фразы, то заменяется только ПОСЛЕДНЯЯ:
REPLACE examle — this is for REPLACE
в этом примере заменится только последний REPLACE, а первый останется незамеченным :((
В какую сторону regexp-правил можно смотреть, чтобы учесть ВСЕ вхождения??
Подсветка результатов поиска, без использования плагинов
Существует не мало плагинов для улучшения поиска в WordPress. Есть такие, которые изменяют алгоритм поиска, а есть которые делают поиск удобнее. В этой заметке речь пойдет именно о таком плагине. Я хочу совсем немного улучшить стандартный поиск WordPress: сделать подсветку искомых слов.
Задача: сделать подсветку результатов поиска, без использования плагинов. Решается ниже представленным способом, а точнее функцией, которая по сути аналогична, пожалуй, самому простому плагину для подсветки результатов поиска в WordPress — Search Hilite (подсвечиваются слова и больше никаких действий).
Поместите код в файл шаблона functions.php .
Функция будет работать, если в файле search.php у вас для вывода результатов поиска используется функция the_excerpt() или the_content() . Если вывод осуществляется нестандартно, читайте ниже.
В самом начале кода можно настроить стили найденных слов: $st1 — первое слово, $st2 — второе и т.д.
По умолчанию цвета такие: Подсвечиваем результаты поиска , без плагинов.
Код лучше добавлять в сам файл поиска, непосредственно перед контентом, потому что если его добавить в functions.php, то из-за хука:
Также будут подсвечиваться слова в меню сайта, которое выводится через wp_nav_menu() .
Подсветка чего угодно
Если для вывода поиска используются функции отличные от the_excerpt() или the_content(), то чтобы подсветка работала, нужно «прогнать» выводимый текст через эту функцию.
Допустим, вы используете для вывода результатов поиска функцию get_my_excerpt() , тогда, чтобы подсветка работала вывод нужно будет записать подобным образом:
Обновления
29.04.2010
Спасибо Ю.Б. за подсказку (в комментариях) использовать модификатор u для регулярного выражения — код значительно сократился.
Были непонятные баги с подсветкой — не все слова подсвечивались. Как выяснилось проблема была в регулярном выражении я ее упростил, теперь подсвечивается все.
Форум
Discord чат
 | Новичок. Ищу скрипты приспосабливаю под свои нужды. Помогите с простой задачей в оформлении html одной вебстранички и адаптировании скрипта, использующего jquery. Не пугайтесь что написал текста много, задача для профи — простая, для меня огромная помощь. Спасибо! Задача: создать мгновенный поиск и подсветку найденного для больших веб-страниц, расположенных на локальном компьютере, замена CTRL+F: 1. Скрипты только JavaScript, текст скриптов вынести в отдельный файл js, работать скрипты должны в любом браузере (желательно включая браузеры на/для Android) 4. Блок 1 содержит 2 контрола: текстовое поле #q и checkbox #q1, используемый для переключения режимов поиска True = режим 1, False = режим 2 Все запчасти для будущей веб-страницы нашел в инете, помогите это подчистить, собрать в кучу Подсветка текста, основанная на вводимом слове, ведет себя неожиданноЭто форматирование текста перед введением поискового запроса.
После ввода термина он теряет исходный формат (возвращает обычный текст) и дублирует текст p на количество найденных последовательных символов (на самом деле я знаю, почему это так, но опять же не знаю, как этого избежать):
Я хочу сохранить исходный формат HTML с выделенными словами и, конечно же, чтобы избежать дублирования текста. 2 ответаКогда вы вызываете функцию searchHighlight , вы получаете содержимое p , которое даст вам все p . Кроме того, когда вы говорите .text() , вы получите простой текст. Вот почему это было удаление исходного формата. Если вы запустите цикл для всех p и используете .html() вместо .text() , а также если вы развернете выделенный контент при запуске перед получением html-контента, вы сможете этого добиться. Там всегда будут некоторые лазейки. Легко выделять с помощью mark.js .Знакомство с mark.jsmark.js — подсветка текста, написанная на JavaScript. Он может использоваться для динамической маркировки поисковых терминов или пользовательских регулярных выражений и предлагает вам встроенные опции, такие как поддержка диакритических знаков, отдельный поиск слов, пользовательские синонимы, поддержка iframes, пользовательские фильтры, определение точности, пользовательский элемент, имя пользовательского класса и многое другое. Посмотрите, как просто, вам не нужно больше десяти строк , фреймворк готов и сделает все за вас, с возможностью настройки вашего кода, просто зайдите на официальную страницу и посмотрите документацию и примеры , Вероятность неудач намного ниже, и вы уже делаете это правильно с первого раза. Просто установите зависимости и используйте их легко. Почему использование функции самодельного выделения — плохая идея : подсветка найденных слов — Yandex — Обсуждение 2290852«Подсветка» слов в выдаче Подсветка всех найденных совпадений в TextBox Поиск слов по букве, и выделение найденных слов Количество найденных слов Удаление найденных слов в тексте Запись найденных слов в файл detector |
Поиск по тексту и отметка найденных слов