Expresiones regulares en TypeScript: guía completa con ejemplos

Introducción a las expresiones regulares en TypeScript

Las expresiones regulares (regex) son una herramienta poderosa para buscar, reemplazar y validar cadenas. En TypeScript, al igual que en JavaScript, se implementan a través del objeto incorporado RegExp. Sin embargo, TypeScript agrega tipado estricto, lo que hace que trabajar con expresiones regulares sea más seguro y predecible. En este artículo, analizaremos la sintaxis, los métodos, el tipado y ejemplos prácticos del uso de expresiones regulares en TypeScript.

¿Qué es una expresión regular?

Una expresión regular es una secuencia de caracteres que define un patrón de búsqueda. En TypeScript, las expresiones regulares se crean de dos maneras:

• Sintaxis literal: const regex: RegExp = /\\d+/g;
• Constructor RegExp: const regex: RegExp = new RegExp('\\\\d+', 'g');

El segundo método es útil cuando el patrón se forma dinámicamente a partir de variables.

Métodos principales para trabajar con expresiones regulares en TypeScript

1. Método test() — verificar si existe una coincidencia

El método test() devuelve un boolean — si hay una coincidencia en la cadena.

const emailRegex: RegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;const email: string = 'user@example.com';

if (emailRegex.test(email)) {  console.log('Email es válido');} else {  console.log('Email no es válido');}// Salida: Email es válido

2. Método exec() — obtener detalles de la coincidencia

El método exec() devuelve un objeto RegExpExecArray | null. Contiene la coincidencia, los grupos de captura y la posición en la cadena.

const dateRegex: RegExp = /(\\d{2})\\.(\\d{2})\\.(\\d{4})/;const dateString: string = 'Fecha: 15.03.2023';const match: RegExpExecArray | null = dateRegex.exec(dateString);

if (match) {  console.log(`Día: ${match[1]}, Mes: ${match[2]}, Año: ${match[3]}`);  // Salida: Día: 15, Mes: 03, Año: 2023}

3. Método match() — buscar todas las coincidencias en una cadena

El método de cadena match() acepta una expresión regular y devuelve un array de coincidencias o null.

const text: string = '¡Los gatos y las gatas son los mejores!';const catRegex: RegExp = /gat[oa]s?/gi;const matches: RegExpMatchArray | null = text.match(catRegex);

if (matches) {  console.log(matches); // ['gatos', 'gatas']}

4. Método replace() — reemplazar según un patrón

El método replace() reemplaza las coincidencias con la cadena especificada o el resultado de una función.

const phone: string = '+7 (123) 456-78-90';const cleanPhone: string = phone.replace(/[\\s\\-\\(\\)\\+]/g, '');console.log(cleanPhone); // 71234567890

// Reemplazo usando grupos de capturaconst name: string = 'Ivanov Ivan';const reversed: string = name.replace(/(\\w+)\\s(\\w+)/, '$2 $1');console.log(reversed); // Ivan Ivanov

5. Método split() — dividir una cadena

Se puede usar una expresión regular para dividir una cadena en partes.

const data: string = 'manzana;pera,naranja:plátano';const fruits: string[] = data.split(/[;,.:]/);console.log(fruits); // ['manzana', 'pera', 'naranja', 'plátano']

Tipado de expresiones regulares en TypeScript

TypeScript determina automáticamente el tipo de la variable como RegExp al usar la sintaxis literal. Sin embargo, en proyectos complejos puede ser necesaria una anotación de tipo explícita:

// Indicación explícita del tipoconst hexColor: RegExp = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;

// Tipado para una función que devuelve RegExpfunction createUrlRegex(baseUrl: string): RegExp {  return new RegExp(`^${baseUrl}/[a-z]+$`, 'i');}

const myRegex: RegExp = createUrlRegex('https://example.com');console.log(myRegex.test('ht