Herramientas HTML

Gratis Generador de API Custom Highlights

Genere pseudoelementos CSS ::highlight() y objetos Highlight JavaScript para estilizar rangos de texto sin modificar el DOM.

Cargando herramienta...

Qué es Generador de API Custom Highlights?

La Custom Highlights API proporciona una forma de estilizar rangos de texto en el navegador sin modificar el DOM. En lugar de envolver texto en elementos span con estilos inline, crea objetos Range, los recopila en un objeto Highlight y los registra en el registro CSS.highlights con un nombre. El pseudo-elemento ::highlight() aplica entonces estilos a esos rangos. Debido a que los highlights no modifican el DOM, son ideales para efectos visuales transitorios como resaltado de búsqueda, resultados de búsqueda en página y resaltado de sintaxis, donde desea evitar saturar el DOM con envoltorios span temporales.

Respuesta rápida

La Custom Highlights API estiliza rangos de texto arbitrarios mediante CSS sin modificar el DOM. Use CSS.highlights.set() para registrar highlights nombrados y el pseudo-elemento ::highlight() para aplicar estilos. Soporta color, background-color, text-decoration y text-shadow. Chrome 105+, Safari 18.2+ (Baseline 2026). Ideal para búsqueda en página, resaltado de sintaxis y marcadores de resultados de búsqueda con preservación limpia del DOM.

Last updated: 2026-06-02

Limitaciones

Soporte del navegador: Chrome 105+, Edge 105+ y Safari 18.2+. Firefox no soporta la API a partir de la versión 138. Se requiere un respaldo basado en DOM (envoltorio span) para Firefox y otros navegadores no compatibles.
::highlight() soporta un conjunto limitado de propiedades CSS: color, background-color, text-decoration, text-decoration-color, text-decoration-style, text-shadow y propiedades relacionadas con stroke. Propiedades de layout como font-size, padding, margin o display no pueden aplicarse a highlights.
Los highlights no se mantienen automáticamente cuando el DOM cambia. Añadir, eliminar o modificar contenido de texto que se superponga con un rango resaltado invalida el highlight. Debe recrear los highlights después de mutaciones DOM que afecten el texto objetivo.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

Escriba o pegue el contenido de texto en el editor, o use el texto de muestra proporcionado. La herramienta demuestra cómo se aplican los highlights a rangos dentro del texto.
Configure el nombre del highlight (usado para el selector CSS ::highlight()) y los patrones de texto o rangos a resaltar. Elija entre coincidencia de palabras, coincidencia regex o especificación manual de rangos.
Personalice el estilo del highlight: color de fondo, color de texto, radio de borde y opciones de subrayado. El pseudo-elemento ::highlight() soporta un subconjunto de propiedades CSS incluyendo color, background-color, text-decoration y text-shadow.
Copie el JavaScript generado (para crear y gestionar highlights) y CSS (para estilizarlos). La salida incluye un ejemplo autónomo que puede incrustarse directamente en una página web.

Para qué puedes usarla

Implementar resaltado de búsqueda en página que marque todas las ocurrencias de un término de búsqueda sin envolver cada coincidencia en un elemento span y sin interrumpir la estructura DOM existente.
Añadir resaltado de sintaxis a bloques de código en un sitio de documentación creando highlights para palabras clave, cadenas y comentarios basados en coincidencia de patrones regex.
Construir una herramienta de comparación de texto que resalte palabras añadidas, eliminadas y cambiadas entre dos versiones de texto, cada tipo usando un color diferente de ::highlight().

Casos de uso

Ejemplos prácticos

Ejemplo

Resaltado de búsqueda en página

Un sitio de documentación implementa resaltado de búsqueda en vivo. Mientras el usuario escribe en el cuadro de búsqueda, el JavaScript crea objetos Range para cada ocurrencia del término de búsqueda, los registra como un highlight llamado search-match, y el CSS ::highlight(search-match) aplica un fondo amarillo. Cuando el usuario borra la búsqueda, el highlight se elimina llamando a CSS.highlights.delete(). El DOM permanece limpio: no hay elementos span que limpiar.

