Tutorial de expresión regular

Como sabe, JavaScript tiene muchos métodos útiles que pueden verificar si una cadena contiene una determinada letra o frase. Por ejemplo, las siguientes expresiones muestran true en función de lo que están buscando:

'JavaScript'.startsWith('J');
'Computer Science'.endsWith('Science');
'Search & Sort Algorithms'.includes(' ');

Estos métodos se limitan a coincidencias directas, así que ¿qué sucede si su búsqueda de cadena debe ser más abarcadora y dinámica? Por ejemplo, es posible que desee encontrar cadenas que contengan la palabra “Ordenar”, pero no “Ordenación”. O bien, podría querer encontrar instancias de “Ciencia de la computación” donde los espacios entre “Ciencia”, “de”, “la” y “computación” pueden ser cualquier carácter no alfanumérico. En casos como estos, podría escribir enunciados if adicionales para lidiar con los casos extremos o podría recurrir a expresiones regulares.

Las expresiones regulares, o regex para abreviar, son una serie de caracteres especiales que definen un patrón de búsqueda. Tome el siguiente ejemplo de una expresión regular, que llamaremos “Hacer coincidir un nombre de usuario”:

/^[a-z0-9_-]{3,16}$/

Esta serie de caracteres puede parecer sin sentido, pero en realidad es un patrón de búsqueda destinado a la validación básica del nombre de usuario. Es decir, verifica si una cadena cumple con los requisitos para un nombre de usuario básico. En pocas palabras, así es como se desglosa (lo exploraremos en mayor detalle más adelante):

• La cadena puede contener cualquier letra minúscula entre a y z

• La cadena puede contener cualquier número entre 0 y 9

• La cadena puede contener un guión o guión bajo

• La cadena tiene entre 3 y 16 caracteres

Con frecuencia, las expresiones regulares pueden parecer un lenguaje muy particular, pero de hecho son universales y pueden usarse en todos los lenguajes de programación. Analicemos la expresión regular anterior “Hacer coincidir un nombre de usuario” para explorar los componentes de la expresión regular en general.

Componentes de la expresión regular

Una expresión regular se considera un literal, por lo que el patrón debe estar entre caracteres de barra diagonal (/). Si examinamos la expresión regular “Hacer coincidir un nombre de usuario”, verá que esto es cierto:

/^[a-z0-9_-]{3,16}$/

Nota: JavaScript proporciona dos maneras de crear un objeto de expresión regular. El primero, que se muestra en nuestro ejemplo, utiliza la notación literal. El segundo es usar un constructor RegExp. Los parámetros de la función de constructor no están encerrados dentro de barras diagonales; en su lugar, utilizan comillas. Para obtener más información, revise los MDN Web Docs acerca del objeto RegExp.

Ahora veamos los componentes de una expresión regular.

Anclajes

Los caracteres ^ y $ se consideran anclajes.

El anclaje ^ significa una cadena que comienza con los caracteres que la siguen. Esto podría estar en uno de dos formatos:

• Una coincidencia de cadena exacta, como ^The, donde las cadenas "The" o "The person" coinciden, pero "the" y "the person" no. Esto se debe a que una expresión regular distingue entre mayúsculas y minúsculas.

• Un rango de coincidencias posibles, que se muestra usando expresiones en corchetes. Analizaremos esto en la siguiente sección.

El anclaje $ significa una cadena que termina con los caracteres que la preceden. Al igual que con el carácter ^, puede estar precedido por una cadena exacta o un rango de posibles coincidencias.

Por lo tanto, en nuestra expresión regular “Hacer coincidir un nombre de usuario”, la cadena debe comenzar y finalizar con algo que coincida con el patrón [a-z0-9_-]. Notará que no incluimos el patrón {3,16}, que precede al carácter $. ¿Por qué? Porque este es un componente especial llamado cuantificador. Volveremos a los cuantificadores en un momento.

Veamos el patrón [a-z0-9_-] y veamos lo que significa.

Expresiones entre corchetes

