Les expressions régulières Javascript ne sont pas si intimidantes – voici comment concevoir la vôtre

0
1556

La première fois que j’ai rencontré une expression régulière, c’était il y a de nombreuses années maintenant, mais je me souviens encore de mes premières réflexions à ce sujet:

  1. Quelle est cette chose en forme de chaîne?
  2. Je ne veux pas y toucher, ça fait peur.

Je ne me souviens pas exactement de ce que faisait cette expression rationnelle, ni à quoi elle ressemblait exactement, mais cela m’a fait peur. Avec le recul, je me rends compte maintenant que ce n’était pas vraiment effrayant après tout. À première vue, c’était un moyen facile de résoudre le problème en cours. Mais pourquoi ai-je jamais ressenti ça? C’est juste la maladresse de la syntaxe, ils ont certainement l’air étrange, et si vous ne savez pas ce qu’ils sont, ils ont l’air très compliqués.

Mon intention ici n’est pas de vous faire peur parce que l’expression régulière peut être simple. Mais si vous ne comprenez pas encore l’expression régulière, cela peut sembler un peu intimidant, comme cet exemple ci-dessous:

Dans cet article, je vais démystifier les expressions régulières. Je vais vous dire à quoi ils ressemblent, à quoi ils servent et comment vous pouvez concevoir vos expressions régulières pour résoudre les problèmes.

Alors d’abord. Quelles sont les expressions régulières?

Les expressions régulières sont un moyen de décrire les modèles dans les chaînes de données. Ils ont leur propre syntaxe, tout comme leur propre langage de programmation, et il existe des méthodes et des moyens d’interagir avec les expressions régulières dans la plupart (sinon tous) les langages de programmation.

Mais de quel type de modèles parlons-nous? Des exemples courants d’expressions régulières déterminent par exemple si une chaîne donnée est une adresse e-mail ou un numéro de téléphone, ou ils peuvent être utilisés pour vérifier si un mot de passe remplit une certaine complexité.

Une fois que vous avez le modèle, que pouvez-vous faire avec les expressions régulières?

  • Validez une chaîne avec le modèle.
  • Recherchez dans une chaîne.
  • Remplacez les sous-chaînes dans une chaîne.
  • Extraire des informations d’une chaîne.

Travailler avec des expressions régulières

Je vais également aborder la façon de travailler avec des expressions régulières en JavaScript, bien que les concepts appris ici s’appliquent également à d’autres langues. Cela dit, dans d’autres langues, il peut y avoir des différences dans la façon dont elles traitent les expressions régulières.

Regardons un exemple qui validera si la chaîne contient le mot Hello ou pas.

En JavaScript, il existe deux façons de le savoir:

Constructeur

Littéral

Dans les deux scénarios, la variable regex est un objet, qui expose différentes méthodes que nous pouvons utiliser pour interagir avec l’expression régulière. Cependant, le premier exemple a un aspect plus familier, instanciant un objet avec un string comme paramètre. Dans le deuxième scénario, les choses semblent un peu étranges, il y a quelque chose qui ressemble à un string mais au lieu de guillemets est enveloppé dans /. Comme il s’avère que les deux façons représentent la même chose, j’aime personnellement la deuxième option, qui est très propre, et les IDE ou les éditeurs de code peuvent avoir une coloration syntaxique sur l’expression régulière par rapport au premier scénario où le modèle d’expression régulière est défini comme juste un chaîne.

Jusqu’à présent, nos expressions régulières ont été assez simples, c’est juste la correspondance exacte sur la chaîne Hello et cela a parfaitement fonctionné pour JavaScript. Cependant, le résultat que nous avons obtenu peut être différent pour d’autres langues, même si l’expression régulière est la même. En effet, chaque langage de programmation peut définir certains paramètres par défaut ou comportements spéciaux dans leurs expressions régulières qui peuvent varier de l’un à l’autre. Je suis désolé pour ça, mais c’est comme ça. Lorsque nous construisons un RegEx, la plupart du temps, il en sera de même dans la plupart des langages de programmation. Avant de l’utiliser ailleurs, vous devrez le tester et l’ajuster si nécessaire.

Différentes utilisations des expressions régulières

Lorsque nous travaillons avec des expressions régulières, nous travaillons essentiellement avec les méthodes d’objet RegExp ou avec des méthodes de chaîne qui nous permettent d’interagir avec les expressions régulières.

RegExp.prototype.test ()

le test() méthode exécute une recherche de correspondance entre une expression régulière et une chaîne spécifiée. Retour true ou false.

Voici un exemple. Tout d’abord, voyez si la chaîne spécifiée contient la chaîne foo:

RegExp.prototype.exec ()

le exec() exécute une recherche de correspondance dans une chaîne spécifiée. Renvoie un tableau de résultats ou null.

Exemple: Recherchez toutes les instances de foo dans la chaîne donnée:

String.prototype.match ()

