Expresiones REGULARES con Javascript – Parte 01

Buen día amigo developer, hoy día te traigo el primero de una serie de tutoriales sobre expresiones regulares con JavaScript; al ir revisando el tema e notado que es algo complejo 😫, pero no imposible de aprender, así que tratare de hacerlo lo mas simple que pueda y enfocado en JavaScript. Es por esta complejidad que he decidido hacerlo en una serie de varios post 🔢, pero lo primero por lo que empezaré es definiendo que es una expresión regular.

¿Que son las expresiones regulares con JavaScript?

De manera simple, una expresión regular es un patrón que describe una cierta cantidad de texto. Por lo general, encontrará el nombre abreviado como "regex" o "regexp". En este post usaremos "regex" para referirnos a una expresión regular. Así también utilizaremos colores para referirnos a los distintos tipos de patrón de las expresiones regulares con JavaScript.

La siguiente expresión regular \b[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}\b representa un correo electrónico y la utilizaremos de ejemplo para ir explicando como esta constituida una expresión regular con JavaScript. A continuación hablaremos de los motores que procesan las expresiones regulares y los tipos de patrón que se encuentran presentes en una expresión regular.

Motores de expresiones regulares

Un motor de Regex es un software que puede procesar expresiones regulares, tratando de hacer coincidir el patrón con la cadena que le proporcionas. Casi siempre, el motor es parte de una aplicación mas grande y no se puede acceder directamente a el. Por lo contrario, la aplicación lo invoca cuando lo necesita, asegurándose de aplicar la Regex correcta a la cadena de texto ingresada.

Como es habitual en el mundo del software, los distintos motores de expresión regular NO son totalmente compatibles entre sí, entre los motores mas famosos tenemos a Perl, PCRE, PHP, .NET, Java, JavaScript, Python, Ruby, Delphi, POSIX y muchos otros. La sintaxis y el comportamiento de un motor en particular se denomina sabor de expresión regular. En este post solo cubriremos la sintaxis de expresiones regulares con JavaScript (ECMAScript).

Fuente: https://www.regular-expressions.info/tutorial.html

Clasificación de las expresiones regulares con JavaScript

He observado en diversos autores, que redactan en Internet sobre expresiones regulares con JavaScript en español; que existe ciertas diferencias en la clasificación que describen y otra muchas veces la teoría que elaboran no es muy clara. No los culpo tampoco porque es un tema complejo digno de una especialidad, es por esto que me base en la clasificación propuesta por la herramienta de testeo de regexr.com que utilizo y que además esta en ingles.

Así también debo mencionarte que voy a usar determinados colores para resaltar la clasificación de las regex, la cual indico a continuación:

Tipos de RegEx	Color
Caracteres literales (Literal Characters)	Rojo
Clases de carácter (Character Classes) o Conjunto de caracteres (Characters Set)	Naranja
Anclas (Anchors)	Marron
Caracteres de Escape (Escaped Characters)	Rosado
Grupos y Referencias (Groups and References)	Verde
Cuantificadores y Alternancia (Quantifiers and Alternation)	Azul
Sustitución de Cadenas (Strings Substitution)	Amarillo
Banderas o Modificadores (Flags or Modifiers)	Gris

Caracteres literales (Literal Characters)

La expresión regular más básica consta de un solo carácter literal, como a . Este coincide con la primera aparición de ese carácter en la cadena. Si la cadena es “Jack es un niño”, que coincide con la a después de la J. El hecho de que este a esté en el medio de la palabra, no le importa al motor de Regex. Si quiere que le importe, deberá decírselo al motor de expresiones regulares mediante las Regex de Ancla \b.

Esta Regex puede coincidir con una segunda a también. Solo lo hace cuando le dice al motor de expresiones regulares que comience a buscar en la cadena después de la primera coincidencia. Generalmente hay un flag separado por los simbolos slash (/.../g) a la que puedes llamar para continuar buscando en la cadena después de la coincidencia anterior, para el caso seria g.

Fuente: https://www.regular-expressions.info/characters.html

Metacaracteres Comunes o Delimitadores (Common Metacharacters or Delimiters)

Estos son los patrones de regex mas utilizados y se suele referir a ellos como Metacaracteres comunes, aunque los símbolos también están en otra clasificación mas especifica; es bueno tener la lista en cuenta, debido a que siempre van a ser usados en el 90% de los casos.

• ^ ➔ Principio de la cadena.
• $ ➔ Final de la cadena.
• . ➔ Cualquier carácter, excepto salto de linea (\n).
• * ➔ Operador de repetición: 0 o más veces.
• + ➔ Operador de repetición: 1 o más veces.
• ? ➔ Operador alternativo 1 vez o ninguna.
• (...) ➔ Agrupar expresión.
• [...] ➔ Conjunto de caracteres.
• { } ➔ Modificar repetición.
• \ ➔ Escapar carácter.

