Добавьте поисковое выделение ключевых слов на любую веб-страницу с Mark.js

Большинство браузеров имеют Функциональность CTRL + F искать и находить все, что ищет пользователь. Но эта особенность не поддерживается на мобильных устройствах и это не работает хорошо, используя динамический текст.

К счастью, есть Mark.js, бесплатный плагин JavaScript, который добавляет выделить функцию поиска на любую страницу с легкостью.

По умолчанию он работает как ванильный плагин JS но также может работать на вершине jQuery. Это проект с полностью открытым исходным кодом, так что вы можете использовать его на любом коммерческом или ином веб-сайте..

Он работает так же, как любая функция поиска в браузере, за исключением того, что поставляется с дополнительными вкусностями. Можете добавить ваши собственные фильтры и искать слова на основе регулярные выражения, конкретные синонимы, и даже в динамические элементы страницы такие как iframes.

Для начала просто скачайте файл Mark.js от GitHub или разместить файл через CDN экономить время.

Вы должны запустить эту функцию подключен к полю ввода на странице. Таким образом, пользователи могут вводить условия поиска и получить немедленную обратную связь через выделенный текст.

Вот образец фрагмента со страницы демо:

 $ (". context"). mark (ключевое слово [, параметры]); 

.контекст цели класса, где функция должна поиск терминов. Вы можете использовать HTML по умолчанию элемент если вы пытаетесь найти всю страницу, или вы могли бы пройти несколько элементов такие как различные виджеты с вкладками или iframes.

Затем внутри отметка() функционировать ты передать ключевое слово, вместе с опциями (если хотите).

Если вы позволите пользователям вводить ключевое слово, то вы можете автоматическое обновление функции с новым ключевым словом после каждого нажатия клавиши. Есть даже специальная функция для этого события.

Mark.js работает со всеми основными браузерами, включая Chrome, Firefox, Opera (v12 +) и Internet Explorer (9+). Это очень легко настроить, если вы будете следовать документам и использовать новейшие файлы.

Но если вы хотите увидеть Mark.js в действии взглянуть на скрипка ниже используя очень простую демонстрацию jQuery для поиска в нескольких абзацах Lorem Ipsum.