JavaScript, expresiones regulares
Introducción
En JavaScript, las expresiones regulares también son objetos.
Estos patrones se utilizan en algunos métodos.
Se emplean para:
- Búsqueda y reemplazo de un patrón en una cadena.
- Validación de campos en un formulario.
JavaScript, expresiones regulares
Creación de una expresión regular
Utilizando una representación literal de la expresión regular, consistente en un patrón encerrado entre diagonales:
var re = /ab+c/;
La representación literal ofrece la compilación de la expresión regular cuando se carga el script donde se encuentra. Si la expresión regular permanece constante, utilizar esta forma puede mejorar en rendimiento.
Llamando a la función constructora del objeto RegExp:
var re = new RegExp('ab+c');
El uso de la función constructora ofrece la compilación en tiempo de ejecución de la expresión regular. Es habitual usar la función constructora cuando se sabe que el patrón de la expresión regular cambiará, o cuando se desconozca el patrón y se obtenga de otra fuente, como por ejemplo del usuario.
JavaScript, expresiones regulares
Creación de una expresión regular
- caracteres simples, como /abc/,
- una combinación de caracteres simples y especiales, como /ab*c/ o /Capítulo (\d+)\.\d*/.
El segundo caso incluye paréntesis, que se emplean como un recurso de memoria. La coincidencia encontrada por esta parte del patrón es almacenada para posterior uso
JavaScript, expresiones regulares
Sintaxis de un patrón de expresión regular
Los patrones simples se construyen con caracteres para los que se desea una coincidencia exacta. Por ejemplo, el patrón /abc/ coincidirá sólo con esta secuencia y orden de caracteres 'abc'. Tal expresión tendría resultados en las cadenas "Pregunta, ¿conoces el abc?" y "Los últimos diseños surgieron a partir de slabcraft." En ambos existe una coincidencia exacta con la subcadena 'abc'. Sin embargo, no habría coincidencia en la cadena 'Abdulab calló' debido a que, a pesar de que contiene los caracteres 'a', 'b' y 'c', la secuencia exacta 'abc' no aparece.
Caracteres especiales
Cuando la búsqueda de coincidencias requiere algo más que una coincidencia exacta, como por ejemplo el encontrar una o más 'b', o encontrar espacios en blanco, se incluyen en el patrón caracteres especiales. Por ejemplo, el patrón /ab*c/ coincidirá con cualquier secuencia de caracteres en la cual una 'a' preceda a cero o más 'b' y sea inmediatamente seguida por una 'c'. En la cadena 'cbbabbbbcdebc,' el patrón coincidirá con la subcadena 'abbbbc'.
JavaScript, expresiones regulares
Sintaxis de un patrón de expresión regular
| Carácter | Significado |
|---|---|
\ |
Buscará coincidencias conforme a las siguientes reglas: |
^ |
Coincide con el principio de la entrada. Si el interruptor o bandera de multilínea está activada, también coincidirá inmediatamente después de un salto de línea. Por ejemplo, /^A/ no coincide con la 'A' en "an A", pero sí con la 'A' en "An E".El carácter ' ^' tiene un significado diferente cuando aparece como el primer carácter en un patrón tipo conjunto o grupo. Véase patrones complementarios para mayores detalles y ejemplos. |
$ |
Busca el final de la entrada. Si interruptor o bandera de multilínea se establece en Por ejemplo, la expresión |
* |
Busca el carácter precedente 0 (cero) o más veces. Es equivalente a {0,}. Por ejemplo, la expresión |
+ |
Busca el carácter precedente 1 o más veces. Es equivalente a {1,}. Por ejemplo, la expresión |
? |
Busca el carácter precedente 0 (cero) o 1 (una) vez. Es equivalente a {0,1}.Por ejemplo, la expresión /e?le?/ encontrará la subcadena 'el' en la cadena "angel" y la subcadena 'le' en la cadena "abominable" y también el carácter 'l' en la cadena "muslo".Si se utiliza inmediatamente después que cualquiera de los cuantificadores *, +, ?, o {}, hace que el cuantificador no sea expansivo (encontrando la menor cantidad posible de caracteres), en comparación con el valor predeterminado, que sí es expansivo (encontrando tantos caracteres como le sea posible). Por ejemplo, aplicando la expresión /\d+/ a la cadena "123abc" encuentra "123". Pero aplicando la expresión /\d+?/ a la misma cadena, encuentra solamente el carácter "1".También se utiliza en coincidencias previsivas, como se describe en las entradas x(?=y) y x(?!y) de esta tabla. |
. |
(El punto decimal) coincide con cualquier carácter precedente excepto un carácter de nueva línea. Por ejemplo , |
(x) |
Busca 'x' y recuerda la búsqueda, como muestra el siguiente ejemplo. Los paréntesis son llamados paréntesis de captura. |
(?:x) |
Coincide con 'x' pero no recuerda la coincidencia. Los paréntesis son llamados paréntesis no capturadores, y permiten definir subexpresiones para manipular con los operadores de las expresiones regulares. Considera la expresión de ejemplo /(?:foo){1,2}/. Si la expresión fuera /(foo){1,2}/, los caracteres {1,2} se aplicarían sólo a la última 'o' en 'foo'. Con los paréntesis no capturadores, {1,2} se aplica a la palabra entera 'foo'. |
x(?=y) |
Coincide con 'x' sólo si 'x' es seguida por 'y'. Esto se denomina previsión (lookahead, mirar adelante). Por ejemplo, |
x(?!y) |
Coincide con 'x' solo si 'x' no es seguida por 'y'. Es una previsión negativa. Por ejemplo, |
x|y |
Coincide con 'x' o 'y' (si no hay coincidencias para 'x'). Por ejemplo, |
{n} |
Coincide exactamente con n ocurrencias de la expresión. N debe ser un entero positivo. Por ejemplo, /a{2}/ no coincide con la 'a' en "candy," pero si con las a de "caandy," y las 2 primeras a en "caaandy." |
{n,m} |
Donde Por ejemplo, |
[xyz] |
Grupo de caracteres. Este tipo de patrón coincide con cada carácter dentro de los corchetes, incluyendo secuencias de escapado. Caracteres especiales como el punto (.) y el asterisco (*) no son especiales en un grupo, así que no necesitan ser escapados. Puede especificar un rango utilizando un guión, como en el siguiente ejemplo.El patrón [a-d], que equivale a [abcd], coincide con la 'b' en "brisket" y la 'c' in "city". El patrón /[a-z.]+/ y /[\w.]+/ coinciden con toda la cadena "test.i.ng". |
[^xyz] |
Grupo de caracteres negativo. Significa que coincide con cualquier cosa que no esté en los corchetes. Puede especificar rangos. Todo lo que funciona en el grupo de caracteres positivo funciona también aquí. Por ejemplo, |
[\b] |
Coincide con backspace (U+0008). Debe ir entre corchetes. (No confundir con \b.) |
\b |
Coincide con un limite de palabra. Un limite de palabra coincide con la posición entre donde un carácter de palabra no viene precedido o seguido por otro. Nótese que el límite no estará incluido en la coincidencia. En otras palabras, la longitud del limite es cero. (No confundir con Ejemplos: Nota: El motor de expresiones regulares de JavaScript define un conjunto específico de caracteres que son caracteres "palabra". Cualquier caracter que no está en ese conjunto se considera una ruptura de palabra. Este conjunto de caracteres es bastante limitado: consiste consiste únicamente en el alfabeto romano, tanto en mayúscula como minúscula, dígitos decimales, y el caracter de subrayado. Los caracteres acentuados, como "é" o "ü" son tratados, desafortunadamente, como rupturas de palabra. |
\B |
Coincide con un no-limite de palabra. Esto coincide con una posicion donde el anterior y el siguiente carácter son del mismo tipo: ambos son o no son caracteres de palabra. El inicio y el final de una cadena se consideran no palabras. Por ejemplo, |
\cX |
Donde X es un carácter entre A y Z. Coincide con un carácter de control en un string. Por ejemplo, |
\d |
Coincide con un carácter de número. Equivalente a Por ejemplo, |
\D |
Coincide con cualquier carácter no numérico. Equivalente a Por ejemplo, |
\f |
Coincide con un form feed (salto de página) (U+000C). |
\n |
Coincide con un line feed (salto de linea) (U+000A). |
\r |
Coincide con un carriage return (retorno de carro) (U+000D). |
\s |
Coincide con un carácter de espacio, entre ellos incluidos espacio, tab, salto de página, salto de linea y retorno de carro. Equivalente a Por ejemplo, |
\S |
Coincide con todo menos caracteres de espacio. Equivalente a Por ejemplo, |
\t |
Coincide con tab (U+0009). |
\v |
Coincide con tab vertical (U+000B). |
\w |
Coincide con cualquier carácter alfanumérico, incluyendo el guión bajo. Equivalente a Por ejemplo, |
\W |
Coincide con todo menos caracteres de palabra. Equivalente a Por ejemplo, |
\n |
Cuando n es un entero positivo, es una referencia hacia alguna subcadena de paréntesis dentro de la misma expresion que coincida con el número (contando los paréntesis izquierdos). Por ejemplo, |
\0 |
Coincide con el carácter NULL (U+0000). No preseda este por otro número, ya que \0<numero> se considera una secuencia octal escapada. |
\xhh |
Coincide con un carácter en exadecimal hh (dos dígitos hexadecimales) |
\uhhhh |
Coincide con un carácter unicode con el código hhhh (cuatro dígitos hexadecimales). |
"Escapar" la entrada del usuario para que sea tratada como una cadena literal en una expresión regular se puede lograr mediante la sustitución simple:
function escapeRegExp(cadena) {
return cadena.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& significa la totalidad de la cadena coincidente
}
JavaScript, expresiones regulares
Sintaxis de un patrón de expresión regular
Los paréntesis alrededor de alguna parte del patrón de la expresión regular hacen que parte de la subcadena que coincida sea recordada. Una vez recordada, puede ser rellamada en otro uso.
Por ejemplo, el patrón /Capítulo (\d+)\.\d*/ ilustra caracteres de escape y especiales adicionales e indica que parte del patrón debe recordarse. Coincide con los caracteres 'Capítulo ' seguidos por uno o más números, luego un punto decimal, seguido por cualquier número 0 o más veces. Además, se utilizaron paréntesis para recordar el primer grupo de números.
Este patrón se encuentra dentro de la cadena "Capítulo 4.3, párrafo 6" y se memoriza el '4'. El patrón no se encuentra en "Capítulo 3 y 4", porque no tiene el punto después del '3'.
Si no se quiere memorizar la subcadena, se utilizará ?: al inicio de los paréntesis. Por ejemplo, (?:\d+) coincide con uno o más números pero no memoriza la coincidencia.
JavaScript, expresiones regulares
Sintaxis de un patrón de expresión regular
Las expresiones regulares se utilizan con los métodos de
RegExp test y exec y con los metodos de String match, replace, search, and split.| Método | Descripción |
|---|---|
exec |
Un método RegExp que ejecuta una búsqueda por una coincidencia en una cadena. Devuelve un array de información. |
test |
Un método RegExp que verifica una coincidencia en una cadena. Devuelve true o false. |
match |
Un método String que ejecuta una búsqueda por una coincidencia en una cadena. Devuelve un array de información o null si no existe coincidencia alguna. |
search |
Un método String que verifica una coincidencia en una cadena. Devuelve el índice de la coincidencia, o -1 si la búsqueda falla. |
replace |
Un método String que ejecuta una búsqueda por una coincidencia en una cadena, y reemplaza la subcadena encontrada con una subcadena de reemplazo. |
split |
Un método String que utiliza una expresión regular o una cadena fija para cortar una cadena y colocarlo en un array de subcadenas. |
JavaScript, expresiones regulares
Sintaxis de un patrón de expresión regular
Las expresiones regulares tienen cuatro banderas opcionales que permiten realizar búsquedas globales y sin distinción de mayúsculas y minúsculas. Estas banderas pueden utilizarse por separado o juntas y en cualquier orden; y se incluyen como parte de la expresión regular.
| Bandera | Descripción |
|---|---|
g |
Búsqueda global. |
| i | Búsqueda 'case-insensitive' (no sensible a mayúsculas). |
| m | Búsqueda en multi-línea. |
| u | unicode; se trata el patrón como una secuencia de caracteres unicode. |
| y | Realizar una búsqueda "pegajosa" que se ajuste a partir de la posición actual en la cadena de destino. Ver sticky |
Sintaxis:
var re = /patrón/flags;
o
var re = new RegExp('patrón', 'banderas');
Ejemplo, re = /\w+\s/g crea una expresión regular que busca uno o más caracteres seguidos por un espacio; y busca esta combinación en la totalidad de la cadena.
var re = /\w+\s/g;
var str = "fee fi fo fum";
var myArray = str.match(re);
console.log (myArray);
//["fee ", "fi ", "fo "]
Donde se puede reemplazar la línea:
var re = /\w+\s/g;
con
var re = new RegExp("\\w+\\s","g")
JavaScript, expresiones regulares
Consejos de uso
- Las expresiones regulares buscan patrones.
var er=/hola/;
er.test(“abcaholaabc”); // true
- Habitualmente interesa que una cadena completa cumpla un patrón. Se utilizaran los caracteres especiales ^ y $ para delimitar el principio y fin del patrón.
var er=/^hola$/;
er.test(“abcaholaabc”); // false
- Hay que llevar cuidado con los caracteres especiales al definir las expresiones. Se utiliza el carácter de escape “\” /^\w+\.\w*$/ -> uno o más caracteres alfanuméricos que incluyen un “.”
- No se pueden definir rangos numéricos.
/^[12-40]$/ -> “1”, “2”, “3”, “4” ó “0”. En el patrón, 2-4 define un rango de caracteres.