Accueil > Conseils > Day 16 : Déballer des REGEX à Noël ?

Day 16 : Déballer des REGEX à Noël ?

 5 min read

AUTEUR
DATE

décembre 16, 2021

CATEGORIES
HASHTAGS
PARTAGEZ !
ABONNEZ-VOUS :

[ʁəʒɛks] ou [ʁəɡɛks] ? 😵‍💫

Qui ne s’est pas déjà demandé comment les sites de customer care/support faisaient pour assurer la qualité de données saisies dans leurs formulaires ? Moi ! 🙋🏻‍♀️

A force d’entendre « Qualité de données » par ci et par là, j’ai fini par devenir attentive aux nombreuses règles mises en place par les développeurs en ce qui concerne les formulaires de saisie d’information en ligne. Comment font-ils pour détecter que je n’ai pas saisi de texte au bon format dans tel ou tel champ ? C’est en me retrouvant confrontée à ce type de problématique que j’ai décidé de creuser le sujet des Regular Expression. Plus communément appelées « REGEX » dans le langage du développement.

Comme vous l’aurez compris, que l’on prononce « Re[j]ex » ou « Re[gu]ex » importe peu dans cet article, ce qui compte, c’est de comprendre de quoi il s’agit ! 😊  (Et pour la petite histoire, comme la contraction est issue de deux mots de la langue anglaise, on prononcera [ʁɛdʒɛks] 😁 )

Qu’est-ce qu’une regular expression ? 🤔

Croyez-le ou non, les regex fonctionnent un peu comme l’alphabet phonétique. Il ‘agit d’une liste de caractères qui va permettre d’imposer la typologie de caractères saisie par l’utilisateur( là où la phonétique va être une chaîne de caractères qui va imposer une prononciation à un mot).

Si par exemple je souhaite que mon utilisateur ne saisisse que des chiffres, je vais lui imposer le pattern suivant : [0-9]. Chaque contrainte de caractères a sa « traduction » en REGEX :

  • [a-z] si je veux imposer des caractères alphabétiques en minuscules
  • [a-z0-9] si je veux imposer des caractères alphabétiques en minuscules et des caractères numériques
  • etc.

Ce sont de puissants outils qui peuvent être utilisés dans de nombreux langages (JS, php, mySQL etc.) mais aussi dans des logiciels d’édition de texte (#VSCODE) pour faire des recherches concernant des chaînes spécifiques de caractères.

Qui dit JS, dit Lightning Web Component, dit Salesforce. Et oui, les REGEX peuvent également être utilisées par les développeurs Salesforce !

Comment utiliser des regex dans mon LWC ? 😩

Prenons le cas d’un champ « Numéro de téléphone » dans un formulaire. L’attribut « pattern » permettra d’imposer le format du numéro de téléphone en question :

        <lightning-layout-item padding="around-small">
            <lightning-input type="tel" 
                label="Numéro de téléphone"
                name="Phone"
                pattern="^(?:\+|)(?:[0-9] ?){0,}[0-9]$"
                value ={phoneNumber}
                onchange={handleChange}
                ></lightning-input>
        </lightning-layout-item>

Ici, le REGEX ^(?:\+|)(?:[0-9] ?){0,}[0-9]$ peut se décomposer comme suit :

Caractère de la REGEXTraductionExemple pour un numéro de portable français commençant au format 06xxxxxxxx
^Signifie « la chaîne de caractère doit commencer par : » 
(?:\+|)

Les parenthèses permettent d’isoler le premier groupe de caractères :

  • ?:\+ signifie Zéro ou une répétition de « + » 
  • | signifie ou bien
  • l’absence de caractères après la barre verticale signifie [ ] (soit encore rien du tout)

–> Le premier groupe de la chaîne de caractères de notre numéro de téléphone doit donc commencer par « zéro » ou bien une seule répétition de « + » ou bien aucun caractère spécifique.

+

ou

[ ] (rien du tout)

(?:[0-9] ?)

Nous passons maintenant au second groupe de caractères (isolé ici aussi par des parenthèses) qui sera composé de :

  • ?: signifie zéro ou une répétition
  • [0-9] signifie de caractère numérique
  • ? signifie après laquelle il peut ou non y avoir un espace

–> Le deuxième groupe de la chaîne de caractères de notre numéro de téléphone doit donc être un chiffre suivi ou non d’un espace.

3

ou

3[espace]

{0,}[0-9]$

Notre troisième groupe de caractères se composera de :

  • {0,} signifie zéro ou plusieurs répétitions
  • [0-9] signifie de caractères numériques
  • $ signifie que cette dernière chaîne ferme la chaîne de caractères

–> La dernière chaîne de caractères de notre numéro de téléphone doit donc être une chaîne d’un ou plusieurs chiffre(s).


609090909

Ce qui nous donne les possibilités suivantes de numéro de téléphone :

  • +33609090909
  • 0033609090909
  • +3[espace]3609090909
  • 0[espace]033609090909
  • 0609090909

A vos marques ? REGEX 🏅

  • Pour vous amuser en cette période de fêtes vous pouvez faire des mots croisés de REGEX 😁😁😁
  • Pour avoir un tutoriel détaillé de tout ce qu’il est possible de faire avec les REGEX, visitez le super Tutoriel pour maîtriser les expressions régulières de Lucas Willems 💡
  • Pour vérifier les chaînes de caractères respectant le pattern de vos REGEX rendez-vous sur regextester  📚
  • Pour que je rédige un autre article sur le sujet, rendez-vous dans les commentaires 😏

Bonnes fêtes de fin d’année !