Ejemplo

Resaltado de sintaxis multicolor

Un visor de fragmentos de código resalta palabras clave en azul, cadenas en verde y comentarios en gris usando tres highlights nombrados separados. JavaScript hace coincidir mediante regex cada categoría de tokens, crea objetos Range y registra tres highlights: keyword-highlight, string-highlight y comment-highlight. Cada highlight tiene su propia regla CSS ::highlight() con un color diferente. El texto de código original en el DOM permanece sin cambios.

Errores comunes

Usar highlights en elementos que no están conectados al DOM: los objetos Range requieren que los elementos objetivo estén en el árbol del documento. Cree highlights después de que el contenido objetivo esté renderizado, típicamente en un handler DOMContentLoaded.
Asumir que ::highlight() soporta todas las propiedades CSS: solo soporta color, background-color, text-decoration, text-shadow y algunas otras propiedades visuales. Propiedades como font-size, padding, margin y display no se aplican a highlights.
Olvidar que los highlights no afectan la selección de texto ni el árbol de accesibilidad: la Custom Highlights API es puramente visual. Los highlights no aparecen en el árbol de accesibilidad, no son anunciados por lectores de pantalla y no afectan el comportamiento de selección de texto.

Verificación

Abra el HTML generado en Chrome 105+. Escriba un término de búsqueda en el campo de entrada y verifique que todas las ocurrencias en el texto muestren el estilo de resaltado (color de fondo, color de texto) sin que aparezcan elementos span en el inspector DOM.
Inspeccione el elemento en Chrome DevTools y verifique que no se hayan añadido elementos span al DOM. Compruebe que CSS.highlights.keys() en la consola devuelva el nombre del highlight registrado y que el pseudo-elemento ::highlight() sea visible en el panel Styles.

FAQ

Preguntas sobre Generador de API Custom Highlights

¿En qué se diferencia la Custom Highlights API de envolver texto en elementos span?

Envolver texto en elementos span modifica el árbol DOM: divide nodos de texto, añade elementos y cambia la estructura del documento, lo que puede romper selectores CSS, operaciones de texto y tecnología de asistencia. La Custom Highlights API crea objetos Range que referencian nodos de texto existentes sin modificar el DOM. Los highlights son invisibles para el árbol de accesibilidad del navegador, los selectores JavaScript y las API de contenido de texto. Esto hace que los highlights sean ideales para efectos visuales transitorios que no deben interferir con la estructura del documento subyacente.

¿Puede ::highlight() estilizar texto que abarca múltiples elementos HTML?

No. Los highlights solo pueden referenciar texto dentro de un único nodo Text. Si el resaltado deseado abarca múltiples elementos (por ejemplo, una frase que comienza en un párrafo y termina en un enlace), debe crear objetos Highlight separados para cada segmento de nodo Text. El código generado maneja esto dividiendo rangos de múltiples elementos en rangos de nodos Text individuales.

¿Qué sucede con los highlights cuando el DOM cambia?

Los highlights están vinculados a objetos Range específicos que referencian nodos Text específicos. Si el DOM cambia (se modifica el contenido de texto, se eliminan elementos o se insertan nuevos nodos), los highlights en los nodos de texto afectados pueden volverse inválidos o desconectarse. La Custom Highlights API no actualiza automáticamente los highlights cuando el DOM cambia. Debe recrear los highlights después de mutaciones DOM que afecten los rangos de texto resaltados.

¿Qué navegadores soportan la Custom Highlights API?

La Custom Highlights API es Baseline 2026, compatible con Chrome 105+, Edge 105+ y Safari 18.2+. Firefox no la soporta a partir de la versión 138. Para resaltado de búsqueda en página, proporcione un respaldo que envuelva texto en elementos span para navegadores no compatibles. El código generado incluye detección de características y una ruta de respaldo opcional.

Herramientas relacionadas