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


Exemple

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