le match() méthode récupère le résultat de la correspondance d’une chaîne avec une expression régulière.

Exemple: Trouvez toutes les lettres majuscules sur une chaîne:

String.prototype.matchAll ()

le matchAll() méthode renvoie un itérateur de tous les résultats correspondant à une chaîne par rapport à une expression régulière, y compris la capture de groupes.

Exemple: Rechercher les occurrences d’une chaîne dans des groupes:

String.prototype.search ()

le search() méthode exécute une recherche de correspondance entre une expression régulière et cet objet chaîne. Il renvoie l’index auquel la correspondance s’est produite, ou -1 s’il n’y a pas de correspondance.

Exemple: Trouvez la position de tout caractère qui n’est pas un mot ou un espace blanc:

String.prototype.replace ()

le replace() méthode renvoie une nouvelle chaîne avec certaines ou toutes les correspondances d’un modèle remplacées par un remplacement. Le modèle peut être une chaîne ou un RegExp, et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance. Si le modèle est une chaîne, seule la première occurrence sera remplacée.

Notez que la chaîne d’origine restera inchangée.

Exemple: Remplacez le mot chien par singe:

Ne vous méprenez pas ici, la méthode replace () utilise des expressions régulières, donc même lorsque nous passons une chaîne, elle sera interprétée comme une expression régulière et exécutée comme telle. D’où la raison pour laquelle sur le deuxième console.log, le mot chien n’a été remplacé qu’une seule fois. Mais nous en parlerons plus tard.

String.prototype.replaceAll ()

le replaceAll() méthode renvoie une nouvelle chaîne avec toutes les correspondances d’un modèle remplacées par un remplacement. Le modèle peut être une chaîne ou un RegExp, et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance.

Exemple: Remplacez le mot «chien» par «singe»:

C’est similaire à notre exemple précédent, mais maintenant nous remplaçons toutes les correspondances. J’évite généralement cette fonction car je peux toujours le faire avec des expressions régulières et l’utilisation de la fonction replace () plus est une fonction qui n’est pas prise en charge sur toutes les plates-formes / navigateurs.

String.prototype.split ()

le split() méthode divise une chaîne en un ensemble ordonné de sous-chaînes, place ces sous-chaînes dans un tableau et renvoie le tableau. La division se fait en recherchant un motif; où le modèle est fourni en tant que premier paramètre de l’appel de la méthode.

Exemple:

Construire des expressions régulières

Maintenant que nous savons comment utiliser les expressions régulières et les différentes méthodes disponibles pour interagir, passons un peu de temps à créer des expressions régulières correspondant aux modèles souhaités.

Ancrage

/hello/

Cela correspondra hello partout où il a été mis à l’intérieur de la chaîne. Si vous souhaitez faire correspondre des chaînes commençant par «bonjour», utilisez le ^ opérateur:

Si vous souhaitez faire correspondre les chaînes qui se terminent par hello, Utilisez le $ opérateur:

Vous pouvez également les combiner pour trouver des correspondances exactes comme indiqué ci-dessous:

Pour trouver des chaînes avec des caractères génériques au milieu, vous pouvez utiliser .*, qui correspond à tout caractère répété zéro ou plusieurs fois:

Faites correspondre les éléments par caractère ou plage numérique

Autrefois, la fonction très cool des expressions régulières est la possibilité de faire correspondre par caractère ou plage numérique. Mais, qu’est-ce que je veux dire par plage? Eh bien, c’est quelque chose qui ressemble à ceci:

Ces modèles d’expression régulière de type correspondront quand au moins un des caractères de la plage correspond:

Vous pouvez également combiner des gammes:

Nier un modèle

Nous avons vu que le ^ personnage au début d’un motif l’ancre au début d’une chaîne. Cependant, lorsqu’il est utilisé à l’intérieur d’une plage, il le nie:

Il existe des caractères spéciaux dans les expressions régulières, dont certains incluent:

  • d correspond à n’importe quel chiffre, équivalent à [0-9]
  • D correspond à tout caractère qui n’est pas un chiffre, équivalent à [^0-9]
  • w correspond à n’importe quel caractère alphanumérique (plus le trait de soulignement), équivalent à [A-Za-z_0-9]
  • W correspond à tout caractère non alphanumérique, à l’exception de [^A-Za-z_0-9]
  • s correspond à n’importe quel caractère d’espacement: espaces, tabulations, sauts de ligne et espaces Unicode
  • S correspond à n’importe quel caractère qui n’est pas un espace
  • correspond à null
  • n correspond à un caractère de nouvelle ligne
  • t correspond à un caractère de tabulation
  • uXXXX correspond à un caractère unicode avec le code XXXX (nécessite le drapeau u)
  • . correspond à tout caractère qui n’est pas un caractère de nouvelle ligne (par exemple n) (sauf si vous utilisez le drapeau s, expliqué plus loin)
  • [^] correspond à n’importe quel caractère, y compris les caractères de nouvelle ligne. Il est utile sur les chaînes multilignes
  • b correspond à un ensemble de caractères au début ou à la fin d’un mot
  • B correspond à un ensemble de caractères pas au début ou à la fin d’un mot

Choix d’expression régulière (ou)

Si vous souhaitez rechercher une chaîne ou une autre, utilisez le | opérateur:

Quantificateurs

Les quantificateurs sont des opérateurs spéciaux, en voici quelques-uns:

?: quantificateur facultatif Imaginez que vous devez trouver si une chaîne contient un chiffre, juste celui, vous pouvez faire quelque chose comme:

+: 1 ou plus Correspond à un ou plusieurs éléments (> = 1):

*: 0 ou plus Correspond à cero ou plus (> = 0) éléments:

{n}: nombre de matchs fixe Correspond exactement à «n» éléments:

{n, m}: n à m nombre de correspondances Correspond entre «n» et «m» fois:

m peut également être omis, dans ce cas, il correspondra à au moins «n» éléments:

S’échapper

Comme nous l’avons déjà vu, il y a certains personnages qui ont une signification particulière, mais que faire si nous voulons faire correspondre ces personnages? Il est possible d’échapper des caractères spéciaux avec, voyons un exemple:

Groupes

À l’aide de parenthèses, vous pouvez créer des groupes de caractères: (...):

Vous pouvez également utiliser les qualificatifs (comme la répétition ou le qualificatif facultatif) pour un groupe:

Les groupes sont également très intéressants, surtout lorsqu’ils sont utilisés avec des fonctions comme match() et exec() comme nous l’avons vu précédemment, ils peuvent être capturés séparément:

Exemple avec exec():


Exemple avec match():

Groupes de capture nommés

Avec ES2018, il est désormais possible d’attribuer des noms aux groupes, de sorte que l’utilisation des résultats est beaucoup plus facile. Maintenant, jetez un œil à l’exemple suivant sans nommer les groupes:

Maintenant, en utilisant des groupes nommés:

Drapeaux

Comme nous l’avons vu dans l’exemple du constructeur, les expressions régulières ont des indicateurs qui modifient le comportement des correspondances:

  • g: correspond plusieurs fois au motif
  • i: rend le regex insensible
  • m: active le mode multiligne. Dans ce mode, ^ et $ correspondent au début et à la fin de la chaîne entière. Sans cela, avec les chaînes multilignes, elles correspondent au début et à la fin de chaque ligne.
  • u: active la prise en charge de l’unicode (introduit dans ES6 / ES2015)
  • s: abréviation de single line, elle provoque le. pour faire correspondre également les nouveaux caractères de ligne

Les indicateurs peuvent être combinés et, dans le cas des littéraux d’expression régulière, ils sont définis à la fin de l’expression régulière:

Ou en utilisant le constructeur comme deuxième paramètre de la fonction:

C’était beaucoup, assez avec ça, voyons quelques exemples sympas:

Fiabilité du mot de passe

Cela vérifie la solidité d’un mot de passe et est particulièrement utile si vous souhaitez créer votre propre validateur de mot de passe. Je sais que c’est subjectif, car différents services peuvent avoir des besoins différents, mais c’est un excellent point de départ.

Validation de l’adresse e-mail

C’est probablement l’un des cas les plus connus pour les expressions régulières, la validation des adresses e-mail.

Adresses IP

V4:

V6:

Extraire le domaine de l’URL

Extraire la source d’image

Numéros de carte de crédit

Les expressions régulières sont une fonctionnalité très puissante, qui peut être intimidante au début. Mais une fois que vous les maîtrisez, ils sont plutôt cool. Aujourd’hui, nous avons appris ce qu’ils sont, comment les utiliser, comment les construire et quelques exemples sympas. J’espère que la prochaine fois que vous en verrez un dans vos projets, vous ne fuirez pas (comme moi), et vous essayez de le comprendre et de travailler avec.

Cet article a été initialement publié sur Flux de code en direct par Juan Cruz Martinez, fondateur et éditeur de Live Code Stream. Il est ingénieur logiciel avec plus de 10 ans d’expérience dans le domaine, travaillant dans une grande variété de projets, des solutions open source aux applications d’entreprise. Heureusement marié, avec un enfant, officiellement fiancé à JavaScript, dans une relation amoureuse avec Python, et poursuivant le rêve de l’écrivain! Vous pouvez lire cette pièce originale ici.

Flux de code en direct est également disponible sous forme de newsletter hebdomadaire gratuite. Inscrivez-vous pour recevoir des mises à jour sur tout ce qui concerne la programmation, l’IA et l’informatique en général.

Pssst, hé vous!

Voulez-vous recevoir la newsletter technique quotidienne la plus sassée chaque jour, dans votre boîte de réception, GRATUITEMENT? Bien sûr que vous le faites: inscrivez-vous à Big Spam ici.