- Regex Duel : 30 niveaux de logique regex

Comment jouer à Regex Duel

Regex Duel est un jeu de logique qui vous met au défi d'écrire des expressions régulières précises pour des situations concrètes. Contrairement à un cours magistral, vous apprenez ici par l'expérimentation directe — testez, observez, ajustez.

Principe de base

Chaque niveau vous présente un objectif décrit en langage naturel et deux listes de chaînes de caractères :

• ✅ Doit matcher : votre regex doit reconnaître ces chaînes
• ❌ Ne doit pas matcher : votre regex ne doit pas capturer ces chaînes

Votre défi : écrire une regex qui matche exactement le bon ensemble — ni plus, ni moins. Dès que tous les badges affichent la bonne couleur, le niveau est validé automatiquement.

Saisie de la regex

Tapez votre pattern dans le champ de saisie sans délimiteurs. Le jeu ajoute automatiquement les slashs / autour. Si vous souhaitez ajouter des flags (comme i pour insensible à la casse), utilisez le petit champ "flags" à droite.

Feedback en temps réel

À chaque frappe, les badges des chaînes se mettent à jour instantanément. Un badge vert signifie que votre regex produit le résultat attendu pour cette chaîne. Un badge rouge indique une inadéquation. Si votre regex contient une erreur de syntaxe, un message d'erreur explicatif s'affiche sous le champ.

Système d'indices

Bloqué sur un niveau ? Cliquez sur "💡 Indice −5 pts" pour révéler un conseil ciblé sur la technique regex à utiliser. Chaque indice coûte 5 points, mais débloquer un niveau vaut toujours 100 points — utilisez-les sans remords si nécessaire !

Contrôles clavier

Les 30 niveaux : de débutant à expert

La progression de Regex Duel est soigneusement conçue pour introduire les concepts dans l'ordre optimal, en construisant chaque couche sur la précédente.

Niveaux 1–5 : Les bases littérales

Les cinq premiers niveaux vous familiarisent avec les correspondances littérales et les premiers métacaractères. Vous apprendrez que . matche n'importe quel caractère, que ? rend un élément optionnel, et que les crochets [ae] permettent de définir des alternatives simples. Ces niveaux sont accessibles même sans expérience préalable des regex.

Niveaux 6–10 : Quantificateurs et classes prédéfinies

Cette tranche introduit les quantificateurs {n}, {n,m} et les classes prédéfinies \d (chiffre), \w (caractère de mot), \s (espace). Vous commencerez aussi à utiliser les ancres ^ et $ pour contraindre la regex à toute la chaîne.

Niveaux 11–15 : Classes de caractères et ancres

Les classes de caractères personnalisées [a-z], [0-9], les classes négatives [^0-9] et les premières backreferences \1 font leur apparition. Vous apprendrez à construire des patterns qui capturent des structures spécifiques comme les dates au format JJ/MM/AAAA.

Niveaux 16–20 : Ancres avancées et alternances

L'ancre de mot \b permet de cibler des mots entiers. L'alternance foo|bar|baz offre plusieurs options. Ces niveaux introduisent des cas pratiques : commentaires de code, numéros de téléphone, mots-clés.

Niveaux 21–25 : Validation et lookaheads

Les niveaux 21 à 25 abordent des cas concrets de validation de données : emails, adresses IPv4, codes couleur CSS. Les lookaheads positifs (?=...) et négatifs (?!...) permettent d'imposer des conditions sans consommer de caractères.

Niveaux 26–30 : Niveau expert

Les cinq derniers niveaux constituent le vrai défi : URLs HTTP/HTTPS, couleurs CSS hexadécimales, palindromes par backreference, structures JSON simplifiées, numéros de carte de crédit. Seuls les maîtres des regex atteignent le score parfait sur ces niveaux sans indice !

Pensée formelle et expressions régulières

Les expressions régulières ne sont pas qu'un outil technique — elles représentent un mode de pensée. Maîtriser les regex, c'est développer la capacité à formuler des règles précises qui capturent exactement ce qu'on veut, sans être ni trop permissives ni trop restrictives.

La précision comme discipline

