Expresiones Regulares en JavaScript

Las expresiones regulares son la sintaxis que se utiliza para igualar y manipular cadenas.

Si usted ha oído hablar de, o ha trabajado con expresiones regulares antes, no se alarme. Las expresiones regulares tienen una mala reputación, únicamente a causa de su apariencia. Y, debido a mi experiencia, no debemos juzgar las cosas solamente en apariencia.

Dicho esto, si usted ha tenido una mala experiencia con las expresiones regulares, yo pediría que lea esta sección con una mente abierta y espero que mi explicación ayuda a aclarar cierta confusión.

Una cosa muy importante y en la cual tengo toda mi confianza, es en que usted es un programador que ocupa la lógica para resolver problemas, y generalmente se debe partir de una lógica inductiva, es decir, vamos de lo particular a lo general, de lo simple a lo complejo.

Al escribir o leer una expresión regular, la clave está en reducir el problema a trozos pequeños y trabajar a través de cada uno.

En JavaScript, las expresiones regulares se utilizan con el objeto RegExp y una sintaxis llamada "literales de expresiones regulares". Estos elementos constituyen una forma eficaz de trabajar con cadenas de texto o caracteres alfanuméricos.

La implementación ECMA-262 de las expresiones regulares, es en gran parte tomada del estándar Perl 5.

He aquí una expresión regular para que coincida con la palabra de JavaScript:

var miRegex = /JavaScript/;

La expresión regular que se muestra en el ejemplo anterior, hará coincidir con la cadena "JavaScript" en cualquier lugar que aparezca dentro de otra cadena.
Por ejemplo, la expresión regular coincidiría en la frase

"Este es un curso acerca de JavaScript"

y también sería coincidencia en la cadena:

"EstecursoacercadeJavaScriptesgenial"

pero no va a coincidir con:

"Este es un curso acerca de javascript"

porque las expresiones regulares distinguen entre mayúsculas y minúsculas. (Usted puede cambiar esto, como se verá más adelante).

A continuación veremos con mayor detalle las Expresiones Regulares.

El conocimiento que obtenga aquí le preparará para el resto de los cursos, ya que le ayuda no sólo a entender cómo trabajar con cadenas en JavaScript, sino también entender cómo usar expresiones regulares en otros idiomas.

En esta sección se proporciona una referencia para la sintaxis de expresiones regulares.

La sintaxis de las expresiones regulares

La sintaxis de las expresiones regulares incluye varios caracteres que tienen un significado especial, incluyendo caracteres que anclan el partido al principio o al final de una cadena, un comodín, y grupos de caracteres, entre otros.

Carácter	Texto buscado
^	Principio de entrada o línea.
$	Fin de entrada o línea.
*	El carácter anterior 0 o más veces.
+	El carácter anterior 1 o más veces.
?	El carácter anterior una vez como máximo (es decir, indica que el carácter anterior es opcional).
.	Cualquier carácter individual, salvo el de salto de línea.
x\|y	x o y.
{n}	Exactamente n apariciones del carácter anterior.
{n,m}	Como mínimo n y como máximo m apariciones del carácter anterior.
[abc]	Cualquiera de los caracteres entre corchetes. Especifique un rango de caracteres con un guión (por ejemplo, [a-f] es equivalente a [abcdef]).
[^abc]	Cualquier carácter que no esté entre corchetes. Especifique un rango de caracteres con un guión (por ejemplo, [^a-f] es equivalente a [^abcdef]).
\b	Límite de palabra (como un espacio o un retorno de carro).
\B	Cualquiera que no sea un límite de palabra.
\d	Cualquier carácter de dígito. Equivalente a [0-9].
\D	Cualquier carácter que no sea de dígito. Equivalente a [^0-9].
\f	Salto de página.
\n	Salto de línea.
\r	Retorno de carro.
\s	Cualquier carácter individual de espacio en blanco (espacios, tabulaciones, saltos de página o saltos de línea).
\S	Cualquier carácter individual que no sea un espacio en blanco.
\t	Tabulación.
\w	Cualquier carácter alfanumérico, incluido el de subrayado. Equivalente a [A-Za-z0-9_].
\W	Cualquier carácter que no sea alfanumérico. Equivalente a [^A-Za-z0-9_].

Y, por último , además de los caracteres vistos en la tabla anterior, se pueden utilizar los modificadores i , g, m.

El modificador i especifica que la expresión regular debe ser analizada de una manera sensible a las mayúsculas
El modificador g indica que el análisis debe continuar después del primer partido, a veces llamado global (de ahí la g).
El modificador m se utiliza para la coincidencia de varias líneas.

Usted verá un ejemplo del uso de estos modificadores en el siguiente ejemplo.

El objeto RegExp tiene sus propios métodos, incluyendo exec() y test(), el último de los cuales pone a prueba una expresión regular con una cadena y devuelve true o false dependiendo de si la expresión regular coincida con esa cadena.

El método exec() del objeto RegExp se utiliza para analizar la expresión regular con una cadena y devolver el resultado, este método devuelve el texto que coincide si encuentra una coincidencia, de lo contrario, devuelve null.

