Expresiones regulares en JavaScript
Una expresión regular (o regex) es una secuencia de caracteres que podemos usar para apuntar a ciertos elementos dentro de los strings y manipularlos. Así, podemos:
-
Buscar un texto en un string
-
Reemplazar subcadenas en un string
-
Extraer información de un string
💡 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, una expresión regular se escribe casi siempre con el formato /pattern/modifiers.
Tenemos dos formas de crear una expresión regular:
-
Literal de expresión regular:
const regex = /[a-z]/;
- Constructor RegExp:
const regex = new RegExp('[a-z]');
En ambos casos, JavaScript crea un objeto a partir de la regex. Se recomienda usar patrones inmutables y tomar el literal como opción predeterminada.
El constructor RegExp se puede usar en casos donde la regex cambiará o todavía no la conocemos (como una entrada).
🏴☠️ Banderas
Las expresiones regulares tienen superpoderes opcionales llamados flags que permiten funcionalidades adicionales.
Algunas de las más usadas son:
-
/g - Búsqueda global
-
/i - Sin distinguir mayúsculas y minúsculas
-
/m - Búsqueda multilínea
Aquí hay un ejemplo sencillo:
const re = /home/gi;
const str = 'Home, sweet home.';
const myArray = str.match(re);
console.log(myArray);
=> // ["Home", "home"]
El carácter g nos permite encontrar 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 de no distinguir mayúsculas y minúsculas nos da flexibilidad al buscar un patrón. Así, no importa si lo que buscamos está en UPPERCASE o en lowercase.
Cuando usamos el constructor RegExp, la sintaxis para agregar banderas es diferente.
let regex = /[a-z]/gi; // literal notation
let regex = new RegExp('[a-z]', 'gi'); // constructor with string pattern as first argument
let regex = new RegExp(/[a-z]/, 'gi'); // constructor with regular expression literal as first argument (Starting with ECMAScript 6)
Funciones más comunes
Cuando combinamos las expresiones regulares con las funciones integradas de JavaScript, tenemos formas muy potentes de manipular y obtener datos de los strings.
Estas son algunas de las funciones más comunes que se usan junto con las regex.
Test
El método test() busca una coincidencia entre una expresión regular y un string determinado. 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
Con el método match() obtenemos un array útil cuyo contenido depende de si se encuentran coincidencias o no.
De esta forma, 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: 11, 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 solo la coincidencia junto con información útil como el índice o la entrada, el método devuelve todas las apariciones 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 determinado y reemplazarlo por el nuevo valor que queramos.
string.replace(searchValue, newValue);
El patrón para buscar la sustitución puede ser un solo 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"
Split
El método split() de JavaScript representa otra forma de usar y manipular strings con expresiones regulares.
De esta forma, usaremos las regex para dividir un string determinado reconociendo un patrón, por ejemplo str.split(/[,.\s]/). Este patrón se usará como el separator.
const str = 'hello,user.how are.you';
const result = str.split(/[,.\s]/);
console.log(result);
// => ['hello', 'user', 'how', 'are', 'you']
Ejercicio de aprendizaje