Écrire une regex, c'est définir formellement un ensemble. La regex ^\d{3}$ définit l'ensemble de toutes les chaînes composées exactement de 3 chiffres. Ni plus, ni moins. Cette précision absolue est rare dans la communication humaine mais fondamentale en informatique.

Regex Duel vous entraîne à penser en ensembles : "quels sont les éléments que je veux inclure ?" et "quels sont les éléments que je dois exclure ?". Cette dualité inclusion/exclusion est au cœur de la logique formelle.

Du particulier au général

Chaque niveau vous donne des exemples (les chaînes à matcher et à exclure). Votre travail est d'en inférer la règle générale — la regex. C'est exactement le processus de généralisation inductive, une compétence cognitive fondamentale en programmation, en mathématiques et en sciences.

La rigueur syntaxique

Les regex punissent immédiatement les imprécisions. Un . non échappé qui devrait être un point littéral, une ancre $ oubliée qui laisse passer des suffixes indésirables — chaque erreur est visible dans les badges. Cette rétroaction immédiate et précise est un environnement d'apprentissage idéal pour développer la rigueur syntaxique.

Langages formels et automates

Les expressions régulières ont une fondation mathématique profonde : elles décrivent exactement les langages réguliers, la classe la plus simple dans la hiérarchie de Chomsky. Chaque regex correspond à un automate fini déterministe (DFA) qui peut reconnaître ou rejeter une chaîne en temps linéaire.

Cette équivalence — regex ↔ automate — explique pourquoi les regex sont si efficaces et si utilisées dans les compilateurs, les moteurs de recherche, les systèmes de validation de données et les outils de traitement de texte.

Bénéfices cognitifs pour les développeurs

Jouer à Regex Duel développe des compétences directement transférables à votre pratique quotidienne de développeur.

1. Pensée abstraite et modélisation

Chaque regex est un modèle abstrait d'une classe de chaînes. Construire ce modèle à partir d'exemples concrets entraîne la capacité à abstraire des patterns à partir d'instances — une compétence au cœur de la conception logicielle, des design patterns et de l'architecture système.

2. Débogage systématique

Quand une regex ne produit pas le résultat attendu, vous devez diagnostiquer précisément quelle partie du pattern est en cause. Ce processus de débogage — isoler, tester, corriger — est identique au débogage de code. Regex Duel vous offre des centaines d'opportunités de pratiquer cette compétence dans un environnement sans enjeux.

3. Attention aux cas limites

Les chaînes "ne doit pas matcher" représentent souvent des cas limites proches des cas valides. Apprendre à distinguer cats de cat, ou 256.0.0.1 d'une IPv4 valide, entraîne à anticiper les cas limites — une habitude mentale essentielle pour écrire du code robuste.

4. Mémoire de travail et chunking

Une regex complexe comme ^[\w.+-]+@[\w-]+\.[a-z]{2,}$ doit être construite mentalement par morceaux (chunks) : l'avant du @, le domaine, l'extension. Cette décomposition hiérarchique améliore la mémoire de travail et la capacité à gérer la complexité cognitive.

5. Confiance en soi technique

Maîtriser les regex est souvent perçu comme une compétence "avancée" qui impressionne. Regex Duel vous permet d'y parvenir progressivement, niveau par niveau. Chaque niveau validé renforce votre sentiment de compétence et réduit l'anxiété face à des patterns complexes dans un vrai codebase.

Les regex en JavaScript : guide pratique

Regex Duel utilise le moteur regex de JavaScript (ECMAScript). Voici les méthodes et techniques les plus utiles pour travailler avec les regex en JS.

Créer une regex en JavaScript

Il existe deux façons de créer une regex en JavaScript :

// Syntaxe littérale (préférée pour les patterns statiques)
const regex1 = /^\d{3}$/;

// Syntaxe constructeur (utile pour les patterns dynamiques)
const pattern = '\\d{3}';
const regex2 = new RegExp('^' + pattern + '$');

// Avec flags
const regex3 = /hello/i;   // insensible à la casse
const regex4 = /\d+/g;    // global (toutes les occurrences)

Les méthodes essentielles

Les flags en JavaScript

• i — insensible à la casse (case insensitive)
• g — toutes les occurrences (global)
• m — ^ et $ correspondent à chaque ligne (multiline)
• s — . matche aussi les sauts de ligne (dotAll)
• u — support Unicode complet
• v — mode Unicode étendu (ES2024)

