Guía de un principiante de expresiones regulares en JavaScript

Spanish (Español) translation by Santosa (you can also view the original English article)

Todos los que trabajan con JavaScript tendrá que tratar con cadenas en un punto u otro. A veces, sólo deberás almacenar una cadena dentro de otra variable y luego pasarlo. Otras veces, tienes que revisarlo y ver si contiene una subcadena determinada.

Sin embargo, las cosas no son siempre tan fáciles. Habrá momentos cuando usted no busca una subcadena determinada sino un conjunto de subcadenas que siguen un cierto patrón.

Digamos que usted tiene que reemplazar todas las apariciones de "Manzana" en una cadena con "manzanas". Usted podría simplemente utilizar theMainString.replace ("Manzanas", "manzanas"). Agradable y fácil.

Ahora vamos a decir que tienen que sustituir "manzanas" con "manzanas". Del mismo modo, "manzanas" deberían ser "manzanas" demasiado. Básicamente, todas las variantes del caso de "Apple" deben cambiarse a "apple". Pasando cadenas simples como argumento no será práctico o eficiente en estos casos.

Aquí es donde entran las expresiones regulares; puede simplemente usar el indicador i y hacerse con él. Con la bandera en su lugar, no importa si la cadena contiene "Manzanas", "Manzanas", "Manzanas" o "Manzanas". Cada instancia de la palabra se reemplazará con "manzanas".

Al igual que la bandera entre mayúsculas y minúsculas, las expresiones regulares ofrecen un montón de otras características que se tratarán en este tutorial.

Utilizar expresiones regulares en JavaScript

Debe usar una sintaxis ligeramente diferente para indicar una expresión regular dentro de diferentes métodos de Cadena. A diferencia de una cadena simple, que es entre comillas, una expresión regular consiste en un patrón encerrado entre barras. Cualquier banderas que usan en una expresión regular serán agregados después de la segunda barra.

Volviendo al ejemplo anterior, aquí está lo que parecería el método replace() con una expresión regular y una cadena simple.

"I ate Apples".replace("Apples", "apples");
// I ate apples

"I ate Apples".replace(/Apples/i, "apples");
// I ate apples

"I ate aPPles".replace("Apples", "apples");
// I ate aPPles

"I ate aPPles".replace(/Apples/i, "apples");
// I ate apples

Como se puede ver, la expresión regular trabajó en ambos casos. Vamos ahora a aprender más sobre banderas y caracteres especiales que conforman el patrón dentro de una expresión regular.

Barra invertida en expresiones regulares

Puede convertir los caracteres normales a caracteres especiales añadiendo una barra invertida delante de ellos. Del mismo modo, puede convertir caracteres especiales en caracteres normales mediante la adición de una barra invertida delante de ellos.

Por ejemplo, d no es un carácter especial. Sin embargo, \d se utiliza para que coincida con un carácter en una cadena de dígitos. Asimismo, D no es un carácter especial o bien, pero \D se utiliza para que coincida con los caracteres no dígitos de una cadena.

Caracteres dígitos son 0, 1, 2, 3, 4, 5, 6, 7, 8 y 9. Cuando usas \d dentro de una expresión regular, coincidirá con alguno de estos nueve personajes. Cuando se utiliza \D dentro de una expresión regular, coincidirá con todos los caracteres no dígitos.

En el siguiente ejemplo debe aclarar las cosas.

1	"L8".replace(/\d/i, "E");
2	// LE
3
4	"L8".replace(/\D/i, "E");
5	// E8
6
7	"LLLLL8".replace(/\D/i, "E");
8	// ELLLL8

Debe tener en cuenta que sólo el primer carácter emparejado es sustituido en el tercer caso. También puede utilizar banderas para reemplazar a todas las coincidencias. Más adelante aprenderemos sobre dichas banderas.

Al igual que \d y \D, hay otras secuencias del carácter especial también.

