Tema 15 · DOM & UI

15. Regex en el DOM: Resaltador de Búsqueda y Atributo pattern de HTML5

Crea un componente de búsqueda interactivo con resaltado de términos (<mark>) y valida campos nativos con el atributo pattern.

14. Validación de Formularios en el Cliente: Emails, Passwords y Slugs 16. Rendimiento, Ataques ReDoS y Cuándo NO Usar Regex

El Atributo Nativo pattern en HTML5

HTML5 permite validar entradas de usuario directamente en el navegador sin escribir una sola línea de JavaScript mediante el atributo pattern en etiquetas <input>. 

<input type="text" 
       name="codigo_postal" 
       pattern="[0-9]{5}" 
       title="Debe ingresar exactamente 5 dígitos numéricos" 
       required>
💡 Particularidad Clave de pattern en HTML5: El navegador compila el patrón envolviéndolo automáticamente entre anclas implícitas ^(?:patrón)$. No es necesario escribir ^ ni $ al principio o final del atributo.

Resaltado Dinámico de Términos de Búsqueda en la Interfaz

Una de las tareas más comunes en componentes frontend (como barras de búsqueda o tablas de datos) es resaltar en amarillo o con la etiqueta semántica <mark> las palabras que coinciden con la consulta del usuario.

Para implementarlo de forma segura contra inyecciones y fallos de sintaxis, se combina la función escapeRegExp() con str.replace() usando la bandera global e insensible a mayúsculas /gi.

⚡ Resaltador de Búsqueda Dinámico y Máscara de Formateo

Implementa un motor de resaltado de términos de búsqueda con etiquetas <mark> y una función para dar formato visual automático a teléfonos.

dom-regex.js
Solo lectura 
// Función de escape de seguridad para inputs de usuario
function escapeRegExp(cadena) {
  return cadena.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// 1. Componente Resaltador de Términos (Search Highlighter)
function resaltarTexto(textoOriginal, consultaUsuario) {
  if (!consultaUsuario || consultaUsuario.trim() === "") {
    return textoOriginal;
  }

  const terminoSeguro = escapeRegExp(consultaUsuario.trim());
  // Bandera 'gi': global y sin distinguir mayúsculas/minúsculas
  const regex = new RegExp(`(${terminoSeguro})`, 'gi');

  // Envolvemos cada coincidencia en la etiqueta HTML5 semántica <mark>
  return textoOriginal.replace(regex, '<mark class="bg-warning">$1</mark>');
}

const parrafo = "En Kilopolis Academia aprenderás desarrollo frontend con JavaScript, React y Node.js.";

console.log("--- 1. Resaltado de Texto Dinámico ---");
console.log("Consulta: 'javascript'");
console.log(resaltarTexto(parrafo, "javascript"));

console.log("\nConsulta: 'kilopolis'");
console.log(resaltarTexto(parrafo, "kilopolis"));

// 2. Máscara de Formateo de Teléfono en Tiempo Real
function aplicarMascaraTelefono(valor) {
  // 1. Extraemos solo los dígitos
  const digitos = valor.replace(/\D/g, "").slice(0, 10);
  
  // 2. Aplicamos formato (XXX) XXX-XXXX con grupos
  const match = digitos.match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
  if (!match) return valor;

  if (!match[2]) return match[1];
  if (!match[3]) return `(${match[1]}) ${match[2]}`;
  return `(${match[1]}) ${match[2]}-${match[3]}`;
}

console.log("\n--- 2. Máscara de Teléfono Dinámica ---");
console.log("Entrada '300':       ", aplicarMascaraTelefono("300"));
console.log("Entrada '300123':    ", aplicarMascaraTelefono("300123"));
console.log("Entrada '3001234567':", aplicarMascaraTelefono("3001234567"));
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
En el atributo pattern="[0-9]{3}" de un formulario HTML5, ¿por qué no es necesario colocar los caracteres ^ y $?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Regex en JavaScript: Expresiones Regulares & RegExp y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.