texthighlighter

Выделитель текста

Класс Vanilla JS для выделения результатов поиска в текстовой области, сохраняя при этом функциональность области.

Поскольку невозможно стилизовать текст в текстовой области, поскольку это не HTML, на помощь приходит этот класс, позволяющий выделить любой текст в текстовой области. Например, в результатах поиска.

ПОСМОТРЕТЬ ДЕМО{:target="_blank"}

Функции

• Никаких зависимостей.
• Никакой конфигурации. Просто создайте экземпляр класса и вызовите метод.
• Может использоваться в любом количестве текстовых областей, просто создайте экземпляр для каждой.
• Отзывчивый. Маркировка будет подстраиваться под размер экрана, размер текстовой области и прокрутку.
• Сохраняет исходный фон текстовой области.
• Можно правильно уничтожить. Удалим все события и структуру.
• Можно выбирать между регистрозависимым и нечувствительным поиском.
• Можно искать свободно или только по словам.
• Предоставляет подсчет количества найденных результатов.
• Может перемещаться по результатам поиска, выводя их на просмотр по мере необходимости.

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

Примеры использования и кода

Добавьте в проект следующие файлы:

• texthighlighter.js
• texthighlighter.css

 let tarea = document . getElementById ( 'txt' ) ;
let hilite = new textHighlight ( tarea ) ;

let searchResult = 'Some Expression' ;
let sens = true ;                        // Case sensitive. Optional, default: false
let word = true ;                        // Perform a words only search. Optional, default: false
hilite . search ( searchResult , sens , word ) ;

Чтобы узнать, сколько вхождений было найдено, используйте:

 let count = hilite . count ( ) ;

Вы можете перемещаться вперед и назад по выделенным результатам, используя методы «Предыдущий» и «Следующий». Эта навигация циклична, это означает, что при достижении конца следующий вызов вернет вас к началу и наоборот. Пример ниже:

 let btnPrev = document . getElementById ( 'prev' ) ;
let btnNext = document . getElementById ( 'next' ) ;

btnPrev . addEventListener ( 'click' , hilite . prev ) ;
btnNext . addEventListener ( 'click' , hilite . next ) ;

Если вам нужно очистить блики, вызовите методclear.

 hilite . clear ( ) ;

Когда он выходит за пределы области видимости, просто вызовите метод уничтожения, и все будет так, как было до создания экземпляра.

 hilite . destroy ( ) ; 

О

Этот класс был вдохновлен плагином JQuery для выделения внутри текстовой области от Lonekorean. По сути, мне нужна была аналогичная функциональность для проекта, но я не хотел включать JQuery только для этого и не нашел другого достаточно хорошего кода.

Основная цель здесь заключалась в выделении результатов поиска в текстовой области.

Этот класс был протестирован в Chrome 117 и Firefox 118.

Лицензия

Этот проект лицензируется по лицензии MIT.