Expresiones regulares en JavaScript
Una expresión regular (o regex) es una secuencia de caracteres que podemos usar para seleccionar y manipular ciertos elementos dentro de un string. Por lo tanto, podemos:
-
Buscar un texto en un string
-
Reemplazar fragmentos de 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 normalmente 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 expresión regular. Se recomienda usar patrones inmutables con el literal de forma predeterminada.
El constructor RegExp se puede usar en los casos en los que la expresión regular vaya a cambiar o todavía no la conozcamos (como una entrada).
🏴☠️ Flags
Las expresiones regulares tienen superpoderes opcionales llamados flags que permiten funcionalidades adicionales.
Algunas de las más usadas son:
-
/g - Búsqueda global
-
/i - Insensible a mayúsculas y minúsculas
-
/m - Búsqueda multilínea
Aquí tienes 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 analizar todas las coincidencias posibles dentro de un string. Sin esta funcionalidad, JavaScript solo habría extraído la primera coincidencia de Home.
La flag de insensibilidad a mayúsculas y minúsculas /i nos permite ser flexibles a la hora de encontrar un patrón. De este modo, da igual si lo que buscamos está en UPPERCASE o en lowercase.
Cuando usamos el constructor RegExp, la sintaxis para añadir flags 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 actuales 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 expresiones regulares.
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
Con el método match(), obtenemos un array útil cuyo contenido depende de la presencia o ausencia de las coincidencias encontradas.
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: 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 flag 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 mostradas 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 nuevo valor deseado.
string.replace(searchValue, newValue);
El patrón con el que se busca 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"
Split
El método split() de JavaScript representa otra forma de usar y manipular strings con expresiones regulares.
De este modo, usaremos la expresión regular 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']
Ejercicio de aprendizaje
