11 - Patterns courants
Ce que tu vas apprendre
- 10 regex utilisees quotidiennement avec leur explication
- Les limites de chaque pattern et pourquoi la regex "parfaite" n'existe souvent pas
- Les pièges spécifiques a chaque cas d'usage
Prerequisites
Voila l'article le plus pratique de la serie. Pas de theorie, juste des regex que tu vas copier-coller dans tes projets. Pour chaque pattern, je donne la regex, une explication, et les gotchas que j'ai appris a mes depens. Aucune de ces regex n'est parfaite. Elles couvrent 95% des cas réels, et c'est largement suffisant.
1. Email (simplifie)
javascriptconst emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
Explication : un ou plusieurs caractères qui ne sont ni espace ni @, puis @, puis un ou plusieurs caractères qui ne sont ni espace ni @, puis ., puis pareil.
javascriptemailRegex.test("user@example.com"); // true
emailRegex.test("nom.prenom@sub.dom.fr"); // true
emailRegex.test("user@.com"); // false
emailRegex.test("user @test.com"); // false
Le gotcha : la regex parfaite pour valider un email selon la RFC 5322 fait plus de 6000 caractères. Personne ne l'utilise. En pratique, tu valides avec une regex simple et tu envoies un email de confirmation. C'est la seule vraie validation.
J'ai perdu du temps sur paltemps.fr a essayer d'écrire une regex email "complète" avant de réaliser que c'est une quete futile. La regex ci-dessus bloque les erreurs evidentes, et l'email de vérification fait le reste.
2. Telephone (format français)
javascriptconst telFR = /^(?:(?:\+|00)33[\s.-]?|0)[1-9](?:[\s.-]?\d{2}){4}$/;
Explication : commence par +33, 0033 ou 0, suivi d'un chiffre de 1 a 9, puis 4 paires de chiffres separees optionnellement par espace, point ou tiret.
javascripttelFR.test("06 12 34 56 78"); // true
telFR.test("+33 6 12 34 56 78"); // true
telFR.test("0033612345678"); // true
telFR.test("06.12.34.56.78"); // true
telFR.test("06-12-34-56-78"); // true
telFR.test("00 12 34 56 78"); // false (commence par 00 sans 33)
3. Telephone (format international)
javascriptconst telIntl = /^\+?[1-9]\d{1,14}$/;
Explication : suit la recommandation E.164. Un + optionnel, un chiffre non-zero, puis 1 a 14 chiffres. C'est la forme la plus permissive qui reste valide.
javascripttelIntl.test("+33612345678"); // true
telIntl.test("+14155552671"); // true
telIntl.test("33612345678"); // true
telIntl.test("+0612345678"); // false (commence par 0 apres +)
Le gotcha : ce pattern ne valide pas que le numero existe, juste qu'il a le bon format. Pour une vraie validation, utilise une lib comme libphonenumber-js.
4. URL
javascriptconst urlRegex = /^https?:\/\/(?:[\w-]+\.)+[\w-]+(?:\/[\w.,@?^=%&:/~+#-]*)?$/;
Explication : http ou https, suivi de ://, un ou plusieurs sous-domaines (mots + tirets + points), un domaine, et optionnellement un chemin avec les caractères courants d'URL.
javascripturlRegex.test("https://example.com"); // true
urlRegex.test("http://sub.domain.co.uk/path"); // true
urlRegex.test("https://api.test.com/v1?q=foo"); // true
urlRegex.test("ftp://files.com"); // false
urlRegex.test("not a url"); // false
Le gotcha : les URL valides peuvent contenir des caractères Unicode encodés, des fragments, des ports... Cette regex couvre les cas courants. Pour du parsing serieux, utilise new URL() qui lance une erreur si l'URL est invalide.
javascriptfunction isValidUrl(string) {
try {
new URL(string);
return true;
} catch {
return false;
}
}
5. Adresse IPv4
javascriptconst ipv4Regex = /^(?:(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.){3}(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/;
Explication : 4 octets separes par des points. Chaque octet est un nombre de 0 a 255. Le pattern gere les plages : 250-255, 200-249, 100-199, 0-99.
javascriptipv4Regex.test("192.168.1.1"); // true
ipv4Regex.test("255.255.255.0"); // true
ipv4Regex.test("0.0.0.0"); // true
ipv4Regex.test("256.1.1.1"); // false
ipv4Regex.test("192.168.1"); // false
ipv4Regex.test("192.168.01.1"); // false (zero en tete)
Le gotcha : cette regex refuse les zeros en tête (01, 001). C'est voulu : en contexte réseau, les zeros en tête peuvent etre interprètes comme de l'octal. 0177.0.0.1 n'est pas la meme chose que 177.0.0.1.
6. Date DD/MM/YYYY
javascriptconst dateFR = /^(?:0[1-9]|[12]\d|3[01])\/(?:0[1-9]|1[0-2])\/\d{4}$/;
Explication : jour (01-31), slash, mois (01-12), slash, annee (4 chiffres).
javascriptdateFR.test("29/03/2026"); // true
dateFR.test("31/12/2025"); // true
dateFR.test("00/01/2026"); // false
dateFR.test("32/01/2026"); // false
dateFR.test("15/13/2026"); // false
Le gotcha : cette regex accepte le 31 février. Valider les jours par mois avec une regex est possible mais absurdement complexe. Valide le format avec la regex, puis vérifié la coherence de la date en JavaScript :
javascriptfunction isValidDate(dateStr) {
if (!dateFR.test(dateStr)) return false;
const [jour, mois, annee] = dateStr.split("/").map(Number);
const date = new Date(annee, mois - 1, jour);
return date.getDate() === jour && date.getMonth() === mois - 1;
}
7. Mot de passe fort
javascriptconst strongPassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=]).{8,}$/;
Explication : au moins une minuscule, une majuscule, un chiffre, un caractère special, et minimum 8 caractères. Chaque condition est un lookahead ancre au début.
javascriptstrongPassword.test("Abcdef1!"); // true
strongPassword.test("MonMotDePasse"); // false (pas de chiffre ni special)
strongPassword.test("abc123!!"); // false (pas de majuscule)
strongPassword.test("Ab1!"); // false (moins de 8 caracteres)
Le gotcha : les regles de mot de passe arbitraires ne rendent pas les mots de passe plus surs. Le NIST recommande maintenant une longueur minimale de 8 caractères et une vérification contre les mots de passe connus compromis, sans imposer de regles de complexité. Mais les clients veulent toujours leurs majuscules et caractères speciaux, alors voila la regex.
8. Slug
javascriptconst slugRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
Explication : un ou plusieurs caractères alphanumeriques minuscules, suivis optionnellement de segments separes par un seul tiret. Pas de tiret au début, a la fin, ni de double tiret.
javascriptslugRegex.test("mon-article"); // true
slugRegex.test("regex-11-patterns"); // true
slugRegex.test("hello"); // true
slugRegex.test("-leading-dash"); // false
slugRegex.test("trailing-dash-"); // false
slugRegex.test("double--dash"); // false
slugRegex.test("MAJUSCULES"); // false
Et pour générer un slug à partir d'un titre :
javascriptfunction slugify(text) {
return text
.toLowerCase()
.normalize("NFD")
.replace(/[\u0300-\u036f]/g, "") // Retire les accents
.replace(/[^a-z0-9]+/g, "-") // Remplace les non-alphanum par des tirets
.replace(/^-+|-+$/g, ""); // Retire les tirets en debut/fin
}
slugify("Les Regex, c'est genial !"); // "les-regex-c-est-genial"
9. Code postal français
javascriptconst cpRegex = /^(?:0[1-9]|[1-8]\d|9[0-5]|97[1-6]|98[4-9])\d{3}$/;
Explication : les deux premiers chiffres correspondent au departement (01-95 pour la metropole, 971-976 pour l'outre-mer). Suivis de 3 chiffres.
javascriptcpRegex.test("75001"); // true (Paris)
cpRegex.test("97400"); // true (La Reunion)
cpRegex.test("00100"); // false (departement 00 n'existe pas)
cpRegex.test("99999"); // false
cpRegex.test("7500"); // false (4 chiffres)
Le gotcha : la Corse utilise 20xxx (2A et 2B), ce qui est couvert par [1-8]\d. Les codes postaux outre-mer commencent par 97x. Si tu veux etre strict sur les departements outre-mer existants, il faut affiner les plages.
10. Nombre avec decimales
javascriptconst numberRegex = /^-?(?:0|[1-9]\d*)(?:\.\d+)?$/;
Explication : un signe negatif optionnel, puis soit 0 soit un chiffre non-zero suivi d'autres chiffres, puis optionnellement un point et des decimales.
javascriptnumberRegex.test("42"); // true
numberRegex.test("-3.14"); // true
numberRegex.test("0.5"); // true
numberRegex.test("0"); // true
numberRegex.test("007"); // false (zero en tete)
numberRegex.test(".5"); // false (pas de chiffre avant le point)
numberRegex.test("1."); // false (pas de chiffre apres le point)
numberRegex.test("1,5"); // false (virgule, pas point)
Pour accepter la virgule comme separateur decimal (format français) :
javascriptconst numberFR = /^-?(?:0|[1-9]\d*)(?:[.,]\d+)?$/;
Bonus : balise HTML simple
javascriptconst htmlTag = /<(?<tag>\w+)(?:\s[^>]*)?>[\s\S]*?<\/\k<tag>>/;
Explication : une balise ouvrante avec des attributs optionnels, du contenu, et la balise fermante correspondante (grâce à la back-référencé nommee).
javascripthtmlTag.test("<div>contenu</div>"); // true
htmlTag.test('<a href="#">lien</a>'); // true
htmlTag.test("<div>contenu</span>"); // false
Le gotcha : ne parse jamais du HTML avec des regex en production. Ce pattern gere les cas simples, mais le HTML imbrique, les balises auto-fermantes, les commentaires, le CDATA... tout ca casse la regex. Utilise un vrai parser DOM. Cette regex est utile pour du scripting rapide, pas pour du code de production.
Résumé
- Email : validation simple + email de confirmation, pas de regex RFC complète
- Telephone : format E.164 pour l'international, regex spécifique pour le format français
- URL : regex pour le filtrage rapide,
new URL()pour la validation stricte - IPv4 : attention aux zeros en tête
- Date : la regex valide le format, JavaScript valide la coherence
- Mot de passe : les lookahead empiles verifient chaque condition
- Slug : pas de tiret en début/fin ni de double tiret
- Aucune de ces regex n'est "parfaite", et c'est normal
Article précédent : 10 - Les regex en JavaScript Article suivant : 12 - Outils et ressources