Expresiones regulares en JavaScript

Introducción a las expresiones regulares (Regex) en JavaScript

Las expresiones regulares, conocidas comúnmente como regex, son secuencias de caracteres que forman patrones de búsqueda. Son herramientas esenciales en programación para tareas de procesamiento de texto como buscar, editar y manipular datos de tipo string. Las regex se utilizan en diversos campos como validación de datos, análisis sintáctico, resaltado de sintaxis y mucho más.

Por ejemplo, puedes comprobar rápidamente si un string tiene el formato de una dirección de correo electrónico:

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(emailRegex.test("[email protected]")); // true
console.log(emailRegex.test("not-an-email"));    // false

Nota: Este es un patrón simplificado. Para validación en producción, considera reglas más estrictas o bibliotecas especializadas.

Dónde se usan las regex:

• Desarrollo web: validar entradas de formularios, analizar URL y buscar dentro del contenido.
• Análisis de datos: extraer patrones específicos de grandes conjuntos de datos.
• Edición de texto: buscar y reemplazar texto en documentos o bases de código.
• Lenguajes de programación: la mayoría de los lenguajes modernos, incluido JavaScript, admiten regex.

Crear una expresión regular

JavaScript ofrece dos formas de crear una regex, y la diferencia es importante en la práctica.

// 1. Literal syntax — compiled once when the script loads.
const re1 = /\d+/g;

// 2. Constructor — useful when the pattern is built from a variable.
const word = "cat";
const re2 = new RegExp(word + "s?", "i"); // matches "cat" or "cats", case-insensitive

console.log(re1 instanceof RegExp); // true
console.log(re2.source, re2.flags); // cats? i

Usa la forma literal para patrones fijos — es más corta y el motor la compila de antemano. Recurre al constructor RegExp cuando el patrón es dinámico (por ejemplo, construido a partir de la entrada del usuario). Recuerda que en un string debes duplicar la barra invertida: "\\d" en un constructor equivale a \d en un literal.

Cómo las regex se conectan a los strings: los métodos principales

Un patrón solo es útil junto con un método que lo ejecute. Estos son los que usarás a diario.

const text = "The year 2023 follows 2022.";

// test() → boolean: "does it match anywhere?"
console.log(/\d{4}/.test(text)); // true

// String.match() with /g → array of all matches
console.log(text.match(/\d{4}/g)); // [ '2023', '2022' ]

// String.replace() → returns a new string
console.log(text.replace(/\d{4}/g, "YEAR")); // The year YEAR follows YEAR.

// RegExp.exec() → one match at a time, with capture groups
console.log(/(\d{4})/.exec(text)[1]); // 2023

// String.matchAll() → iterator of full match objects (needs /g)
for (const m of text.matchAll(/(\d{4})/g)) {
  console.log(m[0], "at index", m.index);
}
// 2023 at index 9
// 2022 at index 22

Elige el método según la intención: test() para una comprobación de sí/no, match()/matchAll() para extraer datos, y replace() para reescribir texto. El modificador g (global) es lo que convierte "la primera coincidencia" en "todas las coincidencias", por lo que es esencial para las operaciones de match, matchAll y reemplazar-todo.

Lectura de un patrón: bloques de construcción comunes

La mayoría de los patrones se ensamblan a partir de un vocabulario reducido. Este es un ejemplo funcional que usa varios elementos a la vez:

const log = "2023-06-19 ERROR user=42 path=/login";

// \d  digit      \w  word char     \s  whitespace
// .   any char   +   1 or more     [] a set of chars
const match = log.match(/(\d{4}-\d{2}-\d{2})\s+(\w+)\s+user=(\d+)/);

console.log(match[1]); // 2023-06-19  (the date group)
console.log(match[2]); // ERROR       (the level group)
console.log(match[3]); // 42          (the user id group)

Cada (...) es un grupo de captura cuyo texto aparece en el array de resultados. \d, \w y \s son clases de caracteres; los cuantificadores + y {4} indican cuántas veces repetir el token anterior. Combínalos y podrás extraer datos estructurados de texto plano.

Referencia rápida: modificadores y cuantificadores

Errores comunes

Hay algunas sorpresas que confunden a casi todo el mundo al aprender regex en JavaScript:

• Una regex con /g recuerda dónde se detuvo. Cuando reutilizas el mismo objeto RegExp con test() o exec(), avanza lastIndex entre llamadas, por lo que el segundo test() puede devolver false en un string que claramente coincide. Usa un literal nuevo cada vez, o reinicia re.lastIndex = 0.

  const re = /a/g;
  const s = "a";
  console.log(re.test(s)); // true
  console.log(re.test(s)); // false — lastIndex moved past the end

  Copiar

• Los patrones dinámicos deben escapar la entrada del usuario. Si construyes una regex a partir de texto escrito por el usuario, caracteres como . o ( se tratan como especiales. Escápalos primero:

  const escape = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  const userInput = "a.b";
  const re = new RegExp(escape(userInput));
  console.log(re.test("axb"));  // false — the dot is now literal
  console.log(re.test("a.b"));  // true

  Copiar

• Greedy por defecto. .+ captura todo lo que puede; añade ? para hacerlo lazy (.+?). Consulta Cuantificadores greedy y lazy.

Hoja de ruta de aprendizaje

Esta página es la puerta de entrada a la parte de regex del curso. Trabaja los siguientes capítulos en orden para obtener una comprensión completa y práctica:

1. Patrones y modificadores — construcción de patrones y cómo los modificadores (i, g, m, s, u, y) cambian las coincidencias.
2. Clases de caracteres — \d, \w, \s y sus negaciones.
3. Unicode: modificador u y clase \p{...} — manejo de texto multilingüe y emoji.
4. Anclajes: inicio ^ y fin $ de string — coincidencias en los límites.
5. Modo multilínea de anclajes, modificador m — hacer que ^ y $ coincidan en cada línea.
6. Límite de palabra \b — coincidir con palabras completas.
7. Escapar caracteres especiales — usar ., (, ? de forma literal.
8. Conjuntos y rangos [...] — conjuntos de caracteres personalizados.
9. Cuantificadores +, *, ?, {n} — especificar repeticiones.
10. Cuantificadores greedy y lazy — controlar cuánto se captura.
11. Grupos de captura — extraer y nombrar partes de una coincidencia.
12. Backreferences \n y \k<name> — reutilizar texto capturado.
13. Alternancia (OR) | — coincidir con una de varias opciones.
14. Lookahead y lookbehind — aserciones de ancho cero.
15. Backtracking catastrófico — diagnosticar y evitar un rendimiento patológico.
16. Modificador sticky y, búsqueda en posición — coincidencia anclada basada en posición.

Para los métodos que ejecutan estos patrones, consulta el capítulo del objeto RegExp y sus métodos y el de los strings en JavaScript.

Al final de estas lecciones, podrás crear patrones regex eficaces para buscar, validar y transformar texto en JavaScript.