EstiloCSSTutoriales y tips en español

RSS

Ejemplos de Expresiones Regulares en JavaScript

Por Iván Bustos en . Actualizado: 26/5/2011. Visitado 7628 veces. Compartir en LinkedIn

PobreExcelente 

Basado en 6 votaciones.

Iván BustosIván Bustos, un desarrollador web en Colombia con más de 10 años de experiencia en el desarrollo de experiencias en línea, enamorado de los estándares web y del poder de JavaScript. Fundador de Estilocss.com y creador de IBForm.

Aprenda más en:
http://www.ivanbustos.com

Si te has topado con expresiones regulares (en adelante, regexp) en tu carrera, sabrás que pueden ser un verdadero dolor de cabeza. Al crear IBForm tuve la necesidad de aprender un poco más de esta técnica y pues quiero aprovechar para compartir contigo las notas que logré tomar de aquella ocasión. Realmente espero que te sirva como referencia al momento de crear tus propias regexp.

Antes que nada te recomiendo la aplicación en línea regexpal creada por Steven Levithan. Es completamente gratuita y facilita enormemente la edición de las regexp. Si necesitas crear alguna regexp compleja estoy seguro que esta aplicación te será de inmensa utilidad. Sobre todo si necesitas hacer uso de referencias grupales como lookahead. Ten en cuenta sin embargo que debido a la naturaleza JavaScript de regexpal, este no soporta lookback.

Algunas coincidencias básicas

Coincidir con cualquier número natural. (Cualquier número entero X tal que X es mayor a 0)

\d

Coincidir con cualquier cosa que NO es un número

\D

Coincidir con una letra

\w

Coincidir con cualquier cosa que NO es una letra

\W

Coincidir con cualquier caracter (a excepción del retorno de línea)

.

Coincidir con espacios en blanco (Además de espacios en blanco, también coincide con tabulaciones y retornos de línea. Es decir, \r, \n y \t)

\s

Coincidir con cualquier caracter que no sean ni un espacio, una tabulación o un retorno de línea.

\S

Coincidir con cualquier caracter incluyendo retornos de línea

[\s\S]

Cuantificadores

Los cuantificadores definen el número de ocurrencias permitidas por un átomo (parte de un regexp).

  • ?: Cero o una ocurrencia.
  • *: Cero o más ocurrencias.
  • +: Una o más ocurrencias.
  • {min, max}: Al menos min ocurrencias y por mucho max ocurrencias.
  • {num}: Exactamente num ocurrencias.
  • {min,}: Al menos min ocurrencias.

Agrupación y capturación (también llamadas referencias)

Al encerrar un átomo (parte de un regexp) en paréntesis, habremos creado un grupo o referencia que guarda el texto que coincide con la expresión regular encerrada en el paréntesis. A esta referencia se le es asignada un número empezando desde 1. Se puede optimizar un átomo encerrándolo en (?: ). Haciendo esto le indicaremos al motor Regexp que no guarde el texto que coincide con nuestra regexp optimizando la velocidad con la que esta procesa. Para reusar la captura, simplemente se usa la barra invertida seguida por el número del grupo, como por ejemplo \1.

Coincidencias más complejas

Coincidir con la palabra Alejandro

Regexp: Alejandro

Texto de prueba: Alejandro no estudió bien para el examen y por eso Alejandro está preocupado.

Coincidir con todas las letras m y n sin ningún orden en específico

Regexp: [mn]

Texto de prueba: Alejandro no estudió bien para el examen y por eso Alejandro está preocupado.

Coincidir con la palabra Alejandro pero sólo si ocurre al inicio del texto

Regexp: ^Alejandro

Texto de prueba: Alejandro no estudió bien para el examen y por eso Alejandro está preocupado.

Concidir con la palabra visión siempre y cuando esté rodeada de espacios en blanco. Es decir, que no esté ni al principio ni al final y que no sea parte de una palabra como televisión.

Regexp: \bvisión\b

Texto de prueba: Mi visión ha empeorado considerablemente por ver tanta televisión.

Coincidir con la palabra visión siempre y cuando esté antecedida de cualquier carácter que no sea un espacio en blanco.

Regexp: \Bvisión

Texto de prueba: Mi visión ha empeorado considerablemente por ver tanta televisión.

Coincidir con el signo de “trademark”. Usando su código unicode

Regexp: \u2122

Texto de prueba: Microsoft

Coincidir con cama y mesita de noche.

Regexp: cama|mesita\sde\snoche

Texto de prueba: Tenemos una cama, un camarote y una mesita de noche a la venta.

Optimizar la regexp anterior de tal manera que solo acepte palabras completas.

Regexp: \b(?:cama|mesita\sde\snoche)\b

Texto de prueba: Tenemos una cama, un camarote y una mesita de noche a la venta.

Coincidir una fecha de la forma dd-mm-aaaa y guardar como Captura 1.

Regexp: \b(\d\d-\d\d-\d\d\d\d)\b

Texto de prueba: Nací en el lluvioso día de 16-10-1986.

Coincidir con un color con código hexadecimal cuyo segundo y tercer par de cifras sean iguales al primer par.

Regexp: #(\d\d)\1\1

Texto de prueba: background-color: #191919;

Coincidir con el patron jajajaja

Regexp: (?:ja){4}

Texto de prueba: jajajajaja

Coincidir con un par de etiquetas <em> y </em> y su contenido.

Regexp: <em>.*</em>

Texto de prueba: <p>Este es un <em>texto resaltado</em></p>

El problema del Regexp anterior es que es ávaro (Greedy) y siempre tiende a analizar el texto de la manera más rápida. Considera el siguiente caso:

Coincidir con un par de etiquetas <em> y </em> y su contenido.

Regexp: <em>.*</em>

Texto de prueba: <p>Este es un <em>texto resaltado</em> así como <em>este</em> también</p>

Verás que el texto así como también termina resaltado por que Greedy considera únicamente el primer <em> y el último </em>. Para seleccionar las dos etiquetas correctamente sin seleccionar así como es necesario crear una versión perezosa (lazy) de nuestro Regexp lo que analizará nuestro texto de principo a fin detectando una por una cualquier coincidencia. Cualquier cuantificador puede ser perezoso al añadirle el signo ? después.

Coincidir con un par de etiquetas <em> y </em> y su contenido.

Regexp: <em>.*?</em>

Texto de prueba: <p>Este es un <em>texto resaltado</em> así como <em>este</em> también</p>

Coincidir con únicamente el contenido de un par de etiquetas <em> y </em>.

Regexp: <em>.*?(?=</em>)

Texto de prueba: <p>Este es un <em>texto resaltado</em> así como <em>este</em> también</p>

Lamentablemente ya que JavaScript no soporta lookBack “(?<=” no podemos deshacernos de la primera etiqueta.

Espero hayas encontrado útil esta pequeña referencia. Si crees que hay algo que debería editar, mejorar o eliminar, por favor déjamelo saber a través de los comentarios de este artículo. ¡Muchas gracias por leer!

Haga clic en cualquier etiqueta para ver más tutoriales

EstiloCSS.com | Creative Commons License | Otro sitio más de Iván Bustoshttp://www.ivanbustos.com/Miami, FL 33166United States.