Expressions rationnelles

Les expressions rationnelles sont des motifs utilisés pour correspondre à certaines combinaisons de caractères au sein de chaînes de caractères. En JavaScript, les expressions rationnelles sont également des objets. Ces motifs sont utilisés avec les méthodes exec et test de RegExp, et avec les méthodes match, replace, search et split de String. Ce chapitre explique comment utiliser les expressions rationnelles en JavaScript (aussi appelées expressions régulières ou « RegExp »).

Créer une expression rationnelle

Il est possible de construire une expression rationnelle de deux façons :

• Utiliser un littéral d'expression régulière, qui correspond à un motif contenu entre deux barres obliques, par exemple :

  var re = /ab+c/;
  

  Lorsque les littéraux d'expression régulière sont utilisés, l'expression est compilée lors du chargement du script. Il est préférable d'utiliser cette méthode lorsque l'expression régulière reste constante, afin d'avoir de meilleurs performances.

• Appeler le constructeur de l'objet RegExp, par exemple :

  var re = new RegExp("ab+c");
  

  Avec cette méthode, l'expression rationnelle est compilée lors de l'exécution. On utilisera cette méthode lorsque le motif utilisé est variable ou provient d'une autre source (par exemple une interaction utilisateur).

Écrire une expression rationnelle

Le motif d'une expression rationnelle est composé de caractères simples (comme /abc/), ou de caractères simples et spéciaux, comme /ab*c/ ou /Chapitre (\d+)\.\d*/ . Le dernier exemple utilise des parenthèses qui permettent d'avoir une « mémoire ». La correspondance avec le motif contenu entre parenthèses pourra être utilisée par la suite. Ceci est décrit avec ce paragraphe.

Utiliser des motifs simples

Les motifs simples sont construits à partir de caractères pour lesquels on souhaite avoir une correspondance directe. Le motif /des/ correspond lorsqu'on observe exactement les caractères 'des' ensemble et dans cet ordre précis. On pourrait utiliser ce motif et détecter une correspondance dans les chaînes suivantes : "J'ai vu des licornes ?" et "Sa description de licorne était superbe" car la chaîne de caractères 'des' y est présente (dans le mot description pour le second exemple). Il n'y aura pas de correspondance avec la chaîne de caractères "Toc toc" car 'des' n'est pas présente.

Utiliser des caractères spéciaux

Lorsque le motif à trouver est plus complexe qu'une simple égalité (trouver tous les B, les blancs...), le motif devra contenir des caractères spéciaux. Ainsi, le motif /ab*c/ correspond à toutes les combinaisons de caractères qui possèdent un seul 'a' suivi de zéro ou plusieurs 'b' (l'astérisque utilisée ici signifie que l'élément qui la précède doit être présent zéro ou plusieurs fois) qui sont immédiatement suivis d'un 'c'. Par exemple, la chaîne de caractère "cbbabbbbcdebc" correspond au motif avec la chaîne de caractères 'abbbbc'.

La tableau qui suit fournit une liste complète des caractères spéciaux pouvant être utilisés dans les expressions régulières ainsi que leur signification.

Afin d'échapper les informations saisies par l'utilisateur et de traîter les chaînes de caractères pour les utiliser au sein d'un expression régulière correspondante, il est possible d'utiliser le remplacement suivant :

function escapeRegExp(string){
  // $& correspond à la chaîne correspondante
  // dans son intégralité
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

Utiliser les parenthèses

Les parenthèses encadrant une partie du motif de l'expression régulière peuvent être utilisées pour garder en mémoire les correspondances. Cela pourra être utile pour réutiliser la correspondance trouvée.

Ainsi, le motif /Chapitre (\d+)\.\d*/ utilise des caractères échappés et spéciaux et indique une partie du motif à garder en mémoire. Ce motif correspond aux caractères 'Chapitre ' suivi par un ou plusieurs caractères numériques (\d correspond à un chiffre et + indiquant que une série de 1 ou plusieurs chiffres), suivis par un point (qu'il est nécessaire d'échapper car c'est un caractère spécial, on utilise donc '\' pour indiquer qu'on souhaite reconnaître le caractère '.'), suivi par 0 ou plusieurs chiffres (\d correspondant à un chiffre et l'astérisque indiquant que le caractère est présent 0 ou plusieurs fois). Les parenthèses sont utilisées pour garder en mémoire les premiers chiffres correspondant.

Ce motif est trouvé dans "Ouvrir le Chapitre 4.3 au paragraphe 6" et le chiffre '4' est gardé en mémoire. Le motif n'est pas trouvé dans  "Chapitre 3 et 4", car la chaîne de caractères ne comporte pas de point après le '3'.

Pour qu'une partie de la chaîne de caractère corresponde mais que la correspondance ne soit pas gardée en mémoire, on pourra utiliser ?:. Ainsi, (?:\d+) correspondra pour une séquence de chiffres (1 ou plusieurs chiffres) mais on ne gardera pas en mémoire les caractères correspondants.

Utiliser les expressions rationnelles

Les expresssions régulières sont utilisées avec les méthodes test et exec de l'objet RegExp et avec les méthodes match, replace, search, et split de l'objet String. Ces méthodes sont expliquées en détail dans la Référence JavaScript.

Pour savoir si un motif est présent au sein d'une chaîne de caractères, utiliser les méthodes test ou search. Pour obtenir plus d'informations (moins rapidement) on utilisera les méthodes exec ou match. Si on utilise exec ou match et qu'une correspondance est trouvée, ces méthodes renverront un tableau et mettront à jour des propriétés de l'objet RegExp associé. Si aucune correspondance n'est trouvée, la méthode exec renverra null (qui correspondra à false lors d'un test conditionnel).

Dans l'exemple qui suit, le script utilise la méthode exec pour trouver une correspondance dans une chaîne de caractères.

var monExpressionReguliere = /d(b+)d/g;
var monTableau = monExpressionReguliere.exec("cdbbdbsbz");

S'il n'est pas nécessaire d'accéder aux propriétés de l'expression régulière, une autre façon de récupérer monTableau peut être :

var monTableau = /d(b+)d/g.exec("cdbbdbsbz");
// équivalent à "cdbbdbsbz".match(/d(b+)d/g);

Si on souhaite construire une expression régulière à partir d'une chaîne de caractères, on peut utiliser le script suivant :

var monExpressionReguliere = new RegExp("d(b+)d", "g");
var monTableau = monExpressionReguliere.exec("cdbbdbsbz");

Avec ces scripts, on obtient bien une correspondance, la méthode renvoie un tableau et met à jour les propriétés listées dans le tableau qui suit.

Comme le montre la seconde formulation de cet exemple, il est possible d'utiliser une expression rationnelle, créée avec un objet initialisé sans l'affecter à une variable. Cela implique qu'à chaque utilisation, on aura une nouvelle expression régulière distincte et qu'on ne pourra pas, pour cette raison, accéder aux propriétés de l'expression régulière. Avec le script suivant :

var monExpressionReguliere = /d(b+)d/g;
var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
console.log("La valeur de lastIndex est " + monExpressionReguliere.lastIndex);

// "La valeur de lastIndex est 5"

Si le script utilisé est :

var monTableau = /d(b+)d/g.exec("cdbbdbsbz");
console.log("La valeur de lastIndex est " + /d(b+)d/g.lastIndex);

// "La valeur de lastIndex est 0"

Les occurences de /d(b+)d/g dans les deux instructions sont des objets différents. Leurs propriétés lastIndex respectives ont donc des valeurs différentes. Quand il est nécessaire d'accéder aux propriétés d'un objet décrivant une expression rationnelle, il faudra d'abord l'affecter à une variable.

Utiliser les correspondances de groupes avec les parenthèses

Les parenthèses, utilisées dans un motif d'expression régulière, permettent de garder en mémoire un groupe (ou fragment) d'une correspondance. Ainsi, /a(b)c/ correspond aux caractères 'abc' et garde 'b' en mémoire. Pour récupérer ces fragments mémorisés, on peut utiliser les éléments du tableau array [1], ..., [n].

Le nombre de fragments qu'il est possible de garder entre parenthèses n'est pas limité. Le tableau renvoyé contiendra tout ce qui aura été trouvé. Les exemples qui suivent montrent comment utiliser cette syntaxe.

Le script qui suit utilise la méthode replace() pour échanger les mots d'une chaîne de caractères. Pour remplacer le texte, le script utilise $1 et $2 qui correspondent au premier et deuxième groupe correspondant.

var re = /(\w+)\s(\w+)/;
var str = "Titi toto";
var newstr = str.replace(re, "$2, $1");
console.log(newstr);

Cela affichera "toto, Titi".

Effectuer des recherches avancées en utilisant les drapeaux (flags)

Les expressions rationnelles peuvent être utilisées avec quatre drapeaux optionnels permettant des recherches globales et/ou ne respectant pas la casse. Ces drapeaux peuvent être utilisés séparement ou ensemble, quel que soit l'ordre. Ils font partie de l'expression régulière.

Pour utiliser un drapeau avec une expression régulière, on utilisera la syntaxe suivante :

var re = /motif/drapeaux;

ou

var re = new RegExp("motif", "drapeaux");

Les drapeaux font partie intégrante d'une expression régulière, ils ne peuvent pas être ajoutés ou supprimés ensuite.

Ainsi, re = /\w+\s/g permet de créer une expression régulière pour trouver un ou plusieurs caractères suivis d'un espace, la recherche est effectuée globalement, sur toute la chaîne de caractères.

var re = /\w+\s/g;
var str = "un deux trois quatre";
var monTableau = str.match(re);
console.log(monTableau);

Cela affichera ["un ", "deux ", "trois "]. On pourrait remplacer la ligne :

var re = /\w+\s/g;

avec la ligne :

var re = new RegExp("\\w+\\s", "g");

pour obtenir le même résultat.

Le drapeau m pourra être utilisé pour traiter une chaîne de caractères de plusieurs lignes comme plusieurs lignes distinctes. Si ce drapeau est utilisé, les caractères spéciaux ^ et $ correspondront au début ou à la fin de n'importe quelle ligne appartenant à la chaîne de caractères au lieu de correspondre simplement au début ou à la fin de la chaîne.

Exemples

Les exemples qui suivent utilisent les expressions régulières dans différents cas.

Changer l'ordre d'une saisie

L'exemple qui suit utilise les expressions régulières et string.split() et string.replace(). Le script nettoie la chaîne de caractères saisie qui contient des noms (prénom puis nom) séparés par des blancs, tabulations et points-virgules. Enfin il inverse les noms et prénoms puis trie la liste.

// La chaîne des noms contient plusieurs blancs et tabulations,
// il peut y avoir plusieurs espaces entre le nom et le prénom.
var noms = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";

var output = ["---------- Chaîne originale\n", noms + "\n"];

// Préparer deux expressions régulières pour stocker un tableau.
// et découper les chaînes dans ce tableau.

// motif: on peut avoir des blancs, un point virgule puis d'autres blancs
var motifs = /\s*;\s*/;

// Découper la chaîne de caractères en morceaux séparés par le précédent motif
// Stocker ces morceaux dans un tableau listeNoms
var listeNoms = noms.split(motif);

// nouveau motif : un ou plusieurs caractères, des blancs puis des caractères.
// On utilise des parenthèses pour garder en mémoire les groupes du motif.
// On utilisera ces groupes par la suite.
motif = /(\w+)\s+(\w+)/;

// Nouveau tableau pour enregistrer les noms traités.
var listeParNomFamille = [];

// Afficher le tableau des noms et remplir le nouveau tableau
// avec les noms et prénoms séparés par des virgules, le nom 
// de famille étant écrit en premier 
//
// La méthode replace supprime tout ce qui correspond au motif 
// et le remplace par le nom (mémorisé), une virgule, un espace
// et le prénom (mémorisé).
//
// Les variables $1 et $2 font références aux fragments gardés
// en mémoire lors de l'utilisation du motif.

output.push("---------- Après découpage avec l'expression régulière");

var i, len;
for (i = 0, len = listeNoms.length; i < len; i++){
  output.push(listeNoms[i]);
  listeParNomFamille[i] = listeNoms[i].replace(motif, "$2, $1");
}

// Afficher le nouveau tableau
output.push("---------- Noms et prénoms inversés");
for (i = 0, len = listeParNomFamille.length; i < len; i++){
  output.push(listeParNomFamille[i]);
}

// Trier par le nom de famille puis afficher le tableau trié
listeParNomFamille.sort();
output.push("---------- Triée");
for (i = 0, len = listeParNomFamille.length; i < len; i++){
  output.push(listeParNomFamille[i]);
}

output.push("---------- Fin");

console.log(output.join("\n"));

Utiliser les caractères spéciaux pour vérifier la saisie

Dans l'exemple suivant, on s'attend à ce que l'utilisateur saisissent un numéro de téléphone. Quand l'utilisateur appuie sur le bouton "Vérifier", le script vérifie la validité du numéro. Si le numéro est valide (il correspond à la séquence de caractères fournie par l'expression régulière), le script affiche un message remerciant l'utilisateur et confirmant le numéro. S'il est invalide, le script informe l'utilisateur et lui signifie que les informations saisies ne sont pas valides.

Dans les parenthèses sans mémoire (?: , l'expression régulière cherche les deux premiers chiffres ou l'indicatif du pays suivi d'un blanc et du premier chiffre, ce qui correspond à

\d{2}|\+\d{2}[ ]\d

Cette partie signifie : deux chiffres OU un signe '+' suivi de deux chiffres, un blanc et un autre chiffre.

Ensuite, on a un groupe qui est mémorisé (entre parenthèses) :

([- ])

Ce groupe correspond à ce qui va être utilisé pour séparer les différentes composantes du numéro de téléphone.

Ensuite,

\d{2}\1

signifie qu'on a deux chiffres suivi du premier groupe qui est celui qui définit le séparateur. Le reste est composé de la même façon. Ainsi les numéros de téléphone +33 1 23 45 67 89 et 01 23 45 67 89 seront tous les deux valides.

L'événement Change, provoqué quand l'utilisateur appuie sur Entrée, renseigne la valeur RegExp.input.

<!DOCTYPE html>
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
    <meta http-equiv="Content-Script-Type" content="text/javascript">  
    <script type="text/javascript">  
      var re = /(?:\d{2}|\+\d{2}[ ]\d)([- ])\d{2}\1\d{2}\1\d{2}\1\d{2}/;  
      function testInfo(phoneInput){  
        var OK = re.exec(phoneInput.value);  
        if (!OK)  
          window.alert(phone.input + " n'est pas un numéro de téléphone valide!");  
        else
          window.alert("Merci, votre numéro est : " + OK[0]);  
      }  
    </script>  
  </head>  
  <body>  
    <p>Saisissez votre numéro de téléphone (avec indicatif) puis cliquez sur "Vérifier".
        <br>Le format attendu est ## ## ## ## ## ou +## # ## ## ## ##.</p>
    <form action="#">  
      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Vérifier</button>
    </form>  
  </body>  
</html>