Podremos \w coincide con cualquier carácter en una cadena de "palabra". Aquí, el carácter de la palabra se refiere a A-z, a-z, 0-9 y _. Así que, básicamente, coincidirá con todos los dígitos, todos los alfabetos de mayúsculas y minúsculas y subrayado.
Podremos \W coincide con cualquier carácter de palabra no de una cadena. Coincidirá con personajes como %, $, #, ₹, etcetera.
Puede utilizar \s para coincidir con un carácter de espacio en blanco solo, que incluye espacio, tab, forma de alimentación y avance de línea. Asimismo, puede utilizar \S para con todos los otros caracteres además de espacio en blanco.
También puede buscar un carácter de espacio en blanco específico usando \f \n, \r, \t, y vuelta \v, que están parados para la forma de alimentación, línea de alimentación, transporte, horizontal y vertical.

A veces, te enfrentarás a situaciones donde es necesario sustituir una palabra con su sustituto, pero sólo si no es parte de una palabra más grande. Por ejemplo, considere la siguiente frase:

"Un montón de imágenes de piña fueron publicados en la aplicación".

En este caso, queremos sustituir la palabra "app" con el "tablero". Sin embargo, usando un patrón de expresión regular simple se convertirá "manzana" en "boardle", y se convertiría en la última oración:

"Un montón de imágenes de pineboardle fueron publicados en la aplicación".

En tales casos, puede usar otra secuencia de carácter especial: \b. Comprueba por límites de palabra. Un límite de palabra se forma por el uso de cualquier carácter de palabra no como espacio, '$', '%', '#', etcetera. Cuidado, sin embargo, también incluye caracteres acentuados como "ü".

"A lot of pineapple images were posted on the app".replace(/app/, "board");
// A lot of pineboardle images were posted on the app

"A lot of pineapple images were posted on the app".replace(/\bapp/, "board");
// A lot of pineapple images were posted on the board

Asimismo, puede utilizar \B para coincidir con un límite de palabra no. Por ejemplo, podría utilizar \B para sólo coincide con "la aplicación" cuando está dentro de otra palabra, como "piña".

Coincidencia de un patrón "n" número de veces

Usted puede utilizar ^ a JavaScript para buscar sólo en el principio de la cadena para un partido. Asimismo, puede utilizar $ para buscar sólo en el extremo de la cadena de un partido.

Puede utilizar * para que coincida con la expresión anterior 0 o más veces. Por ejemplo, /Ap* / coincidirá con el A, Ap, App, Appp y así sucesivamente.

De manera similar, usted puede usar + para que coincida con la expresión anterior 1 o más veces. Por ejemplo, /Ap +/ coincidirá con el Ap, App, Appp y así sucesivamente. La expresión no coincidirá con la sola A esta hora.

A veces, sólo desea un número específico de ocurrencias de un patrón determinado. En tales casos, debe utilizar la secuencia {n}, donde n es un número. Por ejemplo, /Ap {2} / coincidirá con el App pero no PA. También emparejará los dos primeros ' p en Appp y deja intacta la tercera parte.

Usted puede usar {n,} al menos n apariciones de una expresión dada. Esto significa /Ap {2} / coincidirá con el App pero no PA. También coincidirá todo el ' p en Apppp y reemplazarlos con la cadena de reemplazo.

También se puede utilizar {n, m} para especificar un número mínimo y máximo y limitar el número de veces que debe combinarse la expresión dada. Por ejemplo, /Ap {2,4} / coincidirá con el App, Appp y Apppp. También emparejará los cuatro primeros ' p en Apppppp y deja el resto intacto.

"Apppppples".replace(/Ap*/, "App");
// Apples

"Ales".replace(/Ap*/, "App");
// Apples

"Appppples".replace(/Ap{2}/, "Add");
// Addppples

"Appppples".replace(/Ap{2,}/, "Add");
// Addles

"Appppples".replace(/Ap{2,4}/, "Add");
// Addples

