Introducción a expresiones regulares

Las expresiones regulares son patrones utilizados para coincidir combinaciones de caracteres en cadenas de texto. En JavaScript, las expresiones regulares permiten buscar, reemplazar y manipular texto de forma eficiente y flexible.

Para definir una expresión regular en JavaScript, se pueden emplear dos sintaxis:

• Notación literal: Se encierra el patrón entre barras inclinadas (/), lo que permite una escritura sencilla y directa. Por ejemplo:

    const regex = /hola/;

• Constructor **RegExp**: Se crea una nueva instancia de RegExp pasando el patrón como cadena. Esta forma es útil cuando el patrón se construye dinámicamente. Por ejemplo:

    const pattern = 'hola';
    const regex = new RegExp(pattern);

Las expresiones regulares pueden utilizarse para diversas operaciones, como verificar si una cadena cumple un cierto patrón. Por ejemplo, para comprobar si una cadena contiene sólo letras minúsculas:

const regex = /^[a-z]+$/;
const str1 = "javascript";
const str2 = "JavaScript";

console.log(regex.test(str1)); // true
console.log(regex.test(str2)); // false

En este ejemplo, ^ y $ son anclajes que indican el inicio y fin de la cadena, respectivamente, y [a-z]+ representa una o más letras minúsculas. El método test() devuelve true si la cadena coincide con el patrón.

Las expresiones regulares también permiten buscar y reemplazar texto dentro de cadenas. Por ejemplo, para reemplazar todos los dígitos por asteriscos:

const regex = /\d/g;
const str = "Contraseña123";
const result = str.replace(regex, '*');
console.log(result); // "Contraseña***"

Aquí, \d corresponde a cualquier dígito y el modificador g indica una búsqueda global. El método replace() sustituye todas las ocurrencias que coincidan con el patrón.

Comprender las expresiones regulares es esencial para trabajar con texto en JavaScript, ya que ofrecen una forma potente de analizar y transformar cadenas según patrones específicos. A medida que avancemos en la lección, profundizaremos en los distintos componentes y técnicas para aprovechar al máximo esta herramienta.

Caracteres especiales y cuantificadores

En las expresiones regulares, los caracteres especiales son símbolos que representan conjuntos de caracteres o posiciones específicas en una cadena de texto. Estos caracteres permiten definir patrones más complejos y precisos. A continuación, se presentan los caracteres especiales más comunes:

• . (punto): Representa cualquier carácter excepto saltos de línea.
• \d: Coincide con cualquier dígito numérico del 0 al 9.
• \w: Representa cualquier carácter alfanumérico, incluyendo el guión bajo (_).
• \s: Coincide con cualquier carácter de espacio en blanco, como espacios, tabulaciones o saltos de línea.
• \D: Representa cualquier carácter que no sea un dígito (\d negado).
• \W: Coincide con cualquier carácter que no sea alfanumérico (\w negado).
• \S: Representa cualquier carácter que no sea un espacio en blanco (\s negado).
• \b: Indica un límite de palabra.
• \B: Indica una posición que no es un límite de palabra.

Por ejemplo, para encontrar todas las palabras que comienzan con una letra mayúscula:

const texto = "JavaScript es un Lenguaje de Programación.";
const regex = /\b[A-Z][a-z]*\b/g;
const resultado = texto.match(regex);
console.log(resultado); // ["JavaScript", "Lenguaje", "Programación"]

En este caso, [A-Z][a-z]* busca una letra mayúscula seguida de cero o más letras minúsculas, y \b asegura que se trate de límites de palabra.

Los cuantificadores permiten especificar el número de veces que un elemento puede aparecer en una posición determinada dentro de la cadena. Los cuantificadores básicos son:

• *: Coincide con cero o más repeticiones del carácter o grupo anterior.
• +: Coincide con una o más repeticiones.
• ?: Coincide con cero o una repetición.
• {n}: Coincide exactamente con n repeticiones.
• {n,}: Coincide con n o más repeticiones.
• {n,m}: Coincide con al menos n y como máximo m repeticiones.

Por ejemplo, para validar si una cadena es un número binario de 8 bits:

const binario = "11010101";
const regex = /^[01]{8}$/;
console.log(regex.test(binario)); // true

Aquí, ^[01]{8}$ verifica que la cadena contenga exactamente 8 caracteres que sean 0 o 1.

