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

[ʁəʒɛ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 :

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 !