Guide du débutant pour les expressions régulières en JavaScript

Toute personne travaillant avec JavaScript devra gérer des chaînes à un moment ou à un autre. Parfois, il vous suffira de stocker une chaîne dans une autre variable, puis de la transmettre. D'autres fois, vous devrez l'inspecter et voir s'il contient une sous-chaîne particulière.

Cependant, les choses ne sont pas toujours aussi faciles. Il y aura des moments où vous ne chercherez pas une sous-chaîne particulière mais un ensemble de sous-chaînes qui suivent un certain motif.

Supposons que vous deviez remplacer toutes les occurrences de "pommes" dans une chaîne par "pommes". Vous pouvez simplement utiliser theMainString.replace ("Pommes", "pommes"). Gentil et facile.

Maintenant, supposons que vous deviez remplacer "appLes" par "pommes". De même, "pommes" devrait devenir "pommes" aussi. Fondamentalement, toutes les variantes de cas "Apple" doivent être remplacées par "Apple". Passer de simples chaînes comme argument ne sera plus pratique ni efficace dans de tels cas.

C’est ici que les expressions régulières entrent. Vous pouvez simplement utiliser l’option insensible à la casse. je et en finir avec ça. Avec le drapeau en place, peu importe que la chaîne d'origine contienne "Pommes", "Pommes", "ApPlEs" ou "Pommes". Chaque instance du mot sera remplacée par "pommes".

Tout comme l'indicateur de casse, les expressions régulières offrent de nombreuses autres fonctionnalités qui seront abordées dans ce tutoriel..

Utilisation d'expressions régulières en JavaScript

Vous devez utiliser une syntaxe légèrement différente pour indiquer une expression régulière dans différents Chaîne méthodes. Contrairement à une simple chaîne de caractères placée entre guillemets, une expression régulière consiste en un modèle placé entre des barres obliques. Tous les indicateurs que vous utilisez dans une expression régulière seront ajoutés après la deuxième barre oblique..

Pour revenir à l'exemple précédent, voici ce que le remplacer() méthode ressemblerait avec une expression régulière et une simple chaîne.

"J'ai mangé des pommes" .replace ("Pommes", "pommes"); // J'ai mangé des pommes "J'ai mangé des pommes" .replace (/ Apples / i, "pommes"); // J'ai mangé des pommes "J'ai mangé des aPPles" .replace ("Pommes", "pommes"); // J'ai mangé des aPPles "J'ai mangé des aPPles" .replace (/ Apples / i, "pommes"); // j'ai mangé des pommes

Comme vous pouvez le constater, l'expression régulière a fonctionné dans les deux cas. Nous allons maintenant en apprendre plus sur les drapeaux et les caractères spéciaux qui composent le motif dans une expression régulière.

Barre oblique inverse dans les expressions régulières

Vous pouvez transformer des caractères normaux en caractères spéciaux en ajoutant une barre oblique inverse devant eux. De même, vous pouvez transformer des caractères spéciaux en caractères normaux en ajoutant une barre oblique inversée devant eux..

Par exemple, n'est pas un caractère spécial. toutefois, \ré est utilisé pour faire correspondre un caractère numérique dans une chaîne. De même, n'est pas un caractère spécial non plus, mais \RÉ est utilisé pour faire correspondre des caractères non numériques dans une chaîne.

Les caractères numériques comprennent 0, 1, 2, 3, 4, 5, 6, 7, 8 et 9. Lorsque vous utilisez \ré dans une expression régulière, il correspond à l'un de ces neuf caractères. Quand vous utilisez \RÉ dans une expression régulière, il correspondra à tous les caractères non numériques.

L'exemple suivant devrait clarifier les choses.

"L8" .remplace (/ \ d / i, "E"); // LE "L8" .replace (/ \ D / i, "E"); // E8 "LLLLL8" .replace (/ \ D / i, "E"); // ELLLL8

Notez que seul le premier caractère correspondant est remplacé dans le troisième cas. Vous pouvez également utiliser des drapeaux pour remplacer toutes les correspondances. Nous allons en apprendre davantage sur ces drapeaux plus tard.

