Expresiones regulares (RegEx) en JavaScript: Guía Completa para Principiantes

Las expresiones regulares, comúnmente conocidas como regex en JavaScript o regex in JavaScript, son un poderoso lenguaje de patrones que permite buscar, coincidir y manipular texto de forma eficiente. Son una herramienta esencial para cualquier desarrollador JavaScript que trabaje con texto, ya sea para validación de datos, extracción de información o la transformación de cadenas.

Este manual completo para principiantes te guiará a través de los conceptos fundamentales de las regex en JavaScript, desde la sintaxis básica hasta las técnicas avanzadas. Aprenderás cómo crear, usar y entender expresiones regulares, y cómo aplicarlas en tus proyectos de desarrollo.

Introducción a las expresiones regulares

Las regex en JavaScript son patrones que describen secuencias de caracteres. Se usan para buscar y manipular texto en función de reglas específicas. Estas reglas se escriben utilizando una sintaxis especializada, que define qué caracteres o combinaciones de caracteres se consideran una coincidencia.

Creando expresiones regulares

Puedes crear regex en JavaScript de dos maneras principales:

1. Notación literal:

javascript
const regex = /patrón/;


En esta sintaxis, la expresión regular se encierra entre barras inclinadas (/). Puedes crear patrones simples o complejos utilizando esta notación.

2. Constructor RegExp:

javascript
const regex = new RegExp('patrón');


El constructor RegExp te permite crear expresiones regulares a partir de cadenas. Esta opción es útil para generar patrones dinámicamente.

Patrones básicos de RegEx

Los patrones de RegEx se basan en caracteres literales y caracteres especiales que representan conjuntos de caracteres o reglas. Aquí hay algunos ejemplos:

Caracteres literales:

• a: Coincide con la letra «a».
• 123: Coincide con la secuencia «123».

Caracteres especiales:

• .: Coincide con cualquier carácter.
• d: Coincide con cualquier dígito (0-9).
• s: Coincide con cualquier espacio en blanco (espacio, tabulador, salto de línea).
• w: Coincide con cualquier carácter alfanumérico (letras, números y guiones bajos).

Métodos de JavaScript para trabajar con RegEx

JavaScript proporciona varios métodos para trabajar con expresiones regulares:

1. test(): Verifica si una cadena coincide con una expresión regular. Devuelve true si hay coincidencia, false de lo contrario.

javascript
const regex = /hola/;
const cadena = "Hola mundo!";
console.log(regex.test(cadena)); // true


2. exec(): Busca la primera coincidencia en una cadena y devuelve un objeto con información sobre la coincidencia. Si no se encuentra una coincidencia, devuelve null.

javascript
const regex = /d+/;
const cadena = "El número es 123";
const resultado = regex.exec(cadena);
console.log(resultado); // { 0: '123', index: 11, input: 'El número es 123', groups: undefined }


3. match(): Devuelve un array con las coincidencias encontradas en una cadena. Si no se encuentra ninguna coincidencia, devuelve null.

javascript
const regex = /w+/g;
const cadena = "Hola mundo!";
const resultado = cadena.match(regex);
console.log(resultado); // ['Hola', 'mundo']


4. matchAll(): Devuelve un iterador que produce las coincidencias encontradas en una cadena.

javascript
const regex = /d+/g;
const cadena = "El número es 123";
const resultado = cadena.matchAll(regex);
for (const match of resultado) {
console.log(match); // ['123', index: 11, input: 'El número es 123', groups: undefined]
}


5. search(): Busca la primera coincidencia en una cadena y devuelve el índice de la coincidencia, o -1 si no se encuentra.

javascript
const regex = /mundo/;
const cadena = "Hola mundo!";
const resultado = cadena.search(regex);
console.log(resultado); // 6


6. replace(): Reemplaza las coincidencias encontradas en una cadena con una nueva cadena.

javascript
const regex = /mundo/;
const cadena = "Hola mundo!";
const resultado = cadena.replace(regex, "planeta");
console.log(resultado); // Hola planeta!


7. replaceAll(): Reemplaza todas las coincidencias encontradas en una cadena con una nueva cadena.

javascript
const regex = /d+/g;
const cadena = "El número es 123";
const resultado = cadena.replaceAll(regex, "XXX");
console.log(resultado); // El número es XXX


8. split(): Divide una cadena en un array de subcadenas utilizando una expresión regular como delimitador.

javascript
const regex = / /;
const cadena = "Hola mundo!";
const resultado = cadena.split(regex);
console.log(resultado); // ['Hola', 'mundo!']


Argumentos de expresiones regulares

Las expresiones regulares pueden tener argumentos que modifican su comportamiento. Los argumentos más comunes son:

1. i (Ignorar mayúsculas/minúsculas): Hace que la coincidencia sea insensible a las mayúsculas y minúsculas.

javascript
const regex = /hola/i;
const cadena = "Hola mundo!";
console.log(regex.test(cadena)); // true


2. g (Búsqueda global): Encuentra todas las coincidencias en una cadena, en lugar de solo la primera.

