Digamos que tenemos una cadena como +7 (903) -123-45-67 y queremos encontrar todos los números en ella. Pero contrastando el ejemplo anterior, no estamos interesados en un solo dígito, sino en números completos: 7, 903, 123, 45, 67.
Un número es una secuencia de 1 o más dígitos \d. Para marcar cuántos necesitamos, podemos agregar un cuantificador.
Cantidad {n}
El cuantificador más simple es un número entre llaves: {n}.
Se agrega un cuantificador a un carácter (o a una clase de caracteres, o a un conjunto [...], etc) y especifica cuántos necesitamos.
Tiene algunas formas avanzadas, veamos los ejemplos:
- El recuento exacto:
{5} -
\d{5}Denota exactamente 5 dígitos, igual que\d\d\d\d\d.El siguiente ejemplo busca un número de 5 dígitos:
alert( "Tengo 12345 años de edad".match(/\d{5}/) ); // "12345"Podemos agregar
\bpara excluir números largos:\b\d{5}\b. - El rango:
{3,5}, coincide 3-5 veces -
Para encontrar números de 3 a 5 dígitos, podemos poner los límites en llaves:
\d{3,5}alert( "No tengo 12, sino 1234 años de edad".match(/\d{3,5}/) ); // "1234"Podemos omitir el límite superior
Luego, una regexp
\d{3,}busca secuencias de dígitos de longitud3o más:alert( "No tengo 12, sino, 345678 años de edad".match(/\d{3,}/) ); // "345678"
Volvamos a la cadena +7(903)-123-45-67.
Un número es una secuencia de uno o más dígitos continuos. Entonces la expresión regular es \d{1,}:
let str = "+7(903)-123-45-67";
let numbers = str.match(/\d{1,}/g);
alert(numbers); // 7,903,123,45,67Abreviaciones
Hay abreviaciones para los cuantificadores más usados:
+-
Significa “uno o más”, igual que
{1,}.Por ejemplo,
\d+busca números:let str = "+7(903)-123-45-67"; alert( str.match(/\d+/g) ); // 7,903,123,45,67 ?-
Significa “cero o uno”, igual que
{0,1}. En otras palabras, hace que el símbolo sea opcional.Por ejemplo, el patrón
ou?rbuscaoseguido de cero o unou, y luegor.Entonces,
colou?rencuentra amboscolorycolour:let str = "¿Debo escribir color o colour?"; alert( str.match(/colou?r/g) ); // color, colour *-
Significa “cero o más”, igual que
{0,}. Es decir, el carácter puede repetirse muchas veces o estar ausente.Por ejemplo,
\d0*busca un dígito seguido de cualquier número de ceros (puede ser muchos o ninguno):alert( "100 10 1".match(/\d0*/g) ); // 100, 10, 1Compáralo con
+(uno o más):alert( "100 10 1".match(/\d0+/g) ); // 100, 10 // 1 no coincide, ya que 0+ requiere al menos un cero
Más ejemplos
Los cuantificadores se usan con mucha frecuencia. Sirven como el “bloque de construcción” principal de expresiones regulares complejas, así que veamos más ejemplos.
Regexp para fracciones decimales (un número con coma flotante): \d+\.\d+
En acción:
alert( "0 1 12.345 7890".match(/\d+\.\d+/g) ); // 12.345Regexp para una “etiqueta HTML de apertura sin atributos”, tales como <span> o <p>.
-
La más simple:
/<[a-z]+>/ialert( "<body> ... </body>".match(/<[a-z]+>/gi) ); // <body>La regexp busca el carácter
'<'seguido de una o más letras latinas, y el carácter'>'. -
Mejorada:
/<[a-z][a-z0-9]*>/iDe acuerdo al estándar, el nombre de una etiqueta HTML puede tener un dígito en cualquier posición excepto al inicio, tal como
<h1>.alert( "<h1>Hola!</h1>".match(/<[a-z][a-z0-9]*>/gi) ); // <h1>
Regexp para “etiquetas HTML de apertura o cierre sin atributos”: /<\/?[a-z][a-z0-9]*>/i
Agregamos una barra opcional /? cerca del comienzo del patrón. Se tiene que escapar con una barra diagonal inversa, de lo contrario, JavaScript pensaría que es el final del patrón.
alert( "<h1>Hola!</h1>".match(/<\/?[a-z][a-z0-9]*>/gi) ); // <h1>, </h1>Podemos ver una regla común en estos ejemplos: cuanto más precisa es la expresión regular, es más larga y compleja.
Por ejemplo, para las etiquetas HTML debemos usar una regexp más simple: <\w+>. Pero como HTML tiene normas estrictas para los nombres de etiqueta, <[a-z][a-z0-9]*> es más confiable.
¿Podemos usar <\w+> o necesitamos <[a-z][a-z0-9]*>?
En la vida real, ambas variantes son aceptables. Depende de cuán tolerantes podamos ser a las coincidencias “adicionales” y si es difícil o no eliminarlas del resultado por otros medios.