Backreferences et groupes nommés

// Backreference numérotée
const rdouble = /^(\w+)\1$/;
rdouble.test('haha');   // true — "ha" répété
rdouble.test('hello');  // false

// Groupe nommé (ES2018+)
const rdate = /^(?<day>\d{2})\/(?<month>\d{2})\/(?<year>\d{4})$/;
const m = '15/06/2024'.match(rdate);
console.log(m.groups.day);   // "15"
console.log(m.groups.month); // "06"
console.log(m.groups.year);  // "2024"

Lookahead et lookbehind

// Lookahead positif : contient un chiffre
const hasDigit = /(?=.*\d)/;
hasDigit.test('abc123');  // true
hasDigit.test('abcdef');  // false

// Lookahead négatif : ne contient PAS de chiffre
const noDigit = /^(?!.*\d)[a-zA-Z]+$/;
noDigit.test('hello');   // true
noDigit.test('hello1');  // false

// Lookbehind positif (ES2018+) : précédé de "$"
const afterDollar = /(?<=\$)\d+/;
'$100'.match(afterDollar); // ["100"]

Erreurs courantes et pièges à éviter

Même les développeurs expérimentés tombent dans certains pièges classiques avec les regex. Voici les erreurs les plus fréquentes et comment les éviter.

Piège 1 : Oublier les ancres ^ et $

La regex \d{3} matche "abc123def" car elle trouve 3 chiffres consécutifs n'importe où dans la chaîne. Pour exiger exactement 3 chiffres et rien d'autre, utilisez toujours ^\d{3}$. Dans Regex Duel, la plupart des niveaux requièrent les ancres — les chaînes "ne doit pas matcher" servent souvent à tester ce piège.

Piège 2 : Le point non échappé

Dans la regex 3.14, le point . matche n'importe quel caractère — donc "3X14" passerait ! Pour un point littéral, utilisez 3\.14. Ce piège apparaît souvent dans la validation d'emails (user@domain.com — le . du domaine doit être \.).

Piège 3 : Quantificateurs gourmands

Par défaut, les quantificateurs sont gourmands (greedy) : ils consomment autant de caractères que possible. La regex <.*> sur "<b>texte</b>" matche tout depuis le premier < jusqu'au dernier >. Utilisez <.*?> (non-greedy avec ?) pour les cas HTML.

Piège 4 : Confondre \d et [0-9]

Dans la plupart des moteurs modernes, \d matche tous les chiffres Unicode (y compris les chiffres arabes-indiens), tandis que [0-9] est strictement limité aux chiffres ASCII 0 à 9. Pour une validation ASCII stricte (codes postaux, numéros de téléphone), préférez [0-9].

Piège 5 : Catastrophic backtracking

Certaines combinaisons de regex peuvent provoquer une explosion exponentielle du temps d'exécution sur certaines chaînes. Exemple classique : (a+)+ sur une longue chaîne de 'a' suivie d'un caractère non-matché. Ce phénomène, appelé catastrophic backtracking ou ReDoS, est exploitable comme vecteur d'attaque. Toujours tester vos regex avec des chaînes adversariales avant de les déployer en production.

Questions fréquentes

Conclusion

Les expressions régulières sont l'une de ces compétences qui paraissent intimidantes de loin mais qui révèlent leur beauté logique une fois qu'on s'y plonge. Regex Duel transforme cet apprentissage en jeu : chaque niveau est un petit puzzle logique, chaque validation est une victoire sur la complexité formelle.

Les 30 niveaux progressifs vous emmènent des bases les plus simples jusqu'aux patterns experts utilisés quotidiennement en production. Que vous soyez débutant cherchant à comprendre ^\d+$ ou développeur senior cherchant à affiner vos lookaheads et backreferences, Regex Duel vous offre un terrain d'entraînement sur mesure.

Et au-delà de la technique, c'est la pensée formelle que vous développez — cette capacité à énoncer des règles précises, à distinguer les cas inclus des cas exclus, à construire des modèles généraux à partir d'exemples particuliers. Une compétence qui transcende les regex et s'applique à toute forme de conception logicielle.