¡Bienvenido! En este nuevo artículo vamos a hablar sobre que son las expresiones regulares también conocidas como Regex, comentaremos cómo se crean y usan en JavaScript y mucho más. ¡Empezamos!
Las expresiones regulares son patrones que se emplean para hacer coincidir o para encontrar combinaciones determinadas dentro de una cadena de texto. A la hora de diseñar un sitio web, es muy común utilizar expresiones regulares en JavaScript para verificar que los datos introducidos en un formulario son los adecuados, por ejemplo para verificar que en el campo teléfono han introducido 9 dígitos.
Existen dos maneras de construir una expresión regular en JavaScript:
let re = /D/;Las expresiones regulares literales se compilan cuando se carga el script, por ello, si la expresión regular no va a cambiar, el uso de este tipo de patrones puede favorecer el rendimiento.
let re = new RegExp('ab+c');En este caso la expresión regular se compila durante el tiempo de ejecución de la misma, por ello se recomienda el uso de la función constructora cuando el patrón de la misma vaya a cambiar o cuando la fuente del patrón sea desconocida.
Existen diversos métodos en JavaScript que sé utilizan una vez creada la expresión regular. Hay métodos pertenecientes al objeto RegExp, mientras que otros son propios de los objetos String.
El objeto RegExp dispone de los métodos:
Los métodos de String disponibles para expresiones regulares son los siguientes:
Veremos estos métodos en mayor profundidad más adelante.
Los patrones de expresiones regulares pueden ser escritos mediante caracteres simples o estar compuestos por combinaciones de caracteres simples y caracteres especiales.
Los patrones simples se componen de caracteres simples y se emplean para encontrar una coincidencia directa de una combinación de caracteres es una cadena de texto. Veamos un ejemplo:
El patrón /fue/ coincide con combinaciones en cadenas de texto únicamente cuando sucede la secuencia exacta, por ejemplo el patrón tendría éxito en las siguientes cadenas de texto:
Por contra, el patrón no tendría éxito en las siguientes cadenas de texto, debido a que los caracteres no siguen la secuencia exacta del patrón:
Los patrones simples son muy limitados, en ocasiones querremos utilizar un patrón para buscar un carácter más de una vez en una cadena de texto, también es posible que haya varias combinaciones válidas para la información que introduce un usuario. Por esta razón, se emplean los caracteres especiales combinados con los caracteres simples.
Por ejemplo, en el caso de querer validar un número de teléfono el usuario puede introducir el número de maneras muy distintas; con espacios, sin espacios, con guiones, usando el prefijo del país (por ejemplo +34), etc. Por ello es necesario el uso de caracteres especiales en las expresiones regulares. Un patrón válido podría ser el siguiente:
/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/Este patrón tendría éxito para los siguientes formatos:
Existen muchos caracteres especiales distintos utilizables en las expresiones regulares, los cuales se pueden dividir en varios grupos. A continuación se listan los grupos junto con los caracteres especiales que puedes emplear en las expresiones regulares y su significado.
Se utilizan para distinguir tipos de caracteres, por ejemplo, entre letras y números. Los tipos disponibles son los siguientes:
| Carácter | Significado |
|---|---|
| . |
|
| \d | Busca cualquier dígito (número arábigo). |
| \D | Busca cualquier carácter que no sea un dígito (número arábigo) |
| \w | Busca cualquier carácter alfanumérico del alfabeto latino |
| \W | Busca cualquier carácter que no sea un carácter del alfabeto latino |
| \s | Busca un solo carácter de espacio en blanco, incluidos el espacio, tabulación, avance de página, avance de línea y otros espacios Unicode. |
| \S | Busca cualquier carácter que no sea un espacio en blanco. |
| \t | Coincide con una tabulación. |
| \n | Coincide con un salto de linea. |
| [\b] | Coincide con un carácter de retroceso. |
| \ | Indica que el siguiente carácter se debe tratar de manera especial o «escaparse». |
| \xhh | Coincide con el carácter con el código hh (dos dígitos hexadecimales). |
| \uhhhh | Coincide con una unidad de código UTF-16 con el valor hhhh (cuatro dígitos hexadecimales). |
| \u{hhhh} o \u{hhhhh} | Hace coincidir el carácter con el valor Unicode U+hhhh o U+hhhhh (dígitos hexadecimales) |
Indican el comienzo y el final de líneas o palabras.
| Carácter | Significado |
|---|---|
| ^ | Coincide con el comienzo de la entrada. Por ejemplo, /^A/ no coincide con la «A» en «Me llamo Andrés», pero coincide con la primera «A» en «Andrés es mi nombre». |
| $ | Coincide con el final de la entrada. Por ejemplo, /r$/ no coincide con la «r» en «espera», pero sí en «esperar». |
| \b | Marca el límite de una palabra. |
| \B | Coincide con un límite sin palabra. Por ejemplo, /\Bme/ coincide con «me» en «al mediodía», y /ay\B/ coincide con «ay» en «posiblemente ayer» |
Los cuantificadores se emplean para indicar el número de caracteres o expresiones que deben coincidir con el patrón.
| Carácter | Significado |
|---|---|
| x* | Concuerda 0 o más veces con el elemento «x» anterior. |
| x+ | Encuentra 1 o más veces el elemento «x» anterior Equivalente a {1,}. Por ejemplo, /a+/ coincide con la primera «a» en «panda». |
| x? | Halla 0 o 1 vez el elemento «x» anterior. Por ejemplo, /e?le?/ coincide con «el» en «ángel» y «ele» en «ángeles». |
| x{n} | «n» es un número entero positivo. Concuerda exactamente con «n» apariciones del elemento «x» anterior. Por ejemplo, /a{2}/ coincide con todas las ‘a’ de ‘panda’. |
| x{n,} | Donde «n» es un número entero positivo, concuerda con al menos «n» apariciones del elemento «x». |
| x{n,m} | Donde «n» es 0 o un número entero positivo, «m» es un número entero positivo. Coincide con al menos «n» y como máximo «m». |
| x*? x+? x?? x{n}? x{n,}? x{n,m}? | El carácter ? después del cuantificador hace que el cuantificador «no sea codicioso»: lo cual significa que se detendrá tan pronto como encuentre una coincidencia. |
Indican grupos y rangos de caracteres.
| Carácter | Significado |
|---|---|
| x|y | Coincide con «x» o «y». Por ejemplo, /azul|rojo/ coincide con «azul» en «Cielo azul» y «rojo» en «Coche rojo». |
| [xyz] [a-c] | Coincide con cualquiera de los caracteres incluidos. Puedes especificar un rango de caracteres mediante el uso de un guión, pero si el guión aparece como el primero o último carácter entre corchetes, se toma como un guión literal para incluirse en el juego de caracteres como un carácter normal. Por ejemplo, [abcd] es lo mismo que [a-d]. Coincide con la «b» en «brisket» y la «c» en «chop». |
| [^xyz] [^a-c] | Hallan cualquier cosa que no esté encerrada entre corchetes. Puedes especificar un rango de caracteres mediante el uso de un guión. Por ejemplo, [^abc] es lo mismo que [^a-c]. Inicialmente halla la «o» en «bacon». |
| (x) | Coincide con x y recuerda la coincidencia. Por ejemplo, /(foo)/ encuentra y recuerda «foo» en «foo bar». Se accede a las coincidencias utilizando el índice de los elementos del resultado ([1], …, [n]) o desde las propiedades predefinidas del objeto RegExp ($1, …, $9). |
| \n | «n» es un número entero positivo. Una referencia inversa a la última sub-cadena que coincide con el paréntesis n en la expresión regular. Por ejemplo, /manzana(,)\snaranja\1/ coincide con «manzana, naranja» en «manzana, naranja, cereza, melocotón». |
| \k<Nombre> | Una referencia inversa a la última sub-cadena que coincide con el grupo de captura Nombrado especificado por <Nombre>.Por ejemplo, /(?<trato>\w+), si \k<trato>/ coincide con «Sr., sí Sr.» en «¿Me copias? ¡Sr., sí Sr.!». |
| (?<Nombre>x) | Coincide con «x» y la almacena en la propiedad de grupos de las coincidencias devueltas con el nombre especificado por <Nombre>. Por ejemplo, para extraer el código de área de Estados Unidos de un número de teléfono, podrías usar /\((?<area>\d\d\d)\)/. |
| (?:x) | Coincide con «x» pero no recuerda la coincidencia. La sub-cadena coincidente no se puede recuperar de los elementos del arreglo resultante ([1], …, [n]) o de las propiedades predefinidas del objeto RegExp ($1, …, $9). |
A continuación se detallan los métodos que usan las expresiones regulares que se han mencionado anteriormente.
Métodos del objeto RegExp:
| Método | Descripción |
|---|---|
| exec() | Ejecuta una búsqueda por una coincidencia en una cadena. Devuelve un arreglo de información o null en una discrepancia. |
| test() | Prueba una coincidencia en una cadena. Devuelve true o false. |
Métodos de String que emplean expresiones regulares:
| Método | Descripción |
|---|---|
| match() | Devuelve un array que contiene todas las coincidencias, incluidos los grupos de captura, o null si no se encuentra ninguna coincidencia. |
| matchAll() | Devuelve un iterador que contiene todas las coincidencias, incluidos los grupos de captura. |
| search() | Prueba una coincidencia en una cadena. Devuelve el índice de la coincidencia, o -1 si la búsqueda falla. |
| replace() | Realiza una búsqueda por una coincidencia en una cadena de texto y reemplaza la coincidencia por una sub-cadena que se le pasa cómo parámetro. |
| replaceAll() | Ejecuta una búsqueda de todas las coincidencias en una cadena y reemplaza las sub-cadenas coincidentes con una sub-cadena de reemplazo. |
| split() | Utiliza una expresión regular o un String fijo para dividir las coincidencias en un array de sub-cadenas. |
Los métodos propios de String son muy útiles y es posible utilizarlos en ámbitos muy diversos, no es expresamente necesario utilizarlos con expresiones regulares, también se pueden utilizar con cadenas de texto simples. Algunos, como es el caso del método split() son muy útiles y se emplean muy a menudo en todo tipo de funciones.
Esperamos que este artículo te haya sido de ayuda y que haya resuelto tus dudas sobre las expresiones regulares, no dudes en dejar un comentario o en echar un vistazo a otros artículos del blog. ¡Muchas gracias por llegar hasta aquí!
En este artículo, aprenderás qué es el Lazy Loading y cómo implementarlo fácilmente en tu… Leer más
En esta guía práctica, te explicamos qué es el presupuesto de rastreo, por qué es… Leer más
¿Alguna vez te has encontrado con un mensaje que te invita a actuar, ya sea… Leer más
Una de las preguntas más comunes entre los desarrolladores web que comienzan a usar JavaScript… Leer más
Descubre qué es y para qué sirve la preimpresión digital para conseguir una buena impresión… Leer más
Ampliamos información para las redes sociales. Descubre cómo gestionar correctamente los consentimientos necesarios en las… Leer más