Expresiones Regulares en JavaScript: Crea y Usa Regex para Validar Datos

Expresiones Regulares

Las expresiones regulares, son patrones que permiten buscar, extraer y validar cadenas de texto. Se usan para validación de datos como verificar correos electrónicos, números de teléfono, códigos postales, entre otros.

Declarar Expresiones Regulares

Las expresiones regulares pueden ser creadas de dos maneras, usando el constructor RegExp o de manera literal con los delimitadores / /.


const regex = /abc/;                  // Sintaxis literal
const regex = new RegExp('abc');      // Usando constructor

En el ejemplo se busca la secuencia abc en cualquier cadena de texto.

Métodos

Entre los métodos mas usados para el manejo de expresiones regulares se tiene:

Método	Descripción
`exec()`	Ejecuta la búsqueda y devuelve un array con las coincidencias o `null` si no hay resultados.
`test()`	Comprueba si existen coincidencias de la expresión regular en la cadena y devuelve `true` o `false`.
`match()`	Devuelve un array con todas las coincidencias o `null` si no se encuentra ninguna coincidencia.
`search()`	Verifica su hay coincidencia en una cadena y devuelve el índice de la coincidencia o `-1` en caso no haya coincidencias.
`replace()`	Ejecuta la búsqueda por coincidencia en una cadena y reemplaza la subcadena coincidente.

Luego podemos hacer varias pruebas para entender como funcionan estos métodos.


let welcome = "Bienvenido";

/en/.test(welcome);             // true
/es/.test(welcome);             // false
/en/.exec(welcome);             // ['en', index: 2, input: 'Bienvenido', groups: undefined]

welcome.match(/en/);            // ['en', index: 2, input: 'Bienvenido', groups: undefined]
welcome.match(/en/g);           // ['en', 'en']

welcome.search(/en/);           // 2
welcome.search(/es/);           // -1

welcome.replace(/en/, 'xx');    // 'Bixxvenido'
welcome.replace(/en/g, 'xx');   // 'Bixxvxxido'

Sintaxis

Veamos las diferentes formas para usar las expresiones regulares.

Conjunto de caracteres

En expresiones regulares los corchetes [] se usan para definir conjuntos de caracteres, los cuales se buscarán dentro de una cadena.

Conjunto	Descripción
`[aeiou]`	Conjunto de caracteres específicos. Ejemplo: `/[aeiou]/` coincidirá con cualquier vocal minúscula.
`[a-z]`	Se usa `-` para definir un rango de caracteres. Ejemplo: `/[a-z]/` coincide con cualquier letra minúscula desde la a a la z.
`[^a-z]`	Se usa `^` al inicio para excluir caracteres. Ejemplo: `/[^a-z]/` coincide con cualquier carácter que no sea un dígito.
`[a-zA-Z0-9]`	Se concatenan conjuntos colocando uno después de otro. Ejemplo: `/[a-zA-Z0-9]/` coincide con letras mayúsculas, minúsculas y dígitos.

Grupo de caracteres

Para mejorar las búsquedas se usan los paréntesis () lo cuales indican que todo el conjunto dentro del paréntesis deben estar en la cadena.

Grupo	Descripción
`(abcd)`	Busca el grupo completo y en el mismo orden. Ejemplo: `/(2024)/` coincidirá si la cadena contiene 2024.
`(op1\|op2)`	Se usa `\|` para definir opciones, se requiere coincidir con una de las opciones. Ejemplo: `/(hola\|hello)/` coincide si la cadena tiene la palabra hola o hello.

Caracteres especiales

Se pueden usar caracteres especiales que permiten simplificar las coincidencias:

Carácter	Descripción	Ejemplo
`.`	Coincide con cualquier carácter	`/a.c/` → axc
`^`	Indica el inicio de una cadena	`/^abc/` → abcdef
`$`	Indica el final de una cadena	`/def$/` → abcdef
`+`	Uno o más de la expresión anterior	`/ab+/` → abbc
`*`	Cero o más de la expresión anterior	`/ab*/` → abc
`\d`	Coincide con cualquier dígito (0-9)	`/\d+/` → 123
`\w`	Coincide con caracteres alfanuméricos	`/\w+/` → abc
`\s`	Coincide con cualquier espacio en blanco	`/\s/`
`{n,m}`	Entre n y m repeticiones	`/a{2,4}/` → aaa

