Javascript - Pour rendre vos pages interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Javascript - Pour rendre vos pages interactives Niveau recommandé pour le cours de Javascript - Pour rendre vos pages interactives Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 15: Objet RegExp: Les expressions régulières

Toutes les pages

Expressions régulières

Les expressions régulières sont des techniques qui permettent de chercher des modèles (ou des occurrences) de formes qui peuvent être complexes, au sein des chaînes de caractères. Cette notion n'est pas propre au Javascript mais elle est prise en charge dans de nombreux langages de programmation tels que PHP ou Perl.

Pour simplifier, imaginez qu'on invite un client à saisir une adresse email dans une zone de texte. Afin de s'assurer si ce qu'il a entré respecte la forme usuelle d'un email, on peu vérifier certains poins:
  • Y a-t-il un arobas dans l'email?
  • Y a-t-il un point avant le TLD?
  • Est ce qu'il y a au moins un caractère avant l'arobas?
  • Le nom de domaine est-il valide?
  • Est ce que l'email ne contient pas de caractères non autorisés comme les espaces?
  • ...

Pour vérifier tous ceci, on peut faire appel aux méthodes et attributs qu'on a vu pour l'objet String. Mais le code sera vraiment énorme et en plus, il est peu probable que nous couvrions tous ces points. Le jeu n'en vaut pas la chandelle!

Heureusement les expressions régulières sont à la rescousse. Ce sont elles qui nous permettront de définir un model d'un email valide et l'appliquer par la suite à ce que le client a entré et voir s'il correspond ou pas.

Objet RegExp

C'est grâce à l'objet RegExp que l'on peut créer un model (ou occurrence). La syntaxe ressemble à ceci:
expression=new RegExp("occurence");
expression est l'objet qui contient le model qu'on a créé à l'aide de l'objet RegExp. En paramètres de celui ci, nous déclarons une chaîne de caractères qui représente l'expression régulière elle même.

Exemple:
emailValide=new RegExp("@");
L'objet emailValide est censé vérifier la validité du format d'un email. Comme paramètre de l'objet RegExp, on a passé l'arobas. Cela signifie que la chaîne qui sera testée à l'aide de cette expression régulière doit contenir un arobas pour juger qu'elle est valide.

Bien entendu, l’existence d'un arobas ne suffit pas pour dire qu'un email est valide ou pas. Mais c'était juste un début.

Il faut savoir qu'une expression régulière contient une suite de caractères qui désignent le format à vérifier. Il se peut que parmi ces caractères, figurent des caractères spéciaux qui désignent un détail particulier. Par exemple, si on souhaite vérifier qu'une chaîne commence par la lettre A (en majuscule), alors l'expression régulière aura la forme suivante:
expression=new RegExp("^A");
Le symbole ^ signifie que l’occurrence (dans ce cas la lettre A) doit figurer au début pour satisfaire l'expression. Mais imaginons un instant que l'on veut vérifier si la chaîne contient le symbole ^. L'expression régulière ressemblerait donc à ceci:
expression=new RegExp("\^");
En effet, il faut déspécialiser les caractères spéciaux si on souhaite les chercher en tant que motif (ou occurrence).

Voici une liste des caractères spéciaux les plus utilisées pour les expressions régulières:

caractères spécialSignification
.Un seul caractère quelconque
+Le motif précédent doit figurer au moins une fois, le max n'est pas déterminé
*Le motif précédent doit figurer au moins 0 fois, le max n'est pas déterminé
()Pour grouper un ensemble de caractères en tant que motif unique
[]Pour désigner un ensemble de motifs dont , au moins, l'un d'entre eux doit figurer
-Désigne un intervalle s'il est déclaré entre les crochets. Exemple: [a-z] signifie l'alphabet minuscule
?Le motif précédent doit figurer 0 ou une fois.
^Le motif suivant doit figurer au début de la chaîne
$Le motif précédent doit figurer à la fin de la chaîne
{}Pour spécifier le minimum et le maximum de fois où l'occurrence doit figurer. Exemple: {1,3} désigne que l'occurrence figure entre 1 et 3 fois.

Exemple:
expression=new RegExp("^[a-zA-Z0-9]{1,3}.+");
Bien que cette expression est un peu n'importe quoi, mais elle peut nous servir d'exemple. En fait, pour qu'une chaîne satisfasse l'expression définie il faut qu'elle commence par un, deux ou trois caractères alphabétiques (minuscules ou majuscules) ou chiffres, suivis de n'importe quelle suite de caractères quelconque peu importe le nombre de fois qu'ils figurent.

Méthodes de l'objet RegExp

La méthode la plus utilisée pour l'objet RegExp s'appelle test(). La méthode text() permet de tester si la chaîne de caractères passée en paramètre (dans les parenthèses) correspond à l'expression régulière. Si oui, elle retourne la valeur booléenne true, sinon elle retourne false. On peut donc la manipuler grâce à la structure de contrôle if else.

Exemple:
email="user@domaine.tld";
emailValide=new RegExp("^.+@.+\..+");
if(emailValide.test(email))
   alert("Email valide.");
else
   alert("Email invalide.");
Bien entendu l'occurrence déclarée ne garanti pas d'avoir un email valide, mais l'objectif est de voir comment la méthode test() fonctionne-t-elle.
Vous avez remarqué l'antislash avant le point de l'Email? En effet, le point est un caractère spécial pour les expressions régulières. Si nous l'avions pas déspéialisé il signifierait n'importe quel caractère.
Autre exemple:
expression=new RegExp("^\w+");
L'expression ^\w+ peut être remplacée par ^[a-zA-Z0-9_]+. En effet, il existe des abréviations qui peuvent remplacer les occurrences fréquemment utilisées comme \w qui signifie tous les caractères alphanumériques minuscules ou majuscule e plus du caractère souligné. \t pour tabulation, \n pour saut de ligne, \d pour les caractères numériques...
Quiz (Pour tester vos connaissances)
  1. Que signifie l’expression régulière suivante?
    exp=new RegExp("^[0-9]+$");
La chaîne de caractère testée ne doit contenir aucun chiffre.
La chaîne de caractère testée doit être entièrement composées de chiffres.
  1. Si on suppose que l'on veut vérifier si une chaîne ne doit contenir que des chiffres, des lettres ou la caractère "-". Qu'elle est l'erreur présente dans ce code?
    exp=new RegExp("^[a-zA-Z0-9-]+$");
Le dernier tiret doit être précédé par un anti-slash
Il faut mettre un espace entre a-z et A-Z
Il faut mettre un espace entre 0-9 et -
  1. Que signifie l’expression régulière suivante?
    exp=new RegExp("^[a-zA-Z]{2,3}$");
Les caractères minuscules doivent figurer 2 fois et les majuscules trois fois.
La chaîne testée doit être composée uniquement de 2 ou 3 caractères alphabétiques minuscules et majuscules confondus.
  1. On suppose qu'un numéro de téléphone valide ne peut contenir que des chiffres, espaces, et le caractère + indépendamment du nombre de fois qu'ils figurent. L'expression suivante est-elle valide?
    exp=new RegExp("^[0-9 +]+$");
Oui
Non