search-text-highlight
Encontre e realce substrings em textos com um wrapper HTML — suporte total a unicode.
search-text-highlight é uma utility TypeScript pequena que resolve um problema bem: dada uma string haystack e uma query needle, devolve o mesmo haystack com os substrings correspondentes envolvidos em uma tag HTML configurável. Nome de tag custom, classe custom, toggle de sensibilidade a maiúsculas, comportamento match-all ou match-first, e consciência completa de unicode. É a mesma biblioteca que as próprias UIs de busca do Dailybot usam para realçar resultados — pequena, com poucas dependências, testada em produção.
1
utility focada, faz uma coisa bem
0
dependências de runtime
Total
segurança unicode e emoji
MIT
licença, de ponta a ponta
Por que existe
As peças que fazem valer a pena adotar.
Tag wrapper configurável
Envolve matches em `<mark>`, `<span>`, `<b>` ou qualquer tag HTML que você quiser. Adicione uma classe custom para estilos. A biblioteca dá a primitiva, seu CSS faz o resto.
Case-sensitive ou case-insensitive
Alterne com um booleano. O match case-insensitive ainda preserva o casing original do texto realçado — você não perde o contexto do leitor.
Match all ou match first
Às vezes você quer realçar cada ocorrência de um termo; às vezes só a primeira. Um flag, qualquer comportamento.
Seguro com unicode + emoji
Caracteres multi-byte, marcas combinantes e sequências de emoji são tratados corretamente. Você não terá famílias `👨👩👧` realçadas pela metade.
Zero dependências de runtime
TypeScript puro sem deps de runtime. O tamanho do bundle é minúsculo; funciona no Node, no navegador e em runtimes edge.
MIT + totalmente forkável
Toda a utility é MIT. Forke, adapte a sintaxe do wrapper, estenda a estratégia de match — o código e a licença dizem sim.
Instalação
Comece em segundos.
Escolha o canal que combina com seu stack. Cada caminho te deixa no mesmo estado funcional.
npm i search-text-highlightNa prática
O que as equipes realmente fazem com ele.
01
UI de resultados de busca com termos realçados
O usuário digita uma query no seu buscador. Os resultados renderizam com os termos envolvidos em `<mark>`. Os usuários veem imediatamente por que um resultado bateu — sem precisar caçar o termo em uma parede de prosa.
02
Matching de command palette / autocomplete
Enquanto o usuário digita, os caracteres correspondentes na lista de sugestões ficam em negrito. Mesma função, saída previsível.
03
Busca em histórico de chat
A busca de histórico de chat do seu app devolve mensagens com os termos da query realçados inline. Os usuários podem varrer a parte relevante de uma mensagem longa sem relê-la.
04
Busca full-text em sites de docs
Resultados de busca em sites estáticos com termos realçados. O usuário vê a query em contexto, não só um título e um snippet.
Numa olhada
A lista curta.
Realce todos os matches ou só o primeiro
Tag HTML e nome de classe personalizáveis
Sensível ou insensível a maiúsculas
Seguro com unicode e emojis
FAQ
As perguntas que mais ouvimos.
Como difere de uma chamada `replace()` naive?
Um `replace()` com regex corrompe alegremente caracteres multi-byte e produz HTML quebrado. O search-text-highlight percorre a string com consciência de unicode e escapa corretamente os caracteres especiais.
Posso personalizar o wrapper HTML?
Sim. Defina `tag: 'mark'`, `tag: 'span'` ou qualquer nome de tag. Adicione uma classe com `className: 'match'`. A biblioteca é uma primitiva, não um framework.
Trata emojis corretamente?
Sim. Marcas combinantes, sequências ZWJ e emojis multi-code-point são todos tratados. Realçar dentro de sequências de emoji é seguro.
O que é
search-text-highlight é uma utility TypeScript pequena que faz uma coisa bem: devolver uma string haystack com matches de uma query envolvidos em uma tag HTML configurável. Segura com unicode, configurável em case, sem dependências — o tipo de primitiva que toda UI de busca eventualmente precisa.
Por que open source
Porque “realce o substring correspondente” é um problema resolvido, e a solução deveria ser uma pequena biblioteca MIT em vez de outra regex feita em casa em cada codebase. Forke, adapte, contribua.
Como se encaixa no ecossistema
As UIs de busca do Dailybot usam essa biblioteca. Cada vez que você busca um check-in, um relatório ou uma resposta de form, os termos correspondentes voltam realçados por esse mesmo caminho de código. Torná-la open source significa que cada equipe construindo UI de busca pode tomar emprestada a mesma primitiva.
Pronto para experimentar?
Open source, MIT, e em produção no Dailybot todo dia. Forke, conecte, contribua.
Outros open source do Dailybot
Dailybot CLI
O cliente de linha de comando para toda a API do Dailybot.
Dailybot Agent Skill
O adaptador oficial entre seu agente de programação de IA e a API pública do Dailybot.
Deep Work Plan
A metodologia de plano com portões que qualquer agente de programação de IA pode executar.
Site do Deep Work Plan
O site open source de marketing e documentação da metodologia Deep Work Plan.