GeezerVison

Considérons que nous avons une chaîne de caractères +7(903)-123-45-67 et que nous voulons trouver tous les nombres dedans. Mais contrairement à avant nous ne voulons pas seulement trouver les chiffres mais les nombres en entier: 7, 903, 123, 45, 67.

Un nombre est une séquence de 1 ou plus chiffres \d. Pour marquer la quantité dont nous avons besoin, nous pouvons ajouter un quantificateur.

Quantité {n}

Le quantificateur le plus simple est un nombre entre accolades: {n}.

Un quantificateur est attaché à un caractère (ou une classe de caractère, ou un jeu [...], etc) et spécifie la quantité dont nous avons besoin.

Il a quelques formes avancées, comme par exemple:

Le nombre exact: {5}

\d{5} indique exactement 5 chiffres, identique à \d\d\d\d\d.

L’exemple ci-dessous recherche un nombre à 5 chiffres:

alert( "I'm 12345 years old".match(/\d{5}/) ); //  "12345"

Nous pouvons ajouter \b pour exclure les nombres plus longs: \b\d{5}\b.

La portée: {3,5}, correspond de 3 à 5 fois

Pour trouver les nombres avec de 3 à 5 chiffres nous pouvons mettre les limites entre accolades: \d{3,5}

alert( "I'm not 12, but 1234 years old".match(/\d{3,5}/) ); // "1234"

Nous pouvons retirer la limite haute.

Une regexp \d{3,} cherche donc une séquence de chiffres d’une longueur de 3 ou plus:

alert( "I'm not 12, but 345678 years old".match(/\d{3,}/) ); // "345678"

Retournons à la chaîne de caractères +7(903)-123-45-67.

Un nombre est une séquence de un ou plus chiffres à la suite. Donc la regexp est \d{1,}:

let str = "+7(903)-123-45-67";

let numbers = str.match(/\d{1,}/g);

alert(numbers); // 7,903,123,45,67

Abréviations

Il y a des abréviations pour les quantificateur les plus utilisés:

+

Signifie “un ou plus”, identique à {1,}.

Par exemple, \d+ cherche les nombres:

let str = "+7(903)-123-45-67";

alert( str.match(/\d+/g) ); // 7,903,123,45,67

?

Signifie “zéro ou un”, identique à {0,1}. En d’autres termes, il rend le symbole optionnel.

Par exemple, le pattern ou?r cherche o suivi de zéro ou un u, puis r.

Donc, colou?r trouve color et colour:

let str = "Should I write color or colour?";

alert( str.match(/colou?r/g) ); // color, colour

*

Signifie “zéro ou plus”, identique à {0,}. C’est-à-dire que le caractère peut être répété n’importe quel nombre de fois ou bien être absent.

Par exemple, \d0* cherche un chiffre suivi de n’importe quel nombre de zéros (plusieurs ou aucun):

alert( "100 10 1".match(/\d0*/g) ); // 100, 10, 1

Comparé à + (un ou plus):

alert( "100 10 1".match(/\d0+/g) ); // 100, 10
// 1 n'est pas trouvé, puisque 0+ nécessite au moins un zéro

Plus d’exemples

Les quantificateurs sont utilisés très souvent. Ils servent de “bloc de construction” principal pour les expressions régulières complexes, regardons d’autres exemples.

Regexp pour fractions décimales (un nombre à virgule flotante): \d+\.\d+

En action:

alert( "0 1 12.345 7890".match(/\d+\.\d+/g) ); // 12.345

Regexp pour une “balise HTML d’ouverture sans attributs”, comme <span> ou <p>.

1. La plus simple: /<[a-z]+>/i

   alert( "<body> ... </body>".match(/<[a-z]+>/gi) ); // <body>

   Cette regexp cherche le caractère '<' suivi par une ou plusieurs lettres Latin, puis '>'.

2. Amélioré: /<[a-z][a-z0-9]*>/i

   Conformément au standard, Le nom d’une balise HTML peut avoir un chiffre à n’importe quel endroit à l’exception de la première position, comme <h1>.

   alert( "<h1>Hi!</h1>".match(/<[a-z][a-z0-9]*>/gi) ); // <h1>

Regexp “balise HTML d’ouverture ou de fermeture sans attributs”: /<\/?[a-z][a-z0-9]*>/i

Nous avons ajouté un slash optionnel /? près du début du pattern. Nous avons dû l’échapper avec un backslash, sinon JavaScript aurait pensé que c’était la fin du pattern.

alert( "<h1>Hi!</h1>".match(/<\/?[a-z][a-z0-9]*>/gi) ); // <h1>, </h1>