Expresiones regulares en

Acerca de Expresiones regulares

Las expresiones regulares en JavaScript

Una expresión regular (o regex) es una secuencia de caracteres que podemos usar para apuntar y manipular ciertos elementos dentro de los strings. Por lo tanto, podemos:

• Buscar un texto en un string
• Reemplazar subcadenas en un string
• Extraer información de un string

Este concepto se centra en usar expresiones regulares en JavaScript. Si quieres aprender a escribir expresiones regulares, Eloquent JavaScript puede ser un buen recurso.

💡 La variante de expresiones regulares de JavaScript forma parte del estándar ECMA-262 del lenguaje. Esto significa que no tienes que preocuparte por la compatibilidad específica de cada navegador.

Cómo crear expresiones regulares

En JavaScript, las expresiones regulares se escriben casi siempre con el formato /pattern/modifiers, donde «pattern» es la expresión regular principal y «modifiers» es una serie de caracteres que podemos añadir para indicar opciones especiales (como superpoderes).

No obstante, tenemos dos formas de crear una expresión regular:

1. Literal de expresión regular:

const regex = /[a-z]/;

1. Constructor RegExp:

const regex = new RegExp('[a-z]');

En ambos casos, JavaScript crea un objeto a partir de la expresión regular. Se recomienda usar patrones inmutables con el literal de forma predeterminada.

El constructor RegExp se puede usar en los casos en que la expresión regular vaya a cambiar o aún no la conozcamos (como una entrada).

🏴‍☠️ Banderas

Las expresiones regulares tienen superpoderes opcionales llamados flags que permiten funcionalidades adicionales. Estas banderas se pueden usar por separado o juntas en cualquier orden, y forman parte de la expresión regular.

Algunas de las más usadas son:

• /g - Búsqueda global
• /i - Sin distinción entre mayúsculas y minúsculas
• /m - Búsqueda multilínea

Aquí tienes un ejemplo sencillo:

const re = /home/gi;
const str = 'Home, sweet home.';

str.match(re);

// => ["Home", "home"]

El carácter g nos permite analizar todas las coincidencias posibles dentro de un string. Sin esta funcionalidad, JavaScript solo habría extraído la primera coincidencia de Home.

La bandera /i, que ignora las mayúsculas y las minúsculas, nos permite ser flexibles a la hora de buscar un patrón. Así, no importa si lo que buscamos está en UPPERCASE o en lowercase.

Cuando usas el constructor RegExp, la sintaxis para añadir banderas es distinta. En este caso, solo necesitas pasar las banderas como segundo argumento.

Funciones de uso común

Cuando combinamos las expresiones regulares con las funciones integradas de JavaScript, disponemos de formas muy potentes de manipular y extraer datos de los strings.

El método test() es una forma estupenda de buscar y saber si un valor concreto existe dentro de un string dado. De este modo, devuelve un valor booleano, true o false.

El método match() extrae la coincidencia de la expresión regular de un string dado. Devuelve un array con información y coincidencias.

¿Cuándo usar uno u otro? Usa test() cuando quieras una forma rápida de comprobar un valor dentro de un string; usa match() si necesitas ese valor o quieres más información sobre la coincidencia.

Test

El método test() ejecuta una búsqueda de coincidencia entre una expresión regular y un string especificado. Devuelve true o false.

const str = 'It is difficult to test if you have a virus';
const result = /virus$/.test(str);

console.log(result);

// => true

Match

Vale, pero ¿y si queremos obtener los valores reales de la búsqueda de la expresión regular?

En lugar de devolver solo un valor booleano, con el método match() obtenemos un array útil cuyo contenido depende de que se encuentren coincidencias o no.

De este modo, podemos tanto buscar como extraer información de cualquier string. Por ejemplo:

const funnyQuote =
  'If you see someone crying, ask if it is because of their haircut.';
const regex1 = /someone/;
const regex2 = /happy/;

funnyQuote.match(regex1);
// => ["someone", index: 3, input: "If you see someone crying, ask if it is because of their haircut.", groups: undefined]

funnyQuote.match(regex2);
// => null

Cuando está presente la bandera de búsqueda global /g, en lugar de obtener la única coincidencia junto con información útil como el índice o la entrada, el método devuelve todas las apariciones presentes en el array:

const funnyQuote =
  'If you see someone crying, ask if it is because of their haircut.';

const regex3 = /if/gi;

funnyQuote.match(regex3);
// => ["If", "if"];

Replace

El método replace() de JavaScript nos permite buscar un valor dentro de un string dado y reemplazarlo por un valor nuevo.

string.replace(searchValue, newValue);

El patrón para buscar la sustitución puede ser un único string o una expresión regular.

let string = 'I like dogs!';
let result = string.replace('dogs', 'cats');

let string = 'I would love to travel to Japan';
let result = string.replace(/Japan/g, 'Hawaii');

Además, podemos aplicar una función en la posición de reemplazo para hacer cambios adicionales en cada valor.

let text = 'Say hello to the chatbot.';
let result = text.replace(/chatbot|hello/gi, function (word) {
  return word.toUpperCase();
});
// => "Say HELLO to the CHATBOT"

💡 Al final, la combinación de expresiones regulares y el método replace() es una forma más dinámica de reemplazar elementos. Usar un único string puede quedarse corto.

Split

El método split() de JavaScript representa otra forma de usar y manipular strings con expresiones regulares.

De este modo, usaremos una regex para dividir un string dado reconociendo un patrón, por ejemplo str.split(/[,.\s]/). Este patrón se usará como separator.

const str = 'hello,user.how are.you';

const result = str.split(/[,.\s]/);

console.log(result);
// => ['hello', 'user', 'how', 'are', 'you']

Rendimiento

En cuanto al rendimiento, ambos crean un objeto RegExp. La principal diferencia es con qué frecuencia se compila la expresión regular:

• Con Regular Expression Literal: una vez durante el análisis y la compilación iniciales del código
• Con la sintaxis de RegExp(): cada vez que se crea un objeto nuevo.

Usar la sintaxis literal puede ser mejor opción no solo por el rendimiento, sino también por su sencillez y legibilidad. Para más detalles, consulta este debate de Stack Overflow.

1. Es más corta y no te obliga a pensar en términos de constructores tipo clase.
2. Cuando usas el constructor RegExp(), también tienes que escapar las comillas y duplicar las barras invertidas. Eso hace que las expresiones regulares, que ya son difíciles de leer y entender por naturaleza, lo sean aún más.