Expresiones regulares en JavaScript: guía práctica con ejemplos (2026)

Las expresiones regulares (regex) son el lenguaje que usas para describir patrones de texto: “un email”, “una fecha”, “cinco dígitos seguidos”. Dan un poco de miedo por su sintaxis críptica, pero en cuanto entiendes las piezas —metacaracteres, clases, cuantificadores— se vuelven una de las herramientas más poderosas de cualquier desarrollador de JavaScript.

Esta guía es la base teórica que sostiene los métodos que ya has visto en el blog: replace() para sustituir, split() para dividir y match()/matchAll() para extraer. Aquí vas a aprender a construir los patrones que esos métodos consumen. Y como la mejor forma de aprender regex es probando, ten a mano el probador de expresiones regulares para ver cada patrón en acción mientras lees.

1. Cómo se crea una expresión regular en JavaScript

Hay dos formas de crear una regex:

// 1. Literal (entre barras) — la más habitual
const regexLiteral = /\d{4}/;

// 2. Constructor (útil cuando el patrón es dinámico)
const palabra = "gato";
const regexDinamica = new RegExp(`\\b${palabra}\\b`, "g");

Usa el literal siempre que puedas: es más legible y JavaScript lo compila una sola vez. Recurre a new RegExp() solo cuando el patrón se construya a partir de variables (ojo: dentro de un string hay que doblar las barras invertidas, \\d en vez de \d).

2. Los métodos que consumen regex

Una expresión regular por sí sola no hace nada; la aplicas a través de un método. Estos son los cinco que usarás el 99% del tiempo:

Método	Para qué sirve
regex.test(str)	Devuelve true/false: ¿hay coincidencia?
str.match(regex)	Extrae la primera coincidencia (o todas con g)
str.matchAll(regex)	Extrae todas las coincidencias con sus grupos
str.replace(regex, x)	Sustituye lo que coincida
str.split(regex)	Divide la cadena por el patrón

3. Caracteres literales y metacaracteres

La mayoría de caracteres coinciden consigo mismos: /casa/ encuentra “casa”. Pero algunos tienen un significado especial: son los metacaracteres.

. ^ $ * + ? ( ) [ ] { } | \ /

El más famoso es el punto ., que coincide con cualquier carácter (excepto salto de línea):

/c.sa/.test("casa"); // true
/c.sa/.test("cosa"); // true
/c.sa/.test("cusa"); // true

Si quieres buscar un metacarácter literal, lo escapas con \. Por ejemplo, para buscar un punto real:

/\d+\.\d+/.test("3.14"); // true → el \. es un punto literal

4. Clases de caracteres

Los corchetes [] definen un conjunto: coincide con uno cualquiera de los caracteres de dentro.

/[aeiou]/     // una vocal
/[a-z]/       // una letra minúscula (rango)
/[A-Za-z0-9]/ // alfanumérico
/[^0-9]/      // NEGACIÓN: cualquier cosa que NO sea un dígito

Y hay atajos para las clases más comunes:

Atajo	Equivale a	Significado
\d	[0-9]	Un dígito
\w	[A-Za-z0-9_]	Carácter de palabra
\s	espacios, tabs, saltos	Espacio en blanco
\D \W \S	—	La negación de cada uno

5. Cuantificadores: cuántas veces

Los cuantificadores indican cuántas repeticiones del elemento anterior buscas:

Cuantificador	Significa
*	0 o más
+	1 o más
?	0 o 1 (opcional)
{3}	exactamente 3
{2,5}	entre 2 y 5
{2,}	2 o más

/\d{4}/     // exactamente 4 dígitos: "2026"
/colou?r/   // "color" o "colour" (la u es opcional)
/\w+/       // una o más letras/números

Greedy vs lazy

Por defecto los cuantificadores son greedy (voraces): capturan lo máximo posible. Añadiendo ? se vuelven lazy (perezosos) y capturan lo mínimo:

const html = "<b>hola</b>";
html.match(/<.+>/)[0];  // "<b>hola</b>"  → greedy: coge todo
html.match(/<.+?>/)[0]; // "<b>"          → lazy: coge lo mínimo

Este es uno de los conceptos que más confusión causan; pruébalo en el probador de regex para verlo con tus propios ojos.

6. Anclas: dónde debe coincidir

Las anclas no coinciden con caracteres, sino con posiciones:

/^Hola/    // ^ = inicio de la cadena
/adiós$/   // $ = final de la cadena
/^\d{5}$/  // toda la cadena debe ser exactamente 5 dígitos
/\bcasa\b/ // \b = límite de palabra (no "casamiento")