Juste comme \ré et \RÉ, il y a aussi d'autres séquences de caractères spéciaux.

  1. Vous pouvez utiliser \ w pour faire correspondre un caractère "mot" dans une chaîne. Ici, le caractère du mot fait référence à A-Z, a-z, 0-9 et _. Donc, en gros, il va correspondre à tous les chiffres, à tous les alphabets minuscules et majuscules et au trait de soulignement..
  2. Vous pouvez utiliser \ W pour faire correspondre un caractère autre qu'un mot dans une chaîne. Il va correspondre aux caractères comme%, $, #, ₹, etc.
  3. Vous pouvez utiliser \ s pour faire correspondre un seul caractère d’espace blanc, comprenant espace, tabulation, saut de page et saut de ligne. De même, vous pouvez utiliser \ S pour correspondre à tous les caractères autres que l'espace blanc.
  4. Vous pouvez également rechercher un caractère d’espace blanc spécifique en utilisant \F, \ n, \ r, \ t, et \ v, qui correspondent aux sauts de page, sauts de ligne, retour chariot, onglet horizontal et onglet vertical.

Parfois, vous rencontrerez des situations dans lesquelles vous devez remplacer un mot par son substitut, mais uniquement si ne paspartie d'un mot plus large. Par exemple, considérons la phrase suivante:

"Beaucoup d'images d'ananas ont été postées sur l'application".

Dans ce cas, nous voulons remplacer le mot "application" par "conseil". Cependant, l'utilisation d'un simple motif d'expression régulière transformera "pomme" en "bordel" et la dernière phrase deviendra:

"Beaucoup d'images de pineboardle ont été postées sur l'application".

Dans ce cas, vous pouvez utiliser une autre séquence de caractères spéciaux: \ b. Ceci vérifie les limites des mots. Une limite de mot est formée en utilisant des caractères autres que des mots tels que l'espace, "$", "%", "#", etc. Attention, il inclut également des caractères accentués tels que "ü".

"Beaucoup d'images d'ananas ont été postées sur l'application" .replace (/ app /, "tableau"); // De nombreuses images de pineboardle ont été publiées sur l'application "De nombreuses images d'ananas ont été publiées sur l'application" .replace (/ \ bapp /, "board"); // De nombreuses images d'ananas ont été affichées sur le tableau.

De même, vous pouvez utiliser\ B faire correspondre une limite de non-mot. Par exemple, vous pouvez utiliser \ B ne faire correspondre que "app" quand il est dans un autre mot, comme "ananas".

Faire correspondre un motif "n" nombre de fois

Vous pouvez utiliser ^ dire à JavaScript de ne regarder que le début de la chaîne pour une correspondance. De même, vous pouvez utiliser $ regarder seulement à la fin de la chaîne pour une correspondance.

Vous pouvez utiliser *pour correspondre à l'expression précédente 0 fois ou plus. Par exemple, / Ap * / correspondra UNE, Ap, App, Appp, etc.

De manière similaire, vous pouvez utiliser + pour correspondre à l'expression précédente 1 fois ou plus. Par exemple, / Ap + / correspondra Ap, App, Appp, etc. L'expression ne correspondra pas au single UNE cette fois.

Parfois, vous souhaitez uniquement faire correspondre un nombre spécifique d'occurrences d'un modèle donné. Dans ce cas, vous devez utiliser le n séquence de caractères, où n est un nombre. Par exemple, / Ap 2 / correspondra App mais non Ap. Il correspondra également aux deux premiers "p" de Appp et laisser le troisième intact.

Vous pouvez utiliser n, correspondre à au moins 'n' occurrences d'une expression donnée. Cela signifie que / Ap 2, / correspondra App mais non Ap. Il correspondra également à tous les "p" de Apppp et remplacez-les par votre chaîne de remplacement.

Vous pouvez aussi utiliser n, m pour spécifier un nombre minimal et maximal et limiter le nombre de correspondances de l'expression donnée. Par exemple, / Ap 2,4 / correspondra App, Appp, et Apppp. Il correspondra également aux quatre premiers «p» de Apppppp et laissez le reste d'entre eux intact.

"Apppppples" .replace (/ Ap * /, "App"); // Pommes "Ales" .replace (/ Ap * /, "App"); // Pommes "Pommes" .replace (/ Ap 2 /, "Ajouter"); // Ajoute des "applications" .replace (/ Ap 2, /, "Add"); // Addles "Appppples" .replace (/ Ap 2,4 /, "Ajouter"); // Addples

Utiliser les parenthèses pour mémoriser les correspondances