javascript
const regex = /d+/g;
const cadena = "El número es 123";
const resultado = cadena.match(regex);
console.log(resultado); // ['123']


3. u (Unicode): Permite la correcta gestión de caracteres Unicode en expresiones regulares.

javascript
const regex = /é/u;
const cadena = "café";
console.log(regex.test(cadena)); // true


Anclas y cuantificadores

Anclas:

• ^: Coincide con el inicio de la cadena.
• $: Coincide con el final de la cadena.

Cuantificadores:

• +: Coincide con uno o más caracteres.
• ?: Coincide con cero o un carácter.
• *: Coincide con cero o más caracteres.
• {n}: Coincide con exactamente n caracteres.
• {n,m}: Coincide con al menos n y como máximo m caracteres.
• {n,}: Coincide con al menos n caracteres.

Conjuntos y rangos de caracteres

Conjuntos de caracteres:

• [abc]: Coincide con «a», «b» o «c».
• [^abc]: Coincide con cualquier carácter excepto «a», «b» o «c».

Rangos de caracteres:

• [a-z]: Coincide con cualquier letra minúscula.
• [0-9]: Coincide con cualquier dígito.
• [A-Za-z]: Coincide con cualquier letra, tanto mayúscula como minúscula.

Clases predefinidas

JavaScript incluye clases predefinidas para representar conjuntos de caracteres comunes:

• d: Coincide con cualquier dígito (0-9).
• s: Coincide con cualquier espacio en blanco (espacio, tabulador, salto de línea).
• w: Coincide con cualquier carácter alfanumérico (letras, números y guiones bajos).

Escapar caracteres especiales

Algunos caracteres especiales en RegEx tienen un significado especial. Para usar estos caracteres como literales, debes escaparlos con una barra invertida ().

• .: Coincide con un punto literal.
• *: Coincide con un asterisco literal.
• +: Coincide con un signo más literal.

Grupos de captura

Los grupos de captura permiten capturar partes específicas de una coincidencia. Se definen encerrando una parte de la expresión regular entre paréntesis (()).

Grupos nombrados:

javascript
const regex = /(?<nombre>w+)s+(?<apellido>w+)/;
const cadena = "Juan Pérez";
const resultado = regex.exec(cadena);
console.log(resultado.groups.nombre); // Juan
console.log(resultado.groups.apellido); // Pérez


Grupos no capturados:

javascript
const regex = /(?:w+)s+(w+)/;
const cadena = "Juan Pérez";
const resultado = regex.exec(cadena);
console.log(resultado[1]); // Pérez


Alternación de RegEx

La alternación se usa para crear patrones que coincidan con una de varias opciones. Se representa con el símbolo |.

javascript
const regex = /gato|perro|pájaro/;
const cadena = "El gato es mi mascota";
console.log(regex.test(cadena)); // true


Anticipación y retrospectiva

Anticipación:

• (?=patrón): Coincide solo si el patrón sigue al carácter actual.

javascript
const regex = /a(?=b)/;
const cadena = "abc";
console.log(regex.test(cadena)); // true


Anticipación negativa:

• (?!patrón): Coincide solo si el patrón no sigue al carácter actual.

javascript
const regex = /a(?!b)/;
const cadena = "ac";
console.log(regex.test(cadena)); // true


Retrospectiva:

• (?<=patrón): Coincide solo si el patrón precede al carácter actual.

javascript
const regex = /(?<=b)c/;
const cadena = "abc";
console.log(regex.test(cadena)); // true


Retrospectiva negativa:

• (?<!patrón): Coincide solo si el patrón no precede al carácter actual.

javascript
const regex = /(?<!b)c/;
const cadena = "ac";
console.log(regex.test(cadena)); // true


Ejemplos prácticos

Validación de contraseñas:

javascript
const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[!@#$%^&*()_+])[A-Za-zd!@#$%^&*()_+]{8,}$/;


Validación de correos electrónicos:

javascript
const regex = /^[^s@]+@[^s@]+.[^s@]+$/;


Formateo de números de teléfono:

javascript
const regex = /^(?(d{3}))?[-. ]?(d{3})[-. ]?(d{4})$/;


Consejos y buenas prácticas para usar RegEx

• Prueba tus expresiones regulares: Hay herramientas online y extensiones de IDE que te permiten probar RegEx en tiempo real.
• Optimiza tus expresiones regulares: Evita patrones complejos y repetitivos.
• Documenta tus expresiones regulares: Deja claro el propósito y el funcionamiento de cada patrón.
• Divide patrones complejos en subpatrones: Esto facilita la lectura, depuración y mantenimiento.
• Utiliza herramientas de análisis de RegEx: Estas herramientas te ayudan a comprender y analizar expresiones regulares complejas.

Conclusión

Las regex en JavaScript son una herramienta poderosa para trabajar con texto. Dominar las regex in JavaScript te permitirá procesar y manipular datos de forma eficiente.

Con el conocimiento adquirido en este manual, estarás preparado para crear y usar expresiones regulares en tus proyectos de desarrollo. Recuerda que la práctica constante y la experimentación son claves para convertirte en un experto en RegEx.