Uso de paréntesis para recordar acerca de los partidos

Hasta ahora, sólo hemos sustituido los patrones con una cadena constante. Por ejemplo, en la sección anterior, el reemplazo que siempre fue "Agregar". A veces, deberás buscar una coincidencia de patrón dentro de la cadena dada y luego sustituirla por parte del patrón.

Digamos que usted tiene que encontrar una palabra con cinco o más letras en una cadena y luego añadir una "s" al final de la palabra. En tales casos, usted no será capaz de usar un valor de cadena constante como un reemplazo como el valor final depende del correspondiente patrón de sí mismo.

"I like Apple".replace(/(\w{5,})/, '$1s');
// I like Apples

"I like Banana".replace(/(\w{5,})/, '$1s');
// I like Bananas

Esto era un ejemplo simple, pero puede utilizar la misma técnica para mantener más de un modelo que hace juego en la memoria. El número de los patrones en el partido completo se determinará por el número de paréntesis utilizado.

Dentro de la cadena de reemplazo, el primer sub-partido se identificará usando $ 1, el segundo sub-partido se identificará usando $ 2, y así sucesivamente. Aquí hay otro ejemplo para aclarar aún más el uso de paréntesis.

1	"I am looking for John and Jason".replace(/(\w+)\sand\s(\w+)/, '$2 and $1');
2	// I am looking for Jason and John

Usando banderas con expresiones regulares

Como mencioné en la introducción, una característica más importante de las expresiones regulares es el uso de indicadores especiales para modificar cómo se realiza una búsqueda. Los indicadores son opcionales, pero puede usarlos para hacer cosas como hacer una búsqueda global o no tener en cuenta las mayúsculas y minúsculas.

Estos son los cuatro indicadores comúnmente utilizados para cambiar la forma en que JavaScript busca o reemplaza una cadena.

g: esta bandera realizará una búsqueda global en lugar de detenerse después de la primera coincidencia.
i: esta bandera realizará una búsqueda sin verificar la coincidencia exacta de mayúsculas y minúsculas. Por ejemplo, Apple, aPPLe y apPLE son tratados de la misma manera durante las búsquedas que no distinguen entre mayúsculas y minúsculas.
m: Esta bandera realizará una búsqueda de múltiples líneas.
y: este indicador buscará una coincidencia en el índice indicado por la propiedad lastIndex.

Aquí hay algunos ejemplos de expresiones regulares usadas con banderas:

"I ate apples, you ate apples".replace(/apples/, "mangoes");
// "I ate mangoes, you ate apples"

"I ate apples, you ate apples".replace(/apples/g, "mangoes");
// "I ate mangoes, you ate mangoes"

"I ate apples, you ate APPLES".replace(/apples/, "mangoes");
// "I ate mangoes, you ate APPLES"

"I ate apples, you ate APPLES".replace(/apples/gi, "mangoes");
// "I ate mangoes, you ate mangoes"


var stickyRegex = /apples/y;
stickyRegex.lastIndex = 3;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate apples, you ate apples"

var stickyRegex = /apples/y;
stickyRegex.lastIndex = 6;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate mangoes, you ate apples"

var stickyRegex = /apples/y;
stickyRegex.lastIndex = 8;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate apples, you ate apples"

Reflexiones finales

El propósito de este tutorial era para presentarle las expresiones regulares en JavaScript y su importancia. Comenzamos con lo básico y cubierto barra invertida y otros caracteres especiales. También aprendimos cómo comprobar para un patrón que se repite en una cadena y cómo recordar parcial coincide con un patrón para usarlos más tarde.

Finalmente, nos enteramos comúnmente utilizados banderas que expresiones regulares aún más poderoso. Usted puede aprender más sobre expresiones regulares en este artículo en MDN.

Si hay algo que usted quisiera hacer en este tutorial, no dude de avisarme en los comentarios.