El ancla ^...$ es clave para validación: obliga a que toda la cadena cumpla el patrón, no solo una parte.

7. Grupos y alternancia

Los paréntesis () agrupan y capturan. La barra | funciona como un “o”:

/(gato|perro)/       // "gato" O "perro"
/(ab)+/              // "ab", "abab", "ababab"...

// Grupos con nombre (recomendado)
const m = "2026-07-18".match(/(?<anio>\d{4})-(?<mes>\d{2})/);
m.groups.anio; // "2026"

// Grupo de no captura (?:...) → agrupa sin guardar
/(?:https?):\/\//    // agrupa http/https sin crear un grupo capturado

8. Lookahead y lookbehind

Los lookarounds comprueban lo que hay antes o después sin incluirlo en la coincidencia. Son ideales para validaciones complejas:

// Lookahead positivo (?=...) → "seguido de"
/\d+(?= €)/     // dígitos seguidos de " €", sin capturar el símbolo

// Lookahead negativo (?!...) → "NO seguido de"
/foo(?!bar)/    // "foo" que NO va seguido de "bar"

// Lookbehind (?<=...) → "precedido de"
/(?<=\$)\d+/    // dígitos precedidos de "$"

Un uso clásico: validar una contraseña que tenga al menos una mayúscula, una minúscula y un dígito, usando varios lookahead:

const fuerte = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
fuerte.test("Passw0rd"); // true
fuerte.test("password"); // false

9. Flags: modificadores de comportamiento

Los flags van después de la barra de cierre y cambian cómo actúa toda la regex:

Flag	Nombre	Efecto
g	global	Busca todas las coincidencias, no solo la primera
i	insensitive	Ignora mayúsculas/minúsculas
m	multiline	^ y $ coinciden en cada línea
s	dotAll	El . también coincide con saltos de línea
u	unicode	Interpreta el patrón como Unicode (emojis, \p{...})
d	indices	Añade posiciones de inicio/fin de cada grupo

/hola/gi.test("HOLA mundo"); // true → sin importar mayúsculas
"a1b2c3".match(/\d/g);       // ["1","2","3"] → todas, gracias a g

10. Ejemplos prácticos listos para usar

// Email (validación razonable, no perfecta)
const email = /^[\w.+-]+@[\w-]+\.[\w.-]+$/;

// Teléfono internacional flexible
const telefono = /^\+?[\d\s()-]{7,15}$/;

// URL http/https
const url = /^https?:\/\/[\w.-]+(\.[a-z]{2,})+(\/\S*)?$/i;

// Código postal de México (5 dígitos)
const cp = /^\d{5}$/;

// Extraer todos los hashtags de un texto
const hashtags = "amo #js y #regex".match(/#\w+/g);
// ["#js", "#regex"]

⚠️ Para emails, la validación por regex nunca es 100% completa (el estándar real es enorme). Un patrón sencillo como el de arriba filtra el 99% de los errores de tipeo; para el resto, confirma con un email de verificación.

11. Errores comunes y rendimiento

1. Olvidar escapar metacaracteres. Buscar un punto o un paréntesis literal sin \ cambia el significado del patrón.
2. No usar ^...$ al validar. Sin anclas, /\d{5}/ acepta “abc12345xyz” porque contiene 5 dígitos.
3. test() con flag g en bucle. El objeto regex guarda lastIndex entre llamadas y devuelve resultados alternos; crea la regex donde la uses o quita la g.
4. Backtracking catastrófico. Patrones como /(a+)+$/ sobre entradas largas pueden colgar el navegador. Evita cuantificadores anidados y prefiere clases específicas.
5. Doblar las barras en new RegExp. Dentro de un string, \d debe escribirse \\d.

Con estos bloques —clases, cuantificadores, anclas, grupos y lookarounds— ya puedes leer y escribir la mayoría de expresiones regulares que te cruces. El resto es práctica: cada patrón que construyas te resultará más natural que el anterior.

Conclusión

Las expresiones regulares dejan de dar miedo cuando las ves como lo que son: un conjunto pequeño de bloques (clases, cuantificadores, anclas, grupos y lookarounds) que se combinan. Domínalos y podrás validar, extraer y transformar texto con una potencia que ningún otro método de string te da.

Para aplicar todo esto en tu código:

• JavaScript replace y replaceAll — sustituir texto con tus patrones.
• El método split() — dividir cadenas usando regex como separador.
• match() y matchAll() — extraer coincidencias y grupos.
• Probador de expresiones regulares — construye y depura tus patrones en tiempo real.

¿Cuál es el patrón que siempre tienes que buscar en Google? Guárdalo, y la próxima vez constrúyelo tú desde cero: verás que ya no lo necesitas.