Clases de Carácter (Character Classes)

Con una "clase de carácter", también llamada conjunto de caracteres (Characters Set), puede decirle al motor de expresiones regulares con JavaScript que coincida solo con uno de varios caracteres. Simplemente coloque los caracteres que desea hacer coincidir entre corchetes. A continuación te describo todos los conjuntos de caracteres.

• . ➔ Representa cualquier carácter, excepto una nueva linea (\n).
• \s ➔ Un espacio en blanco. Ejem. para la regex \s mostraría en el resultado “glib jocks vex dwarves!”
• \S ➔ Ningún espacio en blanco. Ejem. para la regex \S mostraría en el resultado “glib jocks vex dwarves!”.
• \d ➔ Un dígito. Ejem. para la regex \d mostraría en el resultado “+1-(444)-555–1234”.
• \D ➔ Ningún dígito. Ejem. para la regex \D mostraría en el test “+1-(444)-555–1234”.
• \w ➔ Una Palabra. Seleccionar todos los caracteres alfanuméricos, excepto la ñ. Por solo considerar el alfabeto del idioma Ingles. Ejem. para la regex \w el resultado seria “Carlos Alberto Pereda Miñano”.
• \W ➔ Ninguna palabra. Ejem. para la regex \W el resultado seria “Carlos Alberto Pereda Miñano”.
• [abc] ➔ Rango (a o b o c). Ejem. para la regex [aeiou] donde solo tenemos las vocales, el resultado seria “glib jocks vex dwarves!”.
• [^abc] ➔ Ningún rango (a o b o c). Ejem. para la regex [^aeiou] el resultado se mostraría así “glib jocks vex dwarves!”.
• [a-q] ➔ Letra minúscula de a hasta q. Ejem. para la regex [g-s] el resultado del alfabeto se visualizaría así “abcdefghijklmnopqrstuvwxyz”.
• [A-Q] ➔ Letra mayúscula de A hasta Q.
• [0-7] ➔ Dígito de 0 a 7.
• \p{Unicode_Category} ➔ Categoría general Unicode, un carácter que coincida con la categoría Unicode especificada. Ejem, \p{Ll} coincidirá con cualquier letra minúscula. Requiere el flag (u).
• \P{Unicode_Category} ➔ Negativa categoría general Unicode, ningún carácter que coincida con la categoría Unicode especificada. Requiere el flag (u).
• \p{Unicode_Script} ➔ Propiedad de Script Unicode, un carácter que coincida con el script Unicode especificado. Por ejemplo, \p{Arabic} coincidirá con caracteres en la escritura árabe. Requiere la flag (u).
• \P{Unicode_Script} ➔ Negativa propiedad de Script Unicode, ningún carácter que coincida con el script Unicode especificado. Requiere la flag (u).

NOTA: Todos los rangos son inclusivos.

Listas de caracteres Unicode utilizados en las Clases de Carácter de la forma \p{....}

A continuación les dejo 3 listas de caracteres unicode.

1. Categoría General (Unicode_Category)
2. Propiedades de Script (Unicode_Script)
3. Extensión de propiedades de Script (Unicode_Script_Extension)

Anclas (Anchors)

Las anclas (anchors) NO coinciden con ningún carácter en absoluto. En cambio, coinciden con una posición antes, después o entre caracteres. Se pueden utilizar para "anclar" la coincidencia de Regex en una posición determinada. El signo de intercalación ^ coincide con la posición anterior al primer carácter de la cadena. Aplicar ^a a abc coincide con a. La Regex ^b no coincide con abc en absoluto, porque b NO puede coincidir justo después del inicio de la cadena, emparejado con ^.

De manera similar, $ coincide justo después del último carácter de la cadena. c$ coincide con c en abc, mientras que a$ no coincide en absoluto.

• ^ ➔ Inicio de cadena o comienzo de linea en un patrón (flag) de varias líneas (m). Ejem. ^\w+ el resultado de la prueba será “Ella vende conchas marinas”.
• $ ➔ Fin de cadena o fin de linea en un patrón (flag) de varias líneas (m). Ejem. \w+$ el resultado de la prueba será “Ella vende conchas marinas”
• \b ➔ Un limite de palabra. Coincide con una posición de límite de palabra entre un carácter de palabra y un carácter o posición que no es de palabra (Inicio o final de la cadena). Ejem. s\b mostrará en el texto de resultado de “Ella vende conchas marinas”.
• \B ➔ Ningún limite de palabra. Es la versión negada de \b. \B coincide en todas las posiciones donde \b no lo hace. Coincide con cualquier posición que no sea un límite de palabras. Esto coincide con una posición, no con un carácter. Ejem. La regex s\B mostrará como resultado de la prueba esto “Ella vende sandia para la sed”