Cualquier cosa dentro de un conjunto de corchetes cuadrados ([]) representa un rango de caracteres que queremos coincidir. Estos patrones se conocen como expresiones entre corchetes, pero también se conocen como un grupo de caracteres positivos, porque describen los caracteres que queremos incluir. Podemos escribir estas expresiones para incluir todos los caracteres que queremos combinar. Por ejemplo, [abc] buscará una cadena que incluya a o b o c, independientemente de la longitud de la cadena. Por lo tanto, todos los siguientes ejemplos coincidirían: "aaa", "bin" "court", "abracadabra" y "bca".

Verá más comúnmente un guión (-) utilizado entre caracteres alfanuméricos (letras y números solamente) para representar un rango de esos posibles caracteres. Esto significa que [a-c] y [abc] buscará exactamente lo mismo.

En nuestro ejemplo de expresión regular “Hacer coincidir un nombre de usuario”, podemos desglosar las expresiones entre corchetes de la siguiente manera:

• [a-z]—La cadena puede contener cualquier letra minúscula entre a y z. Tenga en cuenta que esto solo busca caracteres en minúscula. Si queríamos incluir caracteres en mayúscula, tendríamos que cambiar la expresión a [a-zA-Z].

• [0-9]—La cadena puede contener cualquier número entre 0 y 9

• [_-]—La cadena puede contener un guión o guión bajo. Tanto el guión bajo como el guión se denominan caracteres especiales. Los caracteres especiales incluyen cualquier carácter no alfanumérico, como puntuación o símbolos. En este caso, solo queremos una cadena que incluya _ o -. Es importante tener en cuenta que el guión aquí no es el mismo que usamos en nuestros rangos alfanuméricos. En las expresiones entre corchetes, los caracteres especiales que queremos incluir siguen los rangos de caracteres alfanuméricos entre corchetes.

Si juntamos todas estas expresiones para que nuestro patrón sea [a-z0-9_-], esto coincidirá con cualquier cadena que incluya cualquier combinación de letras minúsculas entre a y z, cualquier número entre 0 y 9, y los caracteres especiales de un guión bajo o un guión. Tenga en cuenta que estos caracteres pueden estar en cualquier orden. También es importante tener en cuenta que este patrón no requiere que la cadena cumpla todos estos requisitos; puede cumplir cualquiera de ellos.

Los siguientes ejemplos cumplen con los requisitos de esta expresión regular:

• "lernantino"

• "lernantino1"

• "l3rnantino_1"

• "lern-antino"

• "21452"

• "_-_-"

¿Qué sucede con la cadena "Lernantino"? Esta no coincidiría con nuestro patrón porque incluye un carácter en mayúscula, L.

Es importante tener en cuenta que una expresión entre corchetes se puede convertir en un grupo de caracteres negativos agregando el símbolo ^ al comienzo de la expresión dentro de los corchetes. Un ejemplo común es hacer coincidir una cadena que no incluye vocales. El patrón [^aeiouAEIOU] encontraría cualquier cadena que no incluya vocales en minúscula o mayúscula.

Cuantificadores

Bien, ahora sabemos lo que estamos buscando dentro de los corchetes. ¿Qué sucede con el último requisito de expresión regular ("tiene entre 3 y 16 caracteres de largo")? ¿Y qué sucede con esa extraña secuencia de caracteres que apareció antes del anclaje $ ({3,16})? Para responder estas preguntas, veamos los cuantificadores.

Los cuantificadores establecen los límites de la cadena que coincide con su expresión regular (o una sección individual de la cadena). Con frecuencia incluyen el número mínimo y máximo de caracteres que su expresión regular está buscando.

Los cuantificadores son inherentemente codiciosos, lo que significa que coinciden con la mayor cantidad posible de casos de patrones particulares. Incluyen lo siguiente:

• *—Coincide con el patrón cero o más veces

• +—Coincide con el patrón una o más veces

• ?—Coincide con el patrón cero o una vez

• {}—Las llaves pueden proporcionar tres formas diferentes de establecer límites para una coincidencia:

  • { n }—Coincide con el patrón exactamente n cantidad de veces

  • { n, }—Coincide con el patrón al menos n cantidad de veces

  • { n, x }—Coincide con el patrón desde un mínimo de n cantidad de veces hasta un máximo de x cantidad de veces

Cada uno de estos cuantificadores se puede hacer perezoso agregando el símbolo ? después de él, lo que significa que coincidirá con la menor cantidad de ocurrencias posible.