Jusqu'ici, nous avons seulement remplacé les modèles par une chaîne constante. Par exemple, dans la section précédente, le remplacement que nous avons utilisé était toujours "Ajouter". Parfois, vous devrez chercher une correspondance de motif dans la chaîne donnée, puis la remplacer par une partie du motif..

Supposons que vous deviez trouver un mot de cinq lettres ou plus dans une chaîne, puis ajouter un "s" à la fin du mot. Dans ce cas, vous ne pourrez pas utiliser une valeur de chaîne constante en remplacement, car la valeur finale dépend du modèle correspondant..

"J'aime Apple" .replace (/ (\ w 5,) /, '$ 1s'); // J'aime les pommes "J'aime la banane" .replace (/ (\ w 5,) /, '$ 1s'); // J'aime les bananes 

Cet exemple est simple, mais vous pouvez utiliser la même technique pour conserver plusieurs modèles correspondants en mémoire. Le nombre de sous-modèles dans la correspondance complète sera déterminé par le nombre de parenthèses utilisées.

Dans la chaîne de remplacement, la première sous-correspondance sera identifiée à l'aide de 1 $, le deuxième sous-match sera identifié en utilisant 2 $, etc. Voici un autre exemple pour clarifier l'utilisation des parenthèses.

"Je cherche John et Jason" .remplace (/ (\ w +) \ sand \ s (\ w +) /, '$ 2 et $ 1'); // je cherche Jason et John

Utilisation de drapeaux avec des expressions régulières

Comme je l'ai mentionné dans l'introduction, une autre caractéristique importante des expressions régulières est l'utilisation d'indicateurs spéciaux pour modifier le déroulement d'une recherche. Les indicateurs sont facultatifs, mais vous pouvez les utiliser pour effectuer des recherches telles que la recherche globale ou la casse..

Ce sont les quatre indicateurs couramment utilisés pour changer la façon dont JavaScript recherche ou remplace une chaîne..

  • g: Cet indicateur effectuera une recherche globale au lieu de s’arrêter après le premier match.
  • je: Cet indicateur effectuera une recherche sans rechercher une correspondance de casse exacte. Par exemple, Apple, aPPLe et apPLE sont tous traités de la même manière lors de recherches insensibles à la casse..
  • m: Cet indicateur effectuera une recherche sur plusieurs lignes.
  • y: Ce drapeau cherchera une correspondance dans l'index indiqué par le lastIndex propriété.

Voici quelques exemples d'expressions régulières utilisées avec des drapeaux:

"J'ai mangé des pommes, vous avez mangé des pommes" .replace (/ pommes /, "mangues"); // "J'ai mangé des mangues, vous avez mangé des pommes" "J'ai mangé des pommes, vous avez mangé des pommes" .replace (/ pommes / g, "mangues"); // "J'ai mangé des mangues, vous avez mangé des mangues" "J'ai mangé des pommes, vous avez mangé des POMMES" .replace (/ pommes /, "mangues"); // "J'ai mangé des mangues, vous avez mangé des POMMES" "J'ai mangé des pommes, vous avez mangé des POMMES" .replace (/ apples / gi, "mangues"); // "J'ai mangé des mangues, vous avez mangé des mangues" var stickyRegex = / pommes / y; stickyRegex.lastIndex = 3; "J'ai mangé des pommes, vous avez mangé des pommes" .replace (stickyRegex, "mangues"); // "J'ai mangé des pommes, vous avez mangé des pommes" var stickyRegex = / pommes / y; stickyRegex.lastIndex = 6; "J'ai mangé des pommes, vous avez mangé des pommes" .replace (stickyRegex, "mangues"); // "J'ai mangé des mangues, vous avez mangé des pommes" var stickyRegex = / pommes / y; stickyRegex.lastIndex = 8; "J'ai mangé des pommes, vous avez mangé des pommes" .replace (stickyRegex, "mangues"); // "J'ai mangé des pommes, vous avez mangé des pommes"

Dernières pensées

Le but de ce tutoriel était de vous présenter les expressions régulières en JavaScript et leur importance. Nous avons commencé par les bases puis nous avons couvert la barre oblique inverse et d’autres caractères spéciaux. Nous avons également appris à rechercher un motif répété dans une chaîne et à mémoriser les correspondances partielles dans un motif afin de les utiliser plus tard..

Enfin, nous avons découvert des indicateurs couramment utilisés qui rendent les expressions régulières encore plus puissantes. Vous pouvez en apprendre plus sur les expressions régulières dans cet article sur MDN.

.