Después veremos a detalle cada método

empleado en expresiones regulares.

Apenas estamos calentando...

Por ejemplo, analicemos una URL:

var miString = "http://www.scriptbc.com";
var miRegex = /http:\/\/\w+\.(.*)/i;
var resultado = miRegex.exec(miString);
alert(resultado[1]);

Lo que veremos en el navegador será:

Veamos la primer declaración, la cual es la declaración de la cadena, a la que deseamos extraer el dominio.

var miString = "http://www.scriptbc.com";

Esto es seguido por la declaración de la expresión regular y luego una llamada a los métodos exec(método), que analiza la expresión regular con la cadena que se encuentra en miString y coloca los resultados en una variable denominada resultado.

var miRegex = /http:\/\/\w+\.(.*)/i;
var resultado = miRegex.exec(myString);

La expresión regular contiene varios elementos importantes.

Comienza a buscar la cadena http:
Luego tenemos que escapar las dos barras diagonales (\/\/), con los contraslash, ya que como las barras diagonales son caracteres especiales es necesario escaparas.
A este punto ya tenemos (http://)
La siguiente parte de la expresión regular, \ w, busca cualquier carácter alfanumérico único.

Las direcciones web son típicamente www.
Así que no se confundan en el pensamiento de que la expresión está en busca de tres w-
Debido a que \ w concuerda con cualquier carácter individual, y los servidores web suelen tener tres caracteres (www).
La expresión regular agrega un carácter + especial para indicar que la expresión regular debe encontrar un carácter alfanumérico al menos una vez y, posiblemente, más de una vez.

Así que ahora el código tiene http: \ / \ / \ w + , lo que coincide con la dirección http://www hasta la parte scriptbc.com
Es necesario tener en cuenta que el carácter de punto entre el nombre de host (www) y el nombre de dominio (scriptbc.com).
Esto se logra mediante la adición de un carácter de punto (.)pero como el punto es también un carácter especial, tiene que escapar con \.
Usted tiene ahora http: \ / \ / \ w + \. , lo que coincide con todos los elementos de una dirección típica hasta el nombre de dominio.
Por último, es necesario capturar el dominio y usarlo después, la parte de dominio corresponde a lo que se encuentra entre parentesis (.*).
Ya que el contenido del dominio no importa, lo que debemos hacer es:

Colocar un punto, para que coincida con cualquier carácter
Y colocar un asterisco , para que coincida con todos y cada uno de los caracteres anteriores anteriores, que es cualquier carácter en este ejemplo.

Uno se queda con la expresión regular final, que es utilizado por el método exec().
El resultado se coloca en la variable de resultado.
También tenga en cuenta el uso del modificador i, para indicar que la expresión regular será analizado de una manera sensible a las mayúsculas.

Si se encuentra una coincidencia, el método exec() crea una matriz que contiene cada uno de los elementos coincidentes.
En el ejemplo mostrado, el segundo elemento de la matriz (1) se envía a una alerta, que produce el resultado que se muestra en la figura anterior.

var results = miRegex.exec(miString);
alert(results[1]);

Eso es mucho para digerir, y admito que esta expresión regular puede ser enormemente mejorada con la adición de otros caracteres.

Este es un ejemplo, de muchos que iremos viendo, como le mencione en un inicio, las expresiones regulares son mucho estudio, y aun faltan mas métodos.
Finalmente veremos algunos ejemplos, que son de uso frecuente, y poco a poco los iremos explicando paso a paso, no desespere y quedese con nosotros en Script BC.

	Expresión Regular
Cualquier letra en minuscula	[a-z]
Entero	^(?:\+\|-)?\d+$
Correo electrónico	/[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/
URL	^(ht\|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w][0-9a-zA-Z])(:(0-9))(\/?)( [a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$
Contraseña segura	(?!^[0-9]$)(?!^[a-zA-Z]$)^([a-zA-Z0-9]{8,10})$ (Entre 8 y 10 caracteres, por lo menos un digito y un alfanumérico, y no puede contener caracteres espaciales)
Fecha	^\d{1,2}\/\d{1,2}\/\d{2,4}$ (Por ejemplo 01/01/2007)
Hora	^(0[1-9]\|1\d\|2[0-3]):([0-5]\d):([0-5]\d)$ (Por ejemplo 10:45:23)
Número tarjeta de crédito	^((67\d{2})\|(4\d{3})\|(5[1-5]\d{2})\|(6011))(-?\s?\d{4}){3}\|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$
Número teléfono	^[0-9]{2,3}-? ?[0-9]{6,7}$
Código postal	^([1-9]{2}\|[0-9][1-9]\|[1-9][0-9])[0-9]{3}$
Certificado Identificación Fiscal	^(X(-\|\.)?0?\d{7}(-\|\.)?[A-Z]\|[A-Z](-\|\.)?\d{7}(-\|\.)? [0-9A-Z]\|\d{8}(-\|\.)?[A-Z])$