Fuente: https://www.regular-expressions.info/anchors.html

Caracteres de Escape (Escaped Characters)

Permiten escapar caracteres normales y en hexadecimal. También se pueden utilizar secuencias de caracteres especiales para poner caracteres no imprimibles en su expresión regular. Use \t para hacer coincidir un carácter de tabulación (ASCII caracteres no imprimible en hexadecimal 0x09), salto \r para retorno de carro (0x0D) y \n para salto de línea (0x0A). Los elementos no imprimibles más exóticos son \a (bell, 0x07), \e (escape, 0x1B) y \f (formulario de alimentación, 0x0C). Recuerde que los archivos de texto de Windows usan \r \n para terminar líneas, mientras que los archivos de texto UNIX usan \n.

Muchos tipos de regex también admiten los tokens \cA hasta \cZ para insertar caracteres de control ASCII. La letra que sigue a la barra invertida es siempre una c minúscula. La segunda letra es una letra mayúscula de la A a la Z, para indicar Control + A a Control + Z. Estos son equivalentes a \x01 a \x1A (1 a 26 en decimal). Por ejemplo, \cM coincide con un retorno de carro, al igual que \r, \x0D y \u000D en hexadecimal. La mayoría de los motores regex permiten que la segunda letra sea minúscula, sin diferencia de significado. Incluyendo el motor de JavaScript.

• \ ➔ Escapar el siguiente carácter.
• \n ➔ Nueva linea. Coincide con un carácter LINE FEED (0x0A – char code 10).
• \r ➔ Retorno de carruaje. Coincide con un carácter CARRIAGE RETURN (0x0D – char code 13).
• \t ➔ Tabulación. Coincide con un carácter TAB (0x09 – char code 9).
• \v ➔ Tabulación vertical. Coincide con un carácter TAB VERTICAL (0x0B – char code 11).
• \f ➔ Alimentación de formulario. Coincide con un carácter FORM FEED (0X0C – char code 12).
• \0 ➔ Coincide con un carácter NULL (0x00 – char code 0).
• \000 ➔ Carácter octal, hace coincidir el carácter con el valor octal dado. Ejem. \045 representa el símbolo porcentaje (%) o \251 representa el símbolo copy (©). NOTA: Se desaconseja enfáticamente el uso de estos escapes octales en Regex, debido a problemas de compatibilidad. En su lugar, utilice mejor escapes hexadecimales.
• \xFF ➔ Carácter de escape hexadecimal en la forma \xFF (8 bits – UTF-8 ). Ejem. \xA9 representa el símbolo de copy (©) en su forma hexadecimal de 8 bits.
• \uFFFF ➔ Carácter de escape Unicode en la forma \uFFFF (16bits – UTF-16), donde FFFF son exactamente 4 caracteres en el sistema hexadecimal. Ejem. \u00A9 representa el símbolo de copy (©) en su forma hexadecimal de 16 bits.
• \u{FFFF} ➔ Carácter de escape Unicode extendido, en la forma \u{FFFF} es similar a \uFFFF; pero con la diferencia que acepta de 1 a 4 caracteres en el sistema hexadecimal. Ejem. \u{00A9} o \u{A9} representa el mismo símbolo de copy (©), requiere el flag (u) obligatoriamente.
• \cI ➔ Coincide con los caracteres ASCII normalmente asociados con Control + A (\cA) a Control + Z (\cZ). Esto puede variar de \cA ( Abbr. SOH, char code 1) a \cZ (Abbr. SUB, char code 26), para el ejemplo se toma el carácter de control de escape de \cI (Control + I) que representa una Tabulación horizontal (HORIZONTAL TABULATION – HT).

RECUERDE: En el sistema operativo Linux la combinación del teclado es Ctrl + Shift + u + el número del código ASCII pero en Hexadecimal. Al finalizar la combinación de teclas tienes que presionar la tecla Enter.

Fuente: https://www.regular-expressions.info/nonprint.html

Enlaces a Tablas de Caracteres ASCII y Unicode para que comprendas los Escaped Characters

Para que tengas una mejor comprensión de los Caracteres de Escape (Escaped Characters), te recomiendo que le des una ojeada 👀 a las siguiente lista.

1. Tabla de Caracteres ASCII no imprimibles
2. Tabla de Caracteres Unicode en Octal
3. Tabla de Caracteres Unicode basicos en formato hexadecimal de 2 dígitos
4. Caracteres Unicode en formato hexadecimal de 4 dígitos
5. Tabla de Caracteres de Control ASCII

Video relacionado al articulo