Los cuantificadores también pueden modificarse para que sean no codiciosos añadiendo un ? después del cuantificador. Por defecto, los cuantificadores son codiciosos, es decir, intentan coincidir con la mayor cantidad de caracteres posible. Al hacerlos no codiciosos, intentan coincidir con la menor cantidad posible. Por ejemplo:

const texto = "<div>Contenido</div><div>Más contenido</div>";
const regexCodicioso = /<div>.*<\/div>/;
const regexNoCodicioso = /<div>.*?<\/div>/;

console.log(texto.match(regexCodicioso)[0]); // "<div>Contenido</div><div>Más contenido</div>"
console.log(texto.match(regexNoCodicioso)[0]); // "<div>Contenido</div>"

En este ejemplo, .* captura todo el contenido hasta el último </div>, mientras que .*? captura hasta el primer </div> debido a su naturaleza no codiciosa.

Es importante escapar los caracteres especiales cuando se desea buscarlos literalmente en el texto. Para ello, se utiliza la barra invertida (\). Por ejemplo, para buscar un punto (.) en una cadena:

const texto = "Versión 3.14.15";
const regex = /\./g;
const resultado = texto.match(regex);
console.log(resultado); // [".", "."]

Aquí, \. indica que se busca el carácter punto y no cualquier carácter.

El uso combinado de caracteres especiales y cuantificadores permite construir expresiones regulares potentes y flexibles para patrones de búsqueda avanzados en JavaScript.

Técnicas avanzadas

En JavaScript, las expresiones regulares pueden aprovechar técnicas avanzadas que permiten construir patrones más poderosos y flexibles. Estas técnicas incluyen grupos de captura y no captura, alternativas con el operador |, aserciones y modificadores.

Grupos de captura y no captura

Los grupos de captura se utilizan para capturar partes específicas de una cadena que coincidan con un patrón dentro de una expresión regular. Se definen encerrando el subpatrón entre paréntesis (). Por ejemplo:

const regex = /(\w+)\s(\w+)/;
const texto = "John Doe";
const resultado = regex.exec(texto);
console.log(resultado[0]); // "John Doe"
console.log(resultado[1]); // "John"
console.log(resultado[2]); // "Doe"

En este ejemplo, el patrón (\w+)\s(\w+) captura dos grupos de palabras separados por un espacio. Los resultados capturados se almacenan en el array devuelto por exec().

Los grupos de no captura permiten agrupar sin almacenar el resultado. Se definen usando (?: ...). Esto es útil para aplicar cuantificadores o alternaciones sin crear un nuevo grupo de captura. Por ejemplo:

const regex = /(?:https?:\/\/)?(www\.\w+\.\w+)/;
const urls = ["https://www.example.com", "www.example.com", "example.com"];

urls.forEach(url => {
  const match = regex.exec(url);
  console.log(match ? match[1] : "No hay coincidencia");
});
// Salida:
// "www.example.com"
// "www.example.com"
// "No hay coincidencia"

Aquí, el grupo (?:https?:\/\/)? es un grupo de no captura que coincide opcionalmente con http:// o https://, sin almacenar esa parte en los resultados.

Alternativas con el operador |

El operador de alternancia | permite definir múltiples opciones en un patrón. Coincide si cualquiera de las alternativas es verdadera. Por ejemplo:

const regex = /manzana|naranja|plátano/;
const texto = "Me gusta el jugo de naranja";
console.log(regex.test(texto)); // true

También es posible combinar alternativas con grupos para patrones más complejos:

const regex = /El (gato|perro) (negro|blanco)/;
const texto = "El perro blanco";
const match = regex.exec(texto);
console.log(match[0]); // "El perro blanco"
console.log(match[1]); // "perro"
console.log(match[2]); // "blanco"

En este caso, el patrón busca frases como "El gato negro", "El perro blanco", etc.

Aserciones

Las aserciones son condiciones que deben cumplirse en una posición específica dentro de la cadena, sin consumir caracteres. Las aserciones más comunes son ^, $, \b, así como lookahead y lookbehind.

• ^: Ancla el inicio de una línea o cadena.
• $: Ancla el final de una línea o cadena.
• \b: Marca un límite de palabra (entre un carácter de palabra y uno que no lo es).

Por ejemplo, para verificar si una cadena comienza con "Hola":

const regex = /^Hola/;
const texto = "Hola mundo";
console.log(regex.test(texto)); // true

Lookahead y Lookbehind