Ahora veamos cómo se utilizan los cuantificadores en la expresión regular “Hacer coincidir un nombre de usuario”. Allí tenemos el cuantificador {3,16}. Esto significa que queremos encontrar el patrón de cadena anterior un mínimo de 3 veces y un máximo de 16 veces. Debido a que nuestra expresión entre corchetes ([a-z0-9_-]) coincidirá con cualquier cadena que incluya cualquier combinación de letras minúsculas entre a y z, cualquier número entre 0 y 9, y los caracteres especiales de un guión bajo o un guión, este cuantificador significa que esta cadena debe tener entre 3 y 16 caracteres.

Volvamos a toda nuestra expresión regular:

/^[a-z0-9_-]{3,16}$/

Esta expresión regular busca cualquier cadena entre 3 y 16 caracteres que comience y termine con una combinación de caracteres en minúscula, los números 0 y 9, y los caracteres especiales de un guión bajo y un guión.

Los siguientes ejemplos coinciden:

• 123

• l3rn-antin0_1

La cadena 123 es una coincidencia porque cumple con el requisito mínimo de 3 caracteres, y los caracteres son todos números. l3rn-antin0_1 es una coincidencia porque tiene 13 caracteres de largo (dentro de los límites mínimos y máximos de caracteres de 3 y 16) e incluye una combinación de caracteres en minúscula, números y los caracteres especiales de un guión bajo y un guión. Recuerde que debido a que nuestro patrón de expresión regular está completamente dentro de una expresión entre corchetes, la cadena no necesita cumplir todos los requisitos, solo cualquiera de ellos.

Los siguientes ejemplos no coinciden:

• 25

• L3RN-antino0_1

• l3rn-antin0_am1k0

• l3rn*antin0?1

La cadena 25 no es una coincidencia porque solo contiene 2 caracteres y el mínimo es 3. L3RN-antino0_1 incluye caracteres en mayúscula. l3rn-antin0_am1k0 tiene 17 caracteres y el límite máximo para esta expresión regular es de 16. l3rn*antin0?1 incluye los caracteres especiales * y ?, que no están permitidos en esta expresión regular.

Genial. Hemos explicado con éxito la expresión regular “Hacer coincidir un nombre de usuario”. Pero, ¿es todo lo que hay para aprender sobre las expresiones regulares? Esto solo araña la superficie de lo que podemos lograr usando una expresión regular. Aunque está fuera del alcance de este tutorial aprender todo, veamos algunos otros componentes de expresión regular que podría encontrar.

Constructos de agrupación

La expresión regular “Hacer coincidir un nombre de usuario” es bastante sencilla y abierta sobre lo que acepta. A medida que las expresiones regulares se vuelven más complicadas, puede verificar varias partes de una cadena para determinar que las diferentes secciones cumplen con diferentes requisitos. Para dividir estas secciones, deberá utilizar los constructos de agrupación.

La forma principal de agrupar una sección de una expresión regular es usando paréntesis (()). Cada sección entre paréntesis se conoce como subexpresión.

El siguiente ejemplo contiene dos constructos o subexpresiones de agrupación:

(abc):(xyz)

La primera subexpresión es buscar una parte de la cadena que coincida exactamente con la cadena "abc". De manera similar, la segunda subexpresión busca "xyz". Entre las subexpresiones, tenemos dos puntos (:). Por lo tanto, la cadena "abc:xyz" coincidiría, pero la cadena "acb:xyz" no. A diferencia de las expresiones entre corchetes, las subexpresiones buscan una coincidencia exacta a menos que se les indique lo contrario.

Los constructos de agrupación tienen dos categorías principales: captura y sin captura. Los detalles sobre cómo se utilizan los grupos de captura y sin captura están más allá del alcance de este tutorial. Lo importante que hay que entender es que los grupos de captura capturan las secuencias de caracteres coincidentes para su posible reutilización (incluida una referencia inversa numerada) mientras que los grupos sin captura no lo hacen. Un constructo de agrupación puede hacerse sin captura al agregar los caracteres ?: al comienzo de una expresión dentro de los paréntesis.

El operador OR

