Codificación aprenderaprogramar.com: CU01155E
PARÉNTESIS Y FLAGS EN EXPRESIONES REGULARES
Las expresiones regulares JavaScript son una potente herramienta que nos permitirá resolver problemas diversos. Ya conocemos aspectos básicos como la instanciación de objetos RegExp y los caracteres especiales disponibles. Vamos a ampliar conocimientos sobre expresiones regulares.
EXPRESIONES REGULARES CON FLAGS
JavaScript permite especificar modos de búsqueda de expresiones regulares a través de lo que denomina flags (banderas o indicadores).
Los flags se indican en el momento de definir la expresión regular:
a) Si se define en forma de literal: var miExpresionRegular = /as?.a/flagsAIncluir
b) Instanciando el objeto RegExp: var miExpresionRegular = new RegExp("as?.a", "flagsAIncluir")
En la siguiente tabla se indican los principales flags, cómo usarlos y ejemplos.
Flag |
Significado |
Ejemplo sintaxis |
g |
Búsqueda global de todas las coincidencias (no se detiene al encontrar la primera coincidencia) |
/as?.a/g new RegExp("as?.a", "g") |
i |
No diferenciar entre mayúsculas y minúsculas |
/as?.a/i new RegExp("as?.a", "i") |
m |
Búsqueda multilínea. Para los indicadores de comienzo de cadena ^ y fin de cadena $, si se aplica esta bandera, se tienen en cuenta matches en todos los principios y finales de línea, no sólo al principio y final de cadena. |
/as?.a/m new RegExp("as?.a", "m") |
Combinaciones |
Se pueden especificar varios flags |
var miExpReg = /^i/mi Indica que hará match con cualquier comienzo de línea por una i minúscula ó I mayúscula (búsqueda multilínea y sin diferenciar mayúsculas y minúsculas). |
MÉTODOS DE LOS OBJETOS TIPO EXPRESIÓN REGULAR
Los objetos de tipo expresión regular proveen de una serie de métodos útiles. En la siguiente tabla vemos cuáles son, su significado y un ejemplo de uso.
Método |
Significado |
Ejemplo de uso |
exec |
Ejecuta una búsqueda del patrón y devuelve un array cuyo índice 0 contiene el valor encontrado y los índices sucesivos los submatches correspondientes a paréntesis existentes en la expresión. Si está activado el flag g, la repetición de la búsqueda devuelve la siguiente coincidencia. |
var miExpReg = /p.sto/g var txt = 'el pasto es pisto pero no pesto'; var msg = ''; while ((matches = miExpReg.exec(txt)) !== null ) { msg = msg + 'Encontrado: '+matches[0]+'\n'; } alert(msg); // Encontrado: pasto, pisto, pesto var miExpReg = /p(.)sto/ var matches = miExpReg.exec(txt); daría lugar a que matches[0] contenga <<pasto>> y matches[1] contenga <<a>> |
test |
Comprueba si se verifica el patrón y devuelve true o false |
var miExpReg = /p.sto/g var txt = 'el pasto es pisto pero no pesto'; msg = ''; alert('Hay match: '+ miExpReg.test(txt)); // Hay match: true |
MÉTODOS DE LOS OBJETOS STRING RELACIONADOS CON EXPRESIONES REGULARES
Los objetos de tipo String proveen de una serie de métodos útiles. En la siguiente tabla vemos cuáles son, su significado y un ejemplo de uso.
Método |
Signficado |
Ejemplo de uso |
match |
Devuelve un array con las coincidencias encontradas, o null si no hay coincidencias. |
var miExpReg = /p.sto/g var txt = 'el pasto es pisto pero no pesto'; msg = ''; var matches = txt.match(miExpReg); if (matches != null) { for (var i=0; i<matches.length; i++){ msg = msg + 'Encontrado: '+matches[i]+'\n'; } } else {msg = 'No se encontraron coincidencias';} alert(msg); // Encontrado: pasto, Encontrado: pisto, Encontrado: pesto |
search |
Devuelve la posición de comienzo de la primera coincidencia dentro del string, o -1 si no hay coincidencia. Recordar que la primera posición posible es cero. |
var miExpReg = /p.sto/g var txt = 'el pasto es pisto pero no pesto'; msg = ''; var posicion = txt.search(miExpReg); if (posicion != -1) { msg = msg + 'Encontrado patrón en posición: '+posicion+'\n'; } else {msg = 'No se encontraron coincidencias';} alert(msg); // Encontrado patrón en posición: 3 |
replace |
Devuelve un nuevo String (sin modificar el original) donde se reemplaza una o varias coincidencias por lo especificado (una cadena o una función que devuelve la cadena). |
var miExpReg = /p.sto/g var txt = 'el pasto es pisto pero no pesto'; msg = ''; var nuevoTxt = txt.replace(miExpReg, 'coco'); msg = 'txt vale ' + txt + ' y nuevoTxt vale ' +nuevoTxt; alert(msg); // txt vale el pasto es pisto pero no pesto y nuevoTxt vale el coco es coco pero no coco |
split |
Devuelve un array con las subcadenas resultantes de dividir la cadena original en subcadenas delimitadas por el carácter separador especificado (que queda excluido). Si se indican unas comillas vacías se extraen todos los caracteres a un array. |
var miExpReg = /\d/g var txt = 'un 3 de bastos gana a un 5 de copas pero no a un 7 de oros'; msg = ''; var splits = txt.split(miExpReg); msg = 'splits contiene ' + splits; alert(msg); // splits contiene un , de bastos gana a un , de copas pero no a un , de oros |
USAR PARÉNTESIS PARA AGRUPAR FRAGMENTOS
Los paréntesis sirven para agrupar varios caracteres y afectarlos por un carácter especial.
Por ejemplo var miExpReg = /(p.s)?to/g
var txt = 'el pasto es pisto y eso es todo';
var resultado = txt.match(miExpReg);
Hace que resultado contenga ['pasto ', 'pisto ', 'to '] ya que hay un fragmento de la expresión que se ha agrupado e indicado que es opcional.
Los paréntesis nos permiten no tener que repetir. Por ejemplo en vez de /estereotipo|estereoforma/ podemos escribir /estereo(tipo|forma).
USAR PARÉNTESIS PARA IDENTIFICAR SUBEXPRESIONES CON MATCH
Los paréntesis generan otro efecto. Cuando se invoca la función match buscando la primera coincidencia (es decir, búsqueda no generalizada sin el flag g) y existen subexpresiones entre paréntesis, el array generado guarda en su índice cero la primera coincidencia mientras que en los sucesivos índices guarda las coincidencias de las subexpresiones.
Cuando se escribe una expresión regular, los elementos que se incluyen entre paréntesis pueden ser recuperados por separado invocándolos luego como $1, $2, $3…. Estas variables persisten normalmente hasta que se invoca una nueva expresión regular.
Veámoslo con un ejemplo:
<!DOCTYPE html> <html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8"> <script type="text/javascript"> function ejemplo() { var expReg = /(\w+)\s(\w+)\s(\w+)/; var txt = "Era una noche negra y sola"; var newTxt = txt.match(expReg); console.log(newTxt); //Activar la consola para que se visualice var cambiada = newTxt[0].replace(newTxt[3], 'madrugada'); console.log(cambiada); //Activar la consola para que se visualice } </script> </head> <body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div> <div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div> </body></html> |
El resultado esperado es:
Array [ "Era una noche", "Era", "una", "noche" ]
"Era una madrugada"
Analicemos lo que hace el código: en el array newTxt queda almacenado en su posición cero la coincidencia global con la expresión regular. En su índice uno, queda almacenado el match de la primera subexpresión entre paréntesis, es decir, la primera palabra (sin tildes). En su índice dos, la segunda palabra, y en su índice 3, la tercera palabra. A continuación creamos una cadena formada por las tres palabras con la tercera de ellas reemplazada por ‘madrugada’.
USAR PARÉNTESIS PARA IDENTIFICAR SUBEXPRESIONES CON REPLACE
Dentro de una sentencia replace, los matches de subexpresiones entre paréntesis pueden ser invocadas usando unas variables temporales especiales que se numeran como $1, $2, $3… etc. de acuerdo con la cantidad de subexpresiones entre paréntesis que existan. Este ejemplo nos muestra cómo se pueden usar:
<!DOCTYPE html> <html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8"> <script type="text/javascript"> function ejemplo() { var expReg = /(\w+)\s(\w+)\s(\w+)/; var txt = "Alberto Flores Rubalcaba: tiene calificación de 10"; var cambiada = txt.replace(expReg, '$3 $2, $1'); console.log(cambiada); //Activar la consola para que se visualice } </script> </head> <body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div> <div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div> </body></html> |
En este ejemplo el match de la expresión regular es <<Alberto Flores Rubalcaba>>, y cada palabra es una subexpresión por encontrarse entre paréntesis en la expresión regular. En el replace podemos identificar cada subexpresión como $1 (primera subexpresión), $2 (segunda) y $3 (tercera).
En el replace indicamos que la coincidencia de la expresión regular sea sustituida por la cadena formada por la tercera palabra seguida de la segunda, una coma y la primera palabra.
De este modo el resultado esperado es que se muestre por consola: "Rubalcaba Flores, Alberto: tiene calificación de 10".
EJERCICIO
Crea un documento HTML (página web) donde exista un formulario que se envíe por el método GET. Se pedirá al usuario que introduzca nombre, apellidos y correo electrónico. Define dentro de la etiqueta form que cuando se produzca el evento onsubmit (pulsación del botón de envío del formulario) se ejecute una función a la que denominaremos validacionConExpReg que no recibe parámetros.
La función validar debe realizar estas tareas y comprobaciones utilizando expresiones regulares:
a) Comprobar que el nombre contiene al menos tres letras. Si no es así, debe aparecer un mensaje por pantalla indicando que el texto no cumple tener al menos tres letras. Por ejemplo si se trata de enviar Ka como nombre debe aparecer el mensaje: “El nombre no cumple tener al menos tres letras”.
b) Comprobar que el correo electrónico contiene el carácter @ (arroba) y el carácter . (punto). De no ser así, deberá aparecer un mensaje indicando que al correo electrónico le falta uno o ambos caracteres. Por ejemplo si se trata de enviar pacogmail.com deberá aparecer el mensaje: “Falta el símbolo @ en el correo electrónico”.
c) Antes de enviarse los datos del formulario a la página de destino, todas las letras del correo electrónico deben transformarse a minúsculas. Por ejemplo si se ha escrito
d) Antes de enviarse los datos del formulario a la página de destino, si el correo electrónico contiene la subcadena “ at “ debe reemplazarse por el símbolo @. Por ejemplo si se ha escrito paco at gmail.com debe enviarse
Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.