Los lookahead y lookbehind permiten hacer coincidir un patrón solo si va seguido o precedido de otro patrón, sin incluirlo en la coincidencia.

• Lookahead positivo **(?=...)**: Coincide si el patrón siguiente coincide.
• Lookahead negativo **(?!...)**: Coincide si el patrón siguiente no coincide.
• Lookbehind positivo **(?<=...)**: Coincide si el patrón anterior coincide.
• Lookbehind negativo **(?<!...)**: Coincide si el patrón anterior no coincide.

Ejemplo de lookahead positivo:

const regex = /\w+(?=\sis\sbueno)/;
const texto = "JavaScript es bueno";
const match = regex.exec(texto);
console.log(match[0]); // "JavaScript"

En este ejemplo, \w+(?=\sis\sbueno) busca una o más palabras que estén seguidas de " es bueno".

Ejemplo de lookbehind negativo:

const regex = /(?<!No\s)me\sagrada/;
console.log(regex.test("Me agrada")); // true
console.log(regex.test("No me agrada")); // false

Aquí, el patrón coincide con "me agrada" solo si no está precedido por "No ".

Modificadores

Los modificadores o flags alteran el comportamiento de las expresiones regulares. Se colocan al final del patrón, después de la segunda barra inclinada. Los modificadores disponibles en JavaScript son:

• g (global): Busca todas las coincidencias en lugar de detenerse en la primera.
• i (ignore case): Ignora mayúsculas y minúsculas.
• m (multiline): Trata los comienzos (^) y finales ($) de línea de forma multilínea.
• s (dotall): Permite que el . coincida también con caracteres de nueva línea.
• u (unicode): Activa el modo Unicode para manejar correctamente caracteres de múltiples bytes.
• y (sticky): La búsqueda comienza en la posición indicada por la propiedad lastIndex.

Ejemplo del modificador i:

const regex = /javaScript/i;
console.log(regex.test("JavaScript")); // true
console.log(regex.test("javascript")); // true

Con el modificador g, podemos encontrar todas las coincidencias de un patrón:

const regex = /\d+/g;
const texto = "Hay 15 estudiantes y 3 profesores";
const matches = texto.match(regex);
console.log(matches); // ["15", "3"]

El modificador s permite que el punto . coincida con saltos de línea:

const regex = /Inicio.*Fin/s;
const texto = "Inicio\nContenido\nFin";
console.log(regex.test(texto)); // true

Sin el modificador s, el . no coincidiría con los saltos de línea y la expresión regular no encontraría coincidencia.

El modificador u es esencial para manejar correctamente caracteres Unicode como emojis o caracteres especiales:

const regex = /\p{Emoji}/u;
const texto = "Me encanta el café ☕ y la pizza 🍕";
const matches = texto.match(regex);
console.log(matches); // ["☕"]

En este ejemplo, \p{Emoji} es una propiedad de Unicode que permite buscar emojis, y el modificador u activa el modo Unicode.

El modificador y permite búsquedas "pegajosas" (sticky), lo que significa que la búsqueda empieza en la posición indicada por lastIndex y no retrocede:

const regex = /\d+/y;
regex.lastIndex = 5;
const texto = "ID: 12345; Código: 67890";
const match = regex.exec(texto);
console.log(match[0]); // "12345"

Aquí, el patrón busca desde la posición 5 y encuentra "12345".

Comprender y utilizar estas técnicas avanzadas amplía enormemente el poder de las expresiones regulares en JavaScript, permitiendo construir patrones complejos y eficientes para manipular y validar cadenas de texto de manera precisa.

Métodos: Métodos de RegExp (test, exec), Métodos de String con RegExp (match, replace, search, split)

En JavaScript, para trabajar con expresiones regulares, se disponen de métodos tanto en el objeto RegExp como en el objeto String. Estos métodos permiten realizar operaciones de búsqueda, coincidencia, reemplazo y división de cadenas utilizando patrones definidos por expresiones regulares.

Los métodos principales del objeto RegExp son test() y exec(). Estos métodos permiten comprobar si una cadena cumple un cierto patrón y extraer información específica.

El método test() verifica si una expresión regular coincide con una cadena dada y devuelve un valor booleano (true o false). Por ejemplo:

const regex = /JavaScript/;
const cadena = "Me encanta JavaScript";
console.log(regex.test(cadena)); // true

En este ejemplo, regex.test(cadena) devuelve true porque la cadena contiene la palabra "JavaScript" que coincide con el patrón definido.

