texthighlighter

Marcador de texto

Classe Vanilla JS para destacar os resultados da pesquisa em uma área de texto, mantendo a funcionalidade da área.

Como não é possível estilizar o texto em uma textarea, pois não é HTML, esta classe vem ao resgate permitindo destacar qualquer texto em uma textarea. Como nos resultados da pesquisa.

CONFIRA A DEMO{:target="_blank"}

Características

• Sem dependências.
• Nenhuma configuração. Basta instanciar a classe e chamar um método.
• Pode ser usado em quantas textareas forem necessárias, basta instanciar para cada uma.
• Responsivo. As marcações serão ajustadas ao tamanho da tela, tamanho da área de texto e rolagem.
• Mantém o plano de fundo original da área de texto.
• Pode ser destruído adequadamente. Removerá todos os eventos e estrutura.
• Pode escolher entre pesquisa com distinção entre maiúsculas e minúsculas e insensível.
• Pode pesquisar livremente ou apenas palavras.
• Fornece uma contagem de quantos resultados foram encontrados.
• Pode navegar pelos resultados da pesquisa, exibindo-os conforme necessário.

Seu uso é muito simples, instancie a classe para a textarea que você precisa e chame o método search para destacar o texto que você passa no primeiro argumento. O segundo argumento é opcional e usa um booleano que, se verdadeiro, tornará a pesquisa sensível a maiúsculas e minúsculas. O padrão não diferencia maiúsculas de minúsculas. O último argumento também recebe um booleano que, se verdadeiro, realizará uma busca por palavras. Caso contrário, é uma pesquisa gratuita, onde qualquer parte das palavras pode ser correspondida.

Exemplos de uso e código

Adicione os seguintes arquivos ao seu projeto:

• 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 ) ;

Para acessar quantas ocorrências foram encontradas, use:

 let count = hilite . count ( ) ;

Você pode navegar entre os resultados destacados usando os métodos anterior e seguinte. Esta navegação é cíclica, ou seja, quando chega ao final a próxima chamada leva você de volta ao início e vice-versa. Exemplo abaixo:

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

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

Caso precise limpar os destaques, chame o método clear.

 hilite . clear ( ) ;

Quando sair do escopo, basta chamar o método destroy e tudo ficará como estava antes da instanciação.

 hilite . destroy ( ) ; 

Sobre

Esta classe foi inspirada no plugin JQuery destaque-dentro-textarea do lonekorean. Basicamente, eu precisava de uma funcionalidade semelhante para um projeto, mas não queria incluir o JQuery apenas para isso e não encontrei nenhum outro código que fosse bom o suficiente.

O principal objetivo aqui foi fornecer destaque para os resultados da pesquisa em uma área de texto.

Esta classe foi testada no Chrome 117 e Firefox 118.

Licença

Este projeto está licenciado sob a licença MIT