Expresiones regulares en TypeScript con ejemplos: en la práctica

Expresiones regulares en TypeScript: de la teoría a la práctica

Las expresiones regulares (regex) son una herramienta poderosa para trabajar con cadenas de texto. En TypeScript, no solo permiten realizar búsqueda, reemplazo y validación, sino que también proporcionan un tipado estricto, lo que reduce la cantidad de errores en la etapa de compilación. En este artículo, analizaremos cómo usar expresiones regulares en TypeScript con ejemplos reales: desde la validación de email hasta la extracción segura de datos.

1. Creación y tipado de expresiones regulares

En TypeScript, una expresión regular se puede crear de dos maneras: mediante un literal o el constructor RegExp. La primera forma es preferible, ya que es más corta y no requiere escapar las barras invertidas.

// Literal (forma recomendada)const emailRegex: RegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;

// Constructor (útil para patrones dinámicos)const pattern: string = 'hello';const dynamicRegex: RegExp = new RegExp(pattern, 'gi');

console.log(emailRegex.test('user@example.com')); // trueconsole.log(dynamicRegex.test('Hello, world!')); // true (bandera i ignora mayúsculas/minúsculas)

Observe la anotación de tipo : RegExp. TypeScript infiere automáticamente el tipo para los literales, pero la indicación explícita ayuda a documentar el código.

2. Banderas y su tipado

Las banderas modifican el comportamiento de la expresión regular. En TypeScript, el tipo de las banderas se puede definir mediante un literal de cadena o una enumeración. Veamos las banderas principales:

• g — búsqueda global (no se detiene después de la primera coincidencia);
• i — modo que ignora mayúsculas/minúsculas;
• m — modo multilínea (^ y $ funcionan para cada línea);
• s — el punto coincide con el carácter de nueva línea;
• u — soporte para Unicode;
• y — búsqueda desde la última posición encontrada (sticky).

// Tipado de banderas mediante cadenaconst regexWithFlags: RegExp = /test/gim;

// Verificación de banderasconsole.log(regexWithFlags.flags); // "gim"console.log(regexWithFlags.global); // trueconsole.log(regexWithFlags.ignoreCase); // trueconsole.log(regexWithFlags.multiline); // true

Para banderas dinámicas, use el tipo string, pero es mejor restringirlo a valores permitidos mediante una unión literal:

type RegexFlags = 'g' | 'i' | 'm' | 's' | 'u' | 'y';const flags: RegexFlags = 'gi'; // Error: 'gi' no es una bandera individual// Correcto: pasar una cadenaconst dynamicFlags: string = 'gi';const regex: RegExp = new RegExp('pattern', dynamicFlags);

3. Métodos de RegExp y tipado de resultados

Los métodos principales para trabajar con expresiones regulares en TypeScript son:

• test() — devuelve boolean;
• exec() — devuelve RegExpExecArray | null;
• match() — método de cadena, devuelve RegExpMatchArray | null;
• replace() — reemplaza coincidencias y devuelve una cadena;
• search() — devuelve el índice de la primera coincidencia o -1.

Veamos un ejemplo con exec(), que da acceso a los grupos de captura:

const dateRegex: RegExp = /(\\d{4})-(\\d{2})-(\\d{2})/;const dateStr: string = 'Hoy es 2025-03-15';

const match: RegExpExecArray | null = dateRegex.exec(dateStr);

if (match) {  const [fullMatch, year, month, day] = match;  console.log(`Año: ${year}, Mes: ${month}, Día: ${day}`);  // Salida: Año: 2025, Mes: 03, Día: 15} else {  console.log('Fecha no encontrada');}

Observe que match[0] es la coincidencia completa, y los índices 1, 2, 3 son los grupos de captura. TypeScript infiere correctamente los tipos si se usa la desestructuración.