highlightedText

Paquete: @tiendana/ngx-core/pipes

Resalta términos de búsqueda en texto envolviéndolos con <span class="highlighted-text">. Soporta normalización de acentos y mínimo de caracteres.

Características

✅ Búsqueda case-insensitive
✅ Normalización de acentos (opcional)
✅ Mínimo de caracteres configurable
✅ Resaltado con la clase .highlighted-text (el estilo lo define la app)
✅ Manejo seguro de valores null/undefined

API

Sintaxis

{{ text | highlightedText:searchTerm:normalize:minChar }}

Parámetros

Parámetro	Tipo	Descripción	Requerido	Default
searchTerm	string | null | undefined	Término a buscar y resaltar	✅	-
normalize	boolean	Si true, ignora acentos en la búsqueda	❌	false
minChar	number	Mínimo de caracteres para activar el resaltado	❌	2

Retorno

Retorna el texto original con las coincidencias envueltas en <span class="highlighted-text">. Debe usarse con [innerHTML].

Ejemplos y Demos

Uso Básico

Cargando demo...

Ver código

---

Con Normalización

Ignora acentos al buscar (útil para español).

Cargando demo...

Ver código

---

Mínimo de Caracteres

Solo resalta cuando se escriben al menos 3 caracteres.

Cargando demo...

Ver código

---

En Lista de Productos

Combina con searchList para filtrar y resaltar.

Cargando demo...

Ver código

Estilo CSS

Debes definir el estilo para la clase .highlighted-text:

// En tu CSS global o componente
:host ::ng-deep .highlighted-text {
  background-color: yellow;
  font-weight: bold;
  padding: 0 2px;
  border-radius: 2px;
}

// O con variables del design system
:host ::ng-deep .highlighted-text {
  background-color: var(--color-sun);
  color: var(--text-primary);
  font-weight: 600;
}

Casos de Uso

• Buscadores en tablas y listas
• Resaltado de resultados de búsqueda
• Autocompletado con preview
• Búsqueda en documentos o artículos
• Filtros con feedback visual

Notas

innerHTML

Este pipe requiere usar [innerHTML] porque retorna HTML con tags <span>. El pipe no sanitiza ni escapa el texto de entrada: asegúrate de que sea seguro.

El término no se escapa como expresión regular

El término de búsqueda se compila tal cual con new RegExp(term, 'igm'). Caracteres como ( o [ lanzan un error, y un término que puede coincidir con la cadena vacía (por ejemplo a* o a?) deja el pipe en un bucle infinito que congela la pestaña. Escapa el término (por ejemplo con term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')) si el usuario escribe texto libre.

Normalización

La normalización usa removeDiacritics de @tiendana/utils para eliminar acentos. Útil para búsquedas en español.