Эта популярная статья была обновлена в мае 2016 года и отражает текущее состояние плагинов для подсветки текста.
Многие приложения или веб-сайты предоставляют пользователям возможность поиска определенных терминов. Чтобы ускорить этот процесс, обеспечить удобство работы с пользователями и, как правило, помочь пользователям найти контент, который они ищут, вы можете динамически выделять эти поисковые термины на данной странице.
Вот 10 плагинов для подсветки текста jQuery, которые вы можете использовать, чтобы сделать это возможным.
1. mark.js
Подсветка ключевых слов для поисковых терминов или пользовательских регулярных выражений, написанных на ES6 и основанных на нескольких десятках кросс-браузерных модульных тестов, а также мониторинга качества кода. Это было разработано, чтобы обслужить каждый случай использования и включает в себя все опции из плагинов подсветки текста ниже и многое другое (например, диакритические знаки, синонимы и iframes).
2. выделить
Очень простой и крошечный плагин для подсветки текста, который положил начало многим форкам. Поскольку он не допускает никаких настроек, его сила в небольшом размере файла (1,4 КБ).
3. jquery.highlight
Подсветка (# 2 выше), которая добавляет базовые опции для указания пользовательского элемента и имени класса, а также опцию caseSensitivewordsOnly К сожалению, этот плагин не поддерживается (последний коммит с 2010 года, без перебазирования форка) и имеет проблемы с отключением, поэтому его следует использовать с осторожностью.
4. jQuery.highlightRegex
Еще один плагин, основанный на выделении (# 2 выше) для выделения пользовательских регулярных выражений . Как и jquery.highlight (# 3 выше), он предлагает базовые опции для указания пользовательского элемента и имени класса. Другие параметры могут быть добавлены вручную в пользовательское регулярное выражение — например, флаг «i», чтобы игнорировать прописные и строчные буквы.
5. highlight_words
Простая функция выделения jQuery без каких-либо настроек, как в выделении (# 2 выше). Вы должны знать, что он не предлагает функцию удаления бликов и не облегчает поиск во вложенных дочерних элементах. Тем не менее, он обеспечивает хорошую основу для дальнейших реализаций — хотя и не содержит информации о лицензировании.
6. jcOnPageFilter
Этот плагин позволяет фильтровать список с помощью поискового запроса и выделять найденные совпадения. Он имеет возможность включить поиск с учетом регистра, но не содержит информации о лицензировании.
7. SearchHighlight
Другой плагин для подсветки текста, который предлагает вам варианты для определения пользовательского класса подсветки; суффикс класса; exactуже невозможно ).
Плагин был написан в 2006 году, долгое время не обновлялся и не содержал информацию о лицензировании, поэтому вы должны быть осторожны при его использовании.
8. jquery-подсветка
Этот плагин позволяет вам анимировать самодельные элементы подсветки текста, применяя необходимые для вас настройки CSS-анимации. Вы можете, конечно, написать CSS самостоятельно, если хотите.
9. TextHighlighter
С помощью этого плагина вы можете выделять выделенный текст пользовательскими цветами или просто наблюдать выбор текста пользователем. Поскольку этот плагин больше не поддерживается, вы должны пользоваться им с осторожностью.
10. JQuery HighlightTextarea
Поскольку элементы textarea не могут отображать HTML (как любой из вышеупомянутых плагинов будет генерировать совпадения), этот плагин позволяет выделять текст внутри элементов textarea. Он предлагает такие опции, как caseSensitivecolorоткрытых проблем , и он не предоставляет функцию удаления выделения.
Вывод
Ну, это мой текущий список десяти лучших плагинов для подсветки текста jQuery. Если у вас есть опыт работы с этими (хорошими или плохими!) Или вы знаете о других плагинах для подсветки текста, о которых стоит упомянуть, сообщите нам об этом в комментариях!