Recuerde que una expresión entre corchetes no requiere que la cadena cumpla con todos los requisitos en el patrón. Esto significa que [a-z0-9_-] busca caracteres alfanuméricos o los dos caracteres especiales incluidos en el patrón. A menudo, querrá agregar esta misma lógica fuera de una expresión entre corchetes, especialmente dentro de un constructo de agrupación o entre dos constructos de agrupación diferentes.

Uso del operador OR (|), the expression [abc] could be written as (a|b|c). Usando nuestro ejemplo en la sección de constructos de agrupación, podemos tomar la expresión original:

(abc):(xyz)

Y luego utilice el operador OR para convertirlo a lo siguiente:

(a|b|c):(x|y|z)

Ahora, ambas cadenas "abc:xyz" y "acb:xyz" coincidirían, así como "a:z", pero "xyz:abc" no.

Escapes con caracteres

La barra invertida (\) en una expresión regular escapa un carácter que de otro modo se interpretaría literalmente. Por ejemplo, las llaves abiertas ({) se utilizan para comenzar un cuantificador, pero agregar una barra diagonal antes de la llave abierta (\{) significa que la expresión regular debe buscar el carácter de la llave abierta en lugar de comenzar a definir un cuantificador. Esto es común cuando se buscan cadenas con caracteres especiales que son iguales a un componente particular de una expresión regular.

Es importante tener en cuenta que todos los caracteres especiales, incluida la barra diagonal (\), pierden su importancia especial dentro de las expresiones entre corchetes.

Clases de caracteres

Una clase de caracteres en una expresión regular define un conjunto de caracteres, cualquiera de los cuales puede ocurrir en una cadena de entrada para cumplir una coincidencia. Ya hemos analizado algunas clases de caracteres. Las expresiones entre corchetes descritas anteriormente, incluidos los grupos de caracteres positivos y negativos, se consideran clases de caracteres.

Estas son algunas de las otras clases de caracteres comunes:

• .—Coincide con cualquier carácter excepto el carácter de línea nueva (\n)

• \d—Coincide con cualquier dígito numérico árabe. Esta clase es equivalente a la expresión entre corchetes [0-9].

• \w—Coincide con cualquier carácter alfanumérico del alfabeto latino básico, incluido el guión bajo (_). Esta clase es equivalente a la expresión entre corchetes [A-Za-z0-9_].

• \s—Coincide con un solo carácter de espacio en blanco, incluidas pestañas y saltos de línea

Cada una de las tres últimas clases de caracteres se puede cambiar para realizar una coincidencia inversa al escribir el carácter en mayúscula. Por ejemplo, \D coincide con un carácter sin dígitos.

Indicadores

Comenzamos este tutorial explicando que, como literal, una expresión regular debe estar envuelta en caracteres de barra diagonal. La única excepción a esta regla es con el componente conocido como indicadores. Los indicadores se colocan al final de una expresión regular, después de la segunda barra diagonal, y definen la funcionalidad o los límites adicionales para la expresión regular. Hay seis indicadores opcionales que se pueden usar, ya sea por separado o juntos y en cualquier orden, pero estos son los tres que es más probable que encuentre:

• g—Búsqueda global: la expresión regular debe probarse frente a todas las coincidencias posibles en una cadena.

• i—Búsqueda que no distingue entre mayúsculas y minúsculas: el uso de mayúsculas y minúsculas debe ignorarse mientras se intenta una coincidencia en una cadena

• m—Búsqueda multilínea: una cadena de entrada multilínea debe tratarse como múltiples líneas

Categorías avanzadas de expresión regular

Las categorías avanzadas de expresión regular van más allá del alcance de este tutorial, pero si está interesado, consulte lo siguiente:

• Constructos de referencia inversa

• Límites

• Afirmaciones de mirar alrededor (mirar hacia adelante y hacia atrás)

Recursos

Explore los siguientes recursos para ampliar su conocimiento de la expresión regular:

• MDN Web Docs para expresiones regulares

• Eloquent JavaScript (Capítulo 09): Expresiones regulares

This page was updated 6 months ago
© 2022 edX Boot Camps LLC. Confidential and Proprietary. All Rights Reserved.

Category: computer science

Tagged under: regex, computer science, javascript, tutorial,