Las expresiones regulares (o regex) son una herramienta para buscar dentro de textos usando patrones.

No importa si es un JSON, un log, o un HTML gigantesco que parece sacado de una pesadilla… si es texto, regex puede meterle mano.

Y aquí viene lo interesante: el HTML es texto.
Así que sí, puedes usar regex para analizarlo, extraer cosas, o hacer scraping rápido sin necesidad de montar un parser completo.

Pero ojo: no es magia infinita. Regex es como un cuchillo afilado, útil… pero si intentas talar un árbol con él, vas a sufrir 😄

La idea básica

Una expresión regular no busca texto exacto… busca patrones.

Por ejemplo:

<img[^>]*>

Esto no busca una imagen específica, busca cualquier etiqueta <img>, sin importar sus atributos.

Es como decir:

“dame todo lo que empiece con <img y termine en > sin cruzarse con otro >”

Tus primeros bloques de construcción

Antes de lanzarnos a cosas más interesantes, necesitas entender un par de piezas clave:

1. Coincidir con cualquier cosa

[\s\S]

Esto literalmente significa:
“cualquier carácter… incluso saltos de línea”

¿Por qué no usar .?
Porque en JavaScript el . no incluye saltos de línea por defecto.
Este truco es como activar el modo “captura todo”.

2. Negar caracteres

[^>]

Esto significa:
“cualquier cosa que no sea >”

Es súper útil en HTML porque te permite moverte dentro de etiquetas sin salirte de ellas.

Cazando etiquetas HTML

Ahora sí, vamos a lo divertido.

Encontrar todas las imágenes

<img[^>]*>

Esto captura cosas como:

<img src="foto.jpg">
<img class="avatar" src="user.png" />

Da igual qué tengan dentro, mientras empiecen con <img.

Encontrar enlaces simples (una sola línea)

<a[^>]*>.*?<\/a>

Aquí pasan varias cosas:

  • <a[^>]*> → abre la etiqueta
  • .*? → captura contenido (modo “flojo”, para no pasarse)
  • <\/a> → cierra la etiqueta

Esto funciona bien para HTML simple:

<a href="https://example.com">Click aquí</a>

Cuando el HTML se pone rebelde

El problema empieza cuando hay saltos de línea o contenido complejo.

Aquí es donde sacas la artillería pesada:

<a[^>]*>(?:(?!(<a[^>]*>|<\/a>))[\s\S])*<\/a>

Sí, se ve intimidante… pero la idea es:

“captura un <a> completo sin tragarte otro <a> dentro”

Esto evita errores cuando hay etiquetas anidadas.

Lo mismo pero con <div>

<div[^>]*>(?:(?!(<div[^>]*>|<\/div>))[\s\S])*<\/div>

Ideal para cuando quieres bloques completos sin que se desmadre el contenido interno.

Casos prácticos reales

Aquí es donde regex empieza a pagar renta.

1. Obtener la meta descripción

<meta[^>]*name=['"]description['"][^>]*>

Te sirve para scraping SEO, por ejemplo.

2. Encontrar el favicon

<link[^>]*rel=['"]icon['"][^>]*>

Útil si estás analizando sitios y quieres detectar branding o assets.

3. Buscar un elemento por ID

<[^>]*id=['"]main['"][^>]*>

Esto encuentra cualquier etiqueta con id=»main».

4. Buscar por clase (aunque esté mezclada)

<[^>]*class=['"][^>]container[^>]['"][^>]*>

Esto detecta elementos que tengan la clase container, incluso si tienen más clases:

<div class="container fluid main-layout">

5. Capturar contenido dentro de un contenedor

<[^>]*class=['"][^>]container[^>]['"][^>]*>[\s\S]*?(<\/[^>]*>)?

Esto ya se mete a nivel “quiero el bloque completo”.

Perfecto para scraping rápido de secciones.

¿Cuándo usar regex para HTML?

Aquí viene la parte honesta:

Regex funciona muy bien cuando:

  • El HTML es simple o controlado
  • Necesitas hacer scraping rápido
  • Estás procesando strings (logs, respuestas, etc.)
  • No quieres cargar un parser completo

Pero se empieza a romper cuando:

  • El HTML es muy complejo o mal formado
  • Hay mucha anidación
  • Necesitas entender la estructura real del DOM

En esos casos, mejor usar herramientas como parsers HTML.

En resumen

  • Regex sirve para encontrar patrones en texto
  • HTML es texto, así que puedes analizarlo con regex
  • Es ideal para tareas rápidas como scraping o validaciones
  • Pero no reemplaza un parser cuando la cosa se complica