JS 21: Expresiones Regulares (RegEx)

1. ¿Qué es una Expresión Regular?

Una Expresión Regular (RegExp o RegEx) es un objeto que describe un patrón de caracteres. Se utilizan para realizar búsquedas sofisticadas y sustituciones de texto.

En JavaScript, puedes crear una RegEx de dos formas:

// 1. Literal (Recomendado si es estática)
const regex1 = /patron/flags;

// 2. Constructor (Útil si el patrón es dinámico)
const regex2 = new RegExp('patron', 'flags');

¿Qué significa esto?

Estática (Literal): El patrón es fijo y conocido de antemano. Lo escribes directamente en el código. Es más rápido porque el navegador lo compila una sola vez al cargar la página.
Dinámica (Constructor): El patrón se construye en tiempo de ejecución. Es imprescindible si el patrón depende de una variable, de un valor que viene de una base de datos o de lo que un usuario escribe en un buscador.

// Ejemplo dinámico: buscar una palabra que el usuario elige
let terminoUsuario = "js"; 
let buscadorDinamico = new RegExp(terminoUsuario, "gi");

2. Anatomía de una RegEx

Las RegEx se componen de patrones y flags (modificadores).

Flags Más Importantes

g (global): Busca todas las coincidencias, no solo la primera.
i (insensitive): Ignora mayúsculas/minúsculas.
m (multiline): Permite que ^ y $ funcionen en múltiples líneas.
u (unicode): Soporte completo para caracteres Unicode.

const saludo = "Hola mundo, hola curso";
const buscador = /hola/gi; // Busca "hola" en toda la frase sin importar mayúsculas

3. Sintaxis y Metacaracteres

Los metacaracteres son símbolos con significados especiales dentro de un patrón.

Caracteres de Posición

^: Inicio de la cadena.
$: Fin de la cadena.
\b: Límite de palabra.

Clases de Caracteres

.: Cualquier carácter (excepto salto de línea).
\d: Cualquier dígito (0-9). Igual a [0-9].
\D: Cualquier carácter que NO sea un dígito.
\w: Carácter alfanumérico (A-Z, a-z, 0-9, _).
\W: NO alfanumérico.
\s: Espacio en blanco (espacios, tabs, saltos de línea).
\S: NO espacio en blanco.

Cuantificadores (¿Cuántas veces?)

*: 0 o más veces.
+: 1 o más veces.
?: 0 o 1 vez (opcional).
{n}: Exactamente n veces.
{n,m}: Entre n y m veces.

// Ejemplo: Validar un número de teléfono de 9 dígitos
const telfRegex = /^\d{9}$/;
console.log(telfRegex.test("600123456")); // true

4. Métodos para usar RegEx

Dependiendo de si usas el objeto RegEx o el objeto String, los métodos cambian.

Desde el objeto RegExp

test(string): Devuelve true o false. Ideal para validaciones.
exec(string): Devuelve un array con el detalle de la coincidencia o null.

Desde el objeto String

match(regex): Devuelve un array con las coincidencias.
replace(regex, nuevoTexto): Reemplaza las coincidencias por el nuevo texto.
search(regex): Devuelve el índice de la primera coincidencia.
split(regex): Divide el string usando el patrón como separador.

const texto = "Mi gato tiene 3 años y mi perro 5";
const numeros = texto.match(/\d+/g);
console.log(numeros); // ["3", "5"]

const censurado = texto.replace(/gato|perro/g, "****");
console.log(censurado); // "Mi **** tiene 3 años y mi **** 5"

5. Grupos y Rangos

[abc]: Cualquiera de los caracteres dentro de los corchetes.
[^abc]: Cualquiera que NO esté en los corchetes.
[a-z]: Cualquier carácter en el rango (letras minúsculas).
(x|y): Grupo de captura. Coincide con x o y.
(?:...): Grupo sin captura.

// Ejemplo: Grupo de captura para extraer datos
const fecha = "2026-02-05";
const regexFecha = /^(\d{4})-(\d{2})-(\d{2})$/;
const matches = fecha.match(regexFecha);

console.log("Año:", matches[1]); // 2026
console.log("Mes:", matches[2]); // 02
console.log("Día:", matches[3]); // 05

6. Analizando una RegEx Compleja (Paso a Paso)

Vamos a diseccionar una expresión regular profesional para validar contraseñas fuertes. Entender esto es nivel "Master".

const passRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

Desglose pieza por pieza:

^
Inicio: Asegura que evaluamos desde el principio de la cadena.

(?=.*[a-z])
Lookahead Positivo (Minúscula): "¿Hay alguna minúscula más adelante?". Mra hacia adelante pero no consume caracteres. Si lo cumple, sigue evaluando desde el mismo punto.

(?=.*[A-Z])
Lookahead Positivo (Mayúscula): Desde el mismo inicio (porque el anterior no consumió nada), verifica si hay una mayúscula.

(?=.*\d)
Lookahead Positivo (Número): Verifica si hay al menos un dígito.

[a-zA-Z\d]{8,}
El contenido real: Ahora sí "consume" los caracteres. Solo permite letras y números, y debe haber al menos 8.

$
Fin: Asegura que no haya nada extra al final.

7. Guía de Ejemplos Prácticos "No te dejes nada"

Validación de Email (La "casi" definitiva)

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(emailRegex.test("hola@mundo.com")); // true

Validación de Password Fuerte

Mínimo 8 caracteres, una mayúscula, una minúscula y un número.

const passRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

Limpieza de Espacios en Blanco Extra

const textoSucio = "   Hola    esto   tiene   muchos   espacios   ";
const limpio = textoSucio.trim().replace(/\s+/g, ' ');
console.log(limpio); // "Hola esto tiene muchos espacios"

Extraer URLs de un texto

const textoConLinks = "Visita https://google.com o http://midu.dev para aprender";
const links = textoConLinks.match(/https?:\/\/[^\s]+/g);
console.log(links); // ["https://google.com", "http://midu.dev"]

8. Laboratorio de Ejemplos: Tres Operaciones Clave

1. Comprobar si se cumple (Validación)

Usa .test() cuando solo necesites un sí o un no.

Ejemplo A: Formato de Email

const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(regex.test("usuario@correo.es")); // true

Ejemplo B: Teléfono (9 dígitos empezando por 6, 7 u 9)

const regex = /^[679]\d{8}$/;
console.log(regex.test("600123456")); // true

Ejemplo C: Usuario (Alfanumérico, 4-12 caracteres)

const regex = /^[a-zA-Z0-9]{4,12}$/;
console.log(regex.test("user_123")); // false (por el guion bajo)

Ejemplo D: Color Hexadecimal

const regex = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/;
console.log(regex.test("#34a853")); // true

2. Extraer una coincidencia (Captura)

Usa .match() o grupos de captura () para guardar partes del texto en variables.

Ejemplo A: Extraer todos los números de un texto

const texto = "Pedido: 5 unidades a 10.50€ cada una";
const numeros = texto.match(/\d+(\.\d+)?/g);
console.log(numeros); // ["5", "10.50"]

Ejemplo B: Extraer el dominio de un email

const email = "contacto@miweb.com";
const dominio = email.match(/@(.+)$/)[1];
console.log(dominio); // "miweb.com"

Ejemplo C: Extraer contenido entre comillas

const cita = 'Dijo: "JavaScript es vida" y se fue.';
const contenido = cita.match(/"([^"]+)"/)[1];
console.log(contenido); // "JavaScript es vida"

Ejemplo D: Extraer el código de país de un teléfono (+XX)

const telf = "+34 600000000";
const prefijo = telf.match(/^\+(\d{2})/)[1];
console.log(prefijo); // "34"

3. Eliminar o Reemplazar

Usa .replace() para limpiar strings o anonimizar datos.

Ejemplo A: Eliminar etiquetas HTML

const html = "<p>Hola <strong>Mundo</strong></p>";
const limpio = html.replace(/<[^>]*>/g, '');
console.log(limpio); // "Hola Mundo"

Ejemplo B: Eliminar todo lo que NO sea un número

const tarjeta = "4556-1234-8888-9999";
const soloNumeros = tarjeta.replace(/\D/g, '');
console.log(soloNumeros); // "4556123488889999"

Ejemplo C: Eliminar espacios múltiples

const sucio = "Muchos    espacios     aquí";
const limpio = sucio.replace(/\s+/g, ' ');
console.log(limpio); // "Muchos espacios aquí"

Ejemplo D: Censurar palabras prohibidas

const msg = "Eres un tonto y un feo";
const censura = msg.replace(/tonto|feo/gi, "****");
console.log(censura); // "Eres un **** y un ****"

9. Herramientas Externas para Probar RegEx

Construir expresiones complejas puede ser difícil. Estas herramientas te permiten probar tus patrones en tiempo real con explicaciones paso a paso:

🚀 Regex101
La más completa. Soporta JS, PHP, Python...
🎨 RegExr
Interfaz visual increíble y gran librería de ejemplos.
😈 I Hate Regex
Para cuando no quieres pensar: chuletario visual.
🔍 RegEx Tester
Sencilla, rápida y directa al grano.

⚠️ El Peligro de las RegEx: ReDoS

Una expresión regular mal diseñada puede causar que el navegador se bloquee al intentar procesar ciertas cadenas. Esto se conoce como RegEx Denial of Service (ReDoS). Evita patrones con cuantificadores anidados como (a+)+$.