Flags adicionales

Para configurar la busqueda se pueden usar flags adicionales al final de la expresión regular:

var re = /pattern/flags;

Entre los flags mas usados se tienen:

Bandera	Descripción
`g`	Búsqueda global, busca todas las coincidencias del string.
`i`	Búsqueda que no diferencia entre mayúsculas y minúsculas.
`m`	Búsqueda multilínea, la cadena se trata como cadena multilínea.

Por ejemplo, para buscar todas las coincidencias de un cadena:


let welcome = "Bienvenido";

welcome.match(/en/);            // ['en', index: 2, input: 'Bienvenido', groups: undefined]
welcome.match(/en/g);           // ['en', 'en']

Para buscar si una cadena contiene el texto sin distinguir mayusculas y minusculas:


let welcome = "Bienvenido";

welcome.search(/bienvenido/);    // 0
welcome.search(/bienvenido/i);   // -1

Ejemplos

Validar Correo Electrónico

Para validar un correo electrónico address@domain.extension lo podemos separar en tres partes:

Parte	Descripción	RegExp
`address`	Letras, números y los caracteres: `.`, `-`, `_`, `%` y `+`	`^[a-zA-Z0-9._%+-]+`
`domain`	Letras, números y los caracteres `-` y `.`	`[a-zA-Z0-9.-]+`
`extension`	Sólo letras y debe ser de 2 o mas caracteres.	`[a-zA-Z]{2,}$`

Uniendo las tres partes de la expresión regular tenemos:


const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

emailRegex.test('demo@demo.com');             // true
emailRegex.test('user-name@domain.org');      // true
emailRegex.test('demo@demo.c');               // false
emailRegex.test('@demo@demo.net');            // false

Validar Número de Teléfono

Los números de teléfono incluyendo el código del país tienen el formato (XXX) XXX-XXXX, lo separamos en 2 partes:

Parte	Descripción	RegExp
`(XXX)`	Código del país, debe tener siempre 3 digitos.	`^$\d{3}$`
`XXX-XXXX`	Contiene 2 grupos de 3 y 4 dígitos separados por un `-`.	`\d{3}-\d{4}$`

Uniendo las 2 partes tenemos la expresión regular para validar números de teléfono:


const phoneRegex = /^\(\d{3}\) \d{3}-\d{4}$/;

phoneRegex.test('(123) 456-7890');    // true
phoneRegex.test('(13) 456-7890');     // false
phoneRegex.test('(123) 456-780X');    // false

Validar Contraseña Segura

Para que una contraseña se considere como segura debe cumplir las siguientes condiciones:

(?=.*[0-9]): indica que debe contener al menos un número.
(?=.*[a-z]): indica que debe contener al menos una letra minúscula.
(?=.*[A-Z]): indica que debe contener al menos una letra mayúscula.
(?=.*\W): Indica que debe contener al menos un caracter especial.
.{8,16}: indica que debe tener al menos 8 caracteres.


const passwordRegex = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*\W)(?!.* ).{8,}$/;

passwordRegex.test('Password123');    // false
passwordRegex.test('Password123#');   // true
passwordRegex.test('256x34$2drZZ');   // true

Recomendaciones

Escapa los caracteres especiales: puedes escapar los caracteres especiales anteponiendo \, por ejemplo si quieres buscar el punto debes usar \.
Usa agrupamiento: puedes agrupar las reglas usando () lo que permite agrupar patrones y aplicar operadores.
Pruebas: usa herramientas como regex101 o RegExr para probar tus expresiones regulares o buscar patrones que ha creado la comunidad.

Conclusión

Las expresiones regulares ayudan a validar datos antes de enviarlos al servidor. Usando expresiones regulares puedes crear patrones personalizados que se adapten a tus necesidades de validación.