Il y a une blume récurrente dans la communauté regex : « Écris une regex de validation d’e-mail et tu donneras des cauchemars aux ingénieurs QA. » Les regex d’e-mail en ligne sont soit si courtes qu’elles ratent la moitié des cas, soit si longues qu’elles ressemblent à un ransomware. Cet article évite les jeux et vous propose 7 motifs testés en production : pas de quête d’exhaustivité académique, seulement l’utilisabilité au quotidien. Accompagnés du testeur de regex de Piick, vous pouvez observer et ajuster en temps réel.

Pourquoi une « regex universelle » n’existe pas

La définition du format d’e-mail dans la norme RFC 5322 s’étend sur des centaines de lignes ; un e-mail légal peut ressembler à "user+tag"@sub.example.museum. Tenter de couvrir tous les cas autorisés avec une seule regex revient à écrire un « monstre » de 200 caractères que vous n’oserez plus toucher six mois plus tard.

Principe pratique : utilisez la version simplifiée « qui couvre 99 % des cas » et laissez le backend envoyer un e-mail de vérification pour attraper le 1 % restant. Ne comptez pas sur la regex côté frontend pour valider les e-mails : comptez sur le serveur qui envoie réellement le message.

7 regex idéales pour les cas fréquents

Ces 7 motifs proviennent tous de code en production et couvrent les besoins les plus courants :

  1. E-mail [A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,} — version simplifiée, 99 % des e-mails passent.
  2. URL https?:\/\/[^\s<>"']+ — du début http/https jusqu’à un espace ou des chevrons.
  3. Téléphone (international) \+?[1-9]\d{1,14} — format E.164, 15 chiffres maximum.
  4. Adresse IPv4 \b(?:25[0-5]|2[0-4]\d|[01]?\d?\d)(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d?\d)){3}\b — stricte, segments de 0 à 255.
  5. Date ISO \d{4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|[12]\d|3[01]) — année-mois-jour avec contrôle des plages.
  6. Couleur hexadécimale #?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})\b — accepte #fff et #FFFFFF.
  7. Slug d’URL [a-z0-9]+(?:-[a-z0-9]+)* — lettres/chiffres avec traits d’union, le format courant d’URL d’article.

Le menu déroulant Motifs courants du testeur de regex de Piick intègre déjà ces 7 motifs : copiez, utilisez, nul besoin de les retaper.

Test et ajustement en temps réel avec Piick

Copier la regex de quelqu’un d’autre cache un piège : vous ne savez pas ce que signifie chaque partie. Le panneau Explication de Piick décompose la regex partie par partie et vous indique ce que fait chaque parenthèse et quantificateur :

  • Les métacaractères (\d, \w, \b) sont étiquetés comme ancre / classe.
  • Les quantificateurs (*, +, {2,5}) sont étiquetés comme quantificateur.
  • Les groupes et les rétroférences sont étiquetés comme groupe / rétroférence.

Flux de débogage : collez la regex → examinez la décomposition Explication → collez le texte de test → voyez la mise en surbrillance → modifiez une ligne → constatez l’effet immédiatement. Aucun rafraîchissement de page, vous éditez et exécutez en continu.

Conseils pour entretenir votre propre bibliothèque de motifs

3 habitudes qui rendent les regex plus faciles à maintenir :

  1. Préférez les groupes nommés aux groupes numérotés : (?<year>\d{4}) se lit mieux que (\d{4}) — lors d’extractions ultérieures, vous ne compterez plus mal les parenthèses.
  2. Découpez les regex complexes sur plusieurs lignes avec des commentaires : combinez new RegExp(\…`)` avec des variables de commentaire, vous comprendrez encore votre code six mois plus tard.
  3. Centralisez-les dans un fichier lib/regex.ts — ne saupoudrez pas des new RegExp(...) partout ; un changement ne devrait pas imposer de fouiller 50 fichiers.

Pour aller plus loin : stockez les regex que votre projet utilise couramment dans un objet, avec comme clé le nom et comme valeur {pattern, flags, sample}. Chaque nouveau membre de l’équipe peut s’en servir directement sans repartir de zéro. C’est précisément l’idée derrière les 7 motifs courants intégrés au testeur de regex de Piick : plus la bibliothèque de motifs est riche, moins on réinvente la roue.

Ouvrez dès maintenant le testeur de regex de Piick, cliquez sur le menu déroulant Motifs courants, choisissez e-mail et collez un texte de test pour observer la correspondance en action.