El método exec() ejecuta una búsqueda de una coincidencia en una cadena y devuelve un array que contiene los detalles de la coincidencia, o null si no hay coincidencia. Por ejemplo:

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const fecha = "La fecha es 2023-10-15";
const resultado = regex.exec(fecha);
console.log(resultado);
// [
//   '2023-10-15',
//   '2023',
//   '10',
//   '15',
//   index: 12,
//   input: 'La fecha es 2023-10-15',
//   groups: undefined
// ]

En este caso, exec() devuelve un array donde el primer elemento es la coincidencia completa, y los siguientes elementos son los grupos de captura definidos en la expresión regular. Este método es útil para extraer partes específicas de una cadena utilizando expresiones regulares complejas.

El objeto String proporciona métodos que aceptan expresiones regulares como argumentos, lo que permite manipular cadenas de forma flexible.

El método match() se utiliza para obtener todas las coincidencias de una expresión regular en una cadena. Dependiendo de si la expresión regular utiliza el modificador g (global), el comportamiento varía. Por ejemplo:

const texto = "Los números son 15, 42 y 7.";
const regex = /\d+/g;
const numeros = texto.match(regex);
console.log(numeros); // ['15', '42', '7']

Aquí, texto.match(regex) devuelve un array con todas las coincidencias numéricas en la cadena.

Si no se utiliza el modificador g, match() devuelve información más detallada de la primera coincidencia:

const regex = /\d+/;
const resultado = texto.match(regex);
console.log(resultado);
// [
//   '15',
//   index: 16,
//   input: 'Los números son 15, 42 y 7.',
//   groups: undefined
// ]

El método replace() permite reemplazar partes de una cadena que coinciden con una expresión regular por otra cadena o por una función que genera la cadena de reemplazo. Por ejemplo:

const texto = "Visita nuestra web en http://ejemplo.com o en https://ejemplo.org";
const nuevoTexto = texto.replace(/https?:\/\/\w+\.\w+/g, "nuestra página");
console.log(nuevoTexto);
// "Visita nuestra web en nuestra página o en nuestra página"

En este ejemplo, se reemplazan todas las URLs por la cadena "nuestra página". La expresión regular /https?:\/\/\w+\.\w+/g coincide con URLs que comienzan con "http://" o "https://".

También es posible utilizar funciones en replace() para generar dinámicamente el texto de reemplazo. Por ejemplo:

const texto = "Producto1 cuesta $5, Producto2 cuesta $10";
const nuevoTexto = texto.replace(/\$(\d+)/g, (match, precio) => {
  const nuevoPrecio = precio * 1.21; // Aplicar IVA del 21%
  return `$${nuevoPrecio.toFixed(2)}`;
});
console.log(nuevoTexto);
// "Producto1 cuesta $6.05, Producto2 cuesta $12.10"

El método search() busca una coincidencia de la expresión regular en la cadena y devuelve el índice de la primera coincidencia, o -1 si no encuentra ninguna. Por ejemplo:

const texto = "El rápido zorro marrón salta sobre el perro perezoso";
const indice = texto.search(/zorro/);
console.log(indice); // 10

Aquí, texto.search(/zorro/) devuelve 10, que es el índice donde comienza la palabra "zorro" en la cadena.

El método split() divide una cadena en un array utilizando un separador que puede ser una expresión regular. Por ejemplo:

const datos = "nombre:Juan;edad:30;profesión:ingeniero";
const arrayDatos = datos.split(/[:;]+/);
console.log(arrayDatos);
// ['nombre', 'Juan', 'edad', '30', 'profesión', 'ingeniero']

En este caso, la expresión regular /[:;]+/ se utiliza como separador, dividiendo la cadena en cada dos puntos (:) o punto y coma (;). El + asegura que si hay varios caracteres consecutivos de los especificados, se traten como un único separador.

Es importante destacar que estos métodos proporcionan una forma eficiente de manipular y analizar cadenas utilizando expresiones regulares en JavaScript. El uso correcto de estas funciones puede simplificar tareas comunes como validación de datos, extracción de información y transformación de texto.

Cuando se trabaja con expresiones regulares y estos métodos, es esencial tener en cuenta los modificadores y los patrones utilizados para asegurarse de que se obtienen los resultados deseados. Además, comprender las diferencias entre los métodos del objeto RegExp y los del objeto String permite elegir la herramienta adecuada para cada situación.