JavaScript
Expressions régulières

Syntaxe

• laisser regex = / pattern / [ flags ]
• let regex = new RegExp (' pattern ', [ flags ])
• let ismatch = regex.test (' text ')
• let results = regex.exec (' text ')

Paramètres

Remarques

Créer un objet RegExp

Création standard

Il est recommandé d'utiliser ce formulaire uniquement lors de la création de regex à partir de variables dynamiques.

Utiliser lorsque l'expression peut changer ou que l'expression est générée par l'utilisateur.

var re = new RegExp(".*");

Avec des drapeaux:

var re = new RegExp(".*", "gmi");

Avec une barre oblique inverse: (cela doit être échappé car le regex est spécifié avec une chaîne)

var re = new RegExp("\\w*");

Initialisation statique

Utilisez cette option lorsque vous savez que l'expression régulière ne changera pas et que vous connaissez l'expression avant l'exécution.

var re = /.*/;

Avec des drapeaux:

var re = /.*/gmi;

Avec une barre oblique inverse: (cela ne doit pas être échappé car le regex est spécifié dans un littéral)

var re = /\w*/;

Drapeaux RegExp

Vous pouvez spécifier plusieurs indicateurs pour modifier le comportement de RegEx. Les indicateurs peuvent être ajoutés à la fin d'un littéral d'expression régulière, par exemple en spécifiant gi dans /test/gi , ou en tant que second argument du constructeur RegExp , comme dans le new RegExp('test', 'gi') .

g - Global. Trouve tous les résultats au lieu de s'arrêter après le premier.

i - Ignorer le cas. /[az]/i est équivalent à /[a-zA-Z]/ .

m - multiligne. ^ et $ correspondent au début et à la fin de chaque ligne traitant respectivement \n et \r comme des délimiteurs au lieu de simplement le début et la fin de la chaîne entière.

Correspondance avec .exec ()

Match à l'aide de .exec()

RegExp.prototype.exec(string) renvoie un tableau de captures, ou null s'il n'y a pas de correspondance.

var re = /([0-9]+)[a-z]+/;
var match = re.exec("foo123bar");

match.index est 3, l'emplacement (base zéro) de la correspondance.

match[0] est la chaîne de correspondance complète.

match[1] est le texte correspondant au premier groupe capturé. match[n] serait la valeur du n ième groupe capturé.

Boucle à travers les correspondances à l'aide de .exec()

var re = /a/g;
var result;
while ((result = re.exec('barbatbaz')) !== null) {
    console.log("found '" + result[0] + "', next exec starts at index '" + re.lastIndex + "'");
}

Production attendue

trouvé 'a', le prochain exec commence à l'index '2'
trouvé 'a', le prochain exec commence à l'index '5'
trouvé 'a', le prochain exec commence à l'index '8'

Vérifiez si la chaîne contient un motif en utilisant .test ()

var re = /[a-z]+/;
if (re.test("foo")) {
    console.log("Match exists.");
}

La méthode de test effectue une recherche pour voir si une expression régulière correspond à une chaîne. L'expression régulière [az]+ recherchera une ou plusieurs lettres minuscules. Comme le motif correspond à la chaîne, «match existe» sera consigné dans la console.

Utiliser RegExp avec des chaînes

L'objet String a les méthodes suivantes qui acceptent les expressions régulières comme arguments.

• "string".match(...
• "string".replace(...
• "string".split(...
• "string".search(...

Match avec RegExp

console.log("string".match(/[i-n]+/));
console.log("string".match(/(r)[i-n]+/));

Production attendue

Array ["in"]
Array ["rin", "r"]

Remplacez par RegExp

console.log("string".replace(/[i-n]+/, "foo"));

Production attendue

strofog

Split avec RegExp

console.log("stringstring".split(/[i-n]+/));

Production attendue

Array ["str", "gstr", "g"]

Rechercher avec RegExp

.search() renvoie l'index auquel une correspondance est trouvée ou -1.

console.log("string".search(/[i-n]+/));
console.log("string".search(/[o-q]+/));

Production attendue

3
-1

Remplacement d'une chaîne avec une fonction de rappel

String#replace peut avoir une fonction en second argument afin que vous puissiez fournir un remplacement basé sur une logique.

"Some string Some".replace(/Some/g, (match, startIndex, wholeString) => {
  if(startIndex == 0){
    return 'Start';
  } else {
    return 'End';
  }
});
// will return Start string End

Bibliothèque de modèles à une ligne

let data = {name: 'John', surname: 'Doe'}
"My name is {surname}, {name} {surname}".replace(/(?:{(.+?)})/g, x => data[x.slice(1,-1)]);

// "My name is Doe, John Doe"

Groupes RegExp

JavaScript prend en charge plusieurs types de groupes dans ses expressions régulières, groupes de capture, groupes de non-capture et anticipations . À l' heure actuelle, il n'y a pas de support regarder en arrière.

Capturer

Parfois, la correspondance souhaitée dépend de son contexte. Cela signifie qu'un RegExp simple trouvera le morceau de la chaîne qui présente un intérêt, la solution est donc d'écrire un groupe de capture (pattern) . Les données capturées peuvent alors être référencées comme ...

• Remplacement de chaîne "$n" où n est le nième groupe de capture (à partir de 1 )
• Le n ème argument dans une fonction de rappel
• Si le RegExp n'est pas marqué g , le n + 1 ème élément d'un tableau str.match renvoyé
• Si RegExp est marqué g , str.match ignore les captures, utilise plutôt re.exec

Disons qu'il y a une chaîne où tous les signes + doivent être remplacés par un espace, mais seulement s'ils suivent un caractère de lettre. Cela signifie qu'un simple match inclura ce caractère de lettre et qu'il sera également supprimé. La capture est la solution car cela signifie que la lettre correspondante peut être préservée.

let str = "aa+b+cc+1+2",
    re = /([a-z])\+/g;

// String replacement
str.replace(re, '$1 '); // "aa b cc 1+2"
// Function replacement
str.replace(re, (m, $1) => $1 + ' '); // "aa b cc 1+2"

Non-capture

En utilisant le formulaire (?:pattern) , ceux-ci fonctionnent de la même manière que pour capturer des groupes, sauf qu'ils ne stockent pas le contenu du groupe après la correspondance.

Ils peuvent être particulièrement utiles si d’autres données sont en cours de capture et que vous ne souhaitez pas déplacer les index, mais que vous devez effectuer une correspondance de modèle avancée, par exemple un OU

let str = "aa+b+cc+1+2",
    re = /(?:\b|c)([a-z])\+/g;

str.replace(re, '$1 '); // "aa+b c 1+2"

Look-Ahead

Si la correspondance souhaitée repose sur quelque chose qui la suit, plutôt que de la faire correspondre et de la capturer, il est possible de l'utiliser pour la tester, mais ne pas l'inclure dans la correspondance. Une anticipation positive a la forme (?=pattern) , une anticipation négative (où l'expression ne se produit que si le modèle d'anticipation ne correspond pas) a la forme (?!pattern)

let str = "aa+b+cc+1+2",
    re = /\+(?=[a-z])/g;

str.replace(re, ' '); // "aa b cc+1+2"

Utilisation de Regex.exec () avec des parenthèses regex pour extraire les correspondances d'une chaîne

Parfois, vous ne voulez pas simplement remplacer ou supprimer la chaîne. Parfois, vous voulez extraire et traiter des correspondances. Voici un exemple de manipulation des correspondances.

Qu'est-ce qu'un match? Lorsqu'une sous-chaîne compatible est trouvée pour l'intégralité de l'expression rationnelle dans la chaîne, la commande exec génère une correspondance. Une correspondance est un tableau composé en premier lieu de la sous-chaîne entière qui correspond et de toutes les parenthèses de la correspondance.

Imaginez une chaîne html:

<html>
<head></head>
<body>
  <h1>Example</h1>
  <p>Look a this great link : <a href="https://stackoverflow.com">Stackoverflow</a> http://anotherlinkoutsideatag</p>
  Copyright <a href="https://stackoverflow.com">Stackoverflow</a>
</body>

Vous voulez extraire et obtenir tous les liens à l' intérieur d' a balise. Au début, voici la regex que vous écrivez:

var re = /<a[^>]*href="https?:\/\/.*"[^>]*>[^<]*<\/a>/g;

Mais maintenant, imaginez que vous voulez le href et l' anchor de chaque lien. Et vous le voulez ensemble. Vous pouvez simplement ajouter une nouvelle expression régulière pour chaque correspondance OU vous pouvez utiliser des parenthèses:

var re = /<a[^>]*href="(https?:\/\/.*)"[^>]*>([^<]*)<\/a>/g; 
var str = '<html>\n    <head></head>\n    <body>\n        <h1>Example</h1>\n        <p>Look a this great link : <a href="https://stackoverflow.com">Stackoverflow</a> http://anotherlinkoutsideatag</p>\n\n        Copyright <a href="https://stackoverflow.com">Stackoverflow</a>\n    </body>\';\n';
var m;
var links = [];

while ((m = re.exec(str)) !== null) {
    if (m.index === re.lastIndex) {
        re.lastIndex++;
    }
    console.log(m[0]); // The all substring
    console.log(m[1]); // The href subpart
    console.log(m[2]); // The anchor subpart

    links.push({
      match : m[0],   // the entire match
      href : m[1],    // the first parenthesis => (https?:\/\/.*)
      anchor : m[2],  // the second one => ([^<]*)
    });
}

A la fin de la boucle, vous avez un tableau de lien avec anchor et href et vous pouvez l'utiliser pour écrire un markdown par exemple:

links.forEach(function(link) {
  console.log('[%s](%s)', link.anchor, link.href);
});

Pour aller plus loin :

• Parenthèse imbriquée