search-text-highlight
Encuentra y resalta substrings en texto con un wrapper HTML — soporte completo de unicode.
search-text-highlight es una utilidad TypeScript pequeña que resuelve un problema bien: dado un string haystack y una query needle, devuelve el mismo haystack con los substrings coincidentes envueltos en un tag HTML configurable. Nombre de tag custom, clase custom, toggle de sensibilidad a mayúsculas, comportamiento match-all o match-first, y conciencia completa de unicode. Es la misma librería que usan las UIs de búsqueda propias de Dailybot para resaltar resultados — pequeña, con pocas dependencias, probada en producción.
1
utilidad enfocada, hace una cosa bien
0
dependencias runtime
Completa
seguridad unicode y emoji
MIT
licencia, de punta a punta
Por qué existe
Las piezas que hacen que valga la pena adoptarlo.
Tag wrapper configurable
Envuelve matches en `<mark>`, `<span>`, `<b>` o cualquier tag HTML que quieras. Añade una clase custom para estilos. La librería te da la primitiva, tu CSS hace el resto.
Case-sensitive o case-insensitive
Alterna con un booleano. El match case-insensitive igual preserva el casing original del texto resaltado — no pierdes el contexto del lector.
Match all o match first
A veces quieres resaltar cada ocurrencia de un término; a veces solo la primera. Un flag, cualquier comportamiento.
Seguro con unicode + emoji
Caracteres multi-byte, marcas combinantes y secuencias de emoji se manejan correctamente. No obtendrás familias `👨👩👧` a medio resaltar.
Cero dependencias runtime
TypeScript puro sin deps runtime. El tamaño de bundle es minúsculo; funciona en Node, el navegador y runtimes edge.
MIT + totalmente forkeable
Toda la utilidad es MIT. Forkéala, adapta la sintaxis de wrapper, extiende la estrategia de match — el código y la licencia dicen sí.
Instalación
Empieza en segundos.
Elige el canal que encaje con tu stack. Cada camino te deja en el mismo estado funcional.
npm i search-text-highlightEn la práctica
Lo que los equipos realmente hacen con él.
01
UI de resultados de búsqueda con términos resaltados
El usuario tipea una query en tu buscador. Los resultados se renderizan con los términos envueltos en `<mark>`. Los usuarios ven inmediatamente por qué un resultado hizo match — sin necesidad de cazar el término en un muro de prosa.
02
Matching de command palette / autocomplete
Mientras el usuario tipea, los caracteres coincidentes en la lista de sugerencias se ponen en negrita. La misma función, salida predecible.
03
Búsqueda de historial de chat
La búsqueda del historial de chat de tu app devuelve mensajes con los términos de la query resaltados inline. Los usuarios pueden escanear la parte relevante de un mensaje largo sin releerlo.
04
Búsqueda full-text en sitios de docs
Resultados de búsqueda de sitios estáticos con términos resaltados. El usuario ve la query en contexto, no solo un título y un snippet.
De un vistazo
La lista corta.
Resalta todos los matches o solo el primero
Tag HTML y nombre de clase personalizables
Sensible o insensible a mayúsculas
Seguro con unicode y emojis
FAQ
Las preguntas que más escuchamos.
¿Cómo se diferencia de una llamada `replace()` naive?
Un `replace()` con regex corrompe alegremente caracteres multi-byte y produce HTML roto. search-text-highlight recorre el string con conciencia de unicode y escapa correctamente los caracteres especiales.
¿Puedo personalizar el wrapper HTML?
Sí. Define `tag: 'mark'`, `tag: 'span'` o cualquier nombre de tag. Añade una clase con `className: 'match'`. La librería es una primitiva, no un framework.
¿Maneja emojis correctamente?
Sí. Marcas combinantes, secuencias ZWJ y emojis multi-code-point se manejan todos. Resaltar dentro de secuencias emoji es seguro.
Qué es
search-text-highlight es una utilidad TypeScript pequeña que hace una cosa bien: devolver un string haystack con los matches de una query envueltos en un tag HTML configurable. Segura con unicode, configurable en case, sin dependencias — el tipo de primitiva que toda UI de búsqueda eventualmente necesita.
Por qué open source
Porque “resalta el substring coincidente” es un problema resuelto, y la solución debería ser una pequeña librería MIT en lugar de otra regex hecha en casa en cada codebase. Forkéala, adáptala, contribuye.
Cómo encaja en el ecosistema
Las UIs de búsqueda de Dailybot usan esta librería. Cada vez que buscas un check-in, un reporte o una respuesta de form, los términos coincidentes vienen de vuelta resaltados por este mismo camino de código. Hacerla open source significa que cada equipo construyendo UI de búsqueda puede tomar prestada la misma primitiva.
¿Listo para probarlo?
Open source, MIT, y en producción en Dailybot cada día. Forkéalo, cablealo, contribuye.
Otros open source de Dailybot
Dailybot CLI
El cliente de línea de comandos para toda la API de Dailybot.
Dailybot Agent Skill
El adaptador oficial entre tu agente de codificación de IA y la API pública de Dailybot.
Deep Work Plan
La metodología de plan con puertas que cualquier agente de codificación de IA puede ejecutar.
Sitio de Deep Work Plan
El sitio open source de marketing y documentación de la metodología Deep Work Plan.