RegEx JS : Guide pratique pour les RegEx en JavaScript

Les expressions régulières, souvent appelées RegEx JS ou RegEx JavaScript, font partie de ces outils qui font un peu peur au début. On voit des symboles bizarres, des slashes, des points, des crochets, et on a l’impression d’être face à une formule magique ou un langage secret réservé aux développeurs experts. Pourtant, derrière cette apparence un peu rude, se cache un outil extrêmement puissant, très utilisé dans les vrais projets web, et surtout plus simple à comprendre qu’on ne le pense quand on prend le temps de l’expliquer correctement.

• Comprendre enfin ce que sont les RegEx et savoir quand elles sont utiles pour gagner du temps et éviter des validations compliquées.
• Savoir écrire des RegEx claires et fiables en JavaScript, même en partant de zéro.
• Être capable d’utiliser les RegEx dans des cas concrets du quotidien (formulaires, mots de passe, recherche texte) et devenir plus autonome dans vos projets.

Vous avez peut-être déjà tapé un mot dans un moteur de recherche, vérifié une adresse email dans un formulaire ou filtré une liste en JavaScript. Souvent, ces fonctionnalités utilisent justement des expressions régulières. Elles permettent de vérifier, analyser et manipuler du texte avec une précision incroyable. Et même si vous débutez en développement frontend ou en JavaScript, apprendre les RegEx dès maintenant vous fera gagner beaucoup de temps, de sérénité et… quelques neurones.

Nous allons voir ensemble ce que sont réellement les expressions régulières, à quoi elles servent, comment écrire une RegEx en JavaScript et surtout comment les utiliser dans vos projets.

Qu’est-ce qu’une RegEx JS et à quoi ça sert vraiment ?

Une expression régulière, ou RegEx JavaScript, est tout simplement une manière intelligente de décrire un motif dans un texte. On parle souvent de “pattern”. Ce motif va permettre de chercher des informations, de vérifier si un texte correspond à une forme précise ou encore de remplacer des morceaux de texte. Concrètement, une RegEx sert à faire dire la vérité à une chaîne de caractères.

Par exemple, vous voulez savoir si un utilisateur a bien entré une adresse email valide dans un formulaire. Vous voulez vérifier qu’un mot de passe contient au moins une majuscule, un chiffre et une longueur minimale. Vous souhaitez extraire uniquement les chiffres d’une phrase. Tout cela est compliqué à faire avec des conditions classiques en JavaScript. Avec une RegEx JS, cela devient beaucoup plus simple, plus propre et souvent plus rapide.

On peut dire que les RegEx sont comme un super outil de filtrage. Là où Javascript classique lit une chaîne caractère par caractère, une expression régulière comprend la structure globale. Elle sait reconnaître des modèles complexes, sans que vous soyez obligé d’écrire 50 lignes de code.

J’ai passé presque une heure à écrire du JavaScript très compliqué pour vérifier si un mot de passe respectait plusieurs conditions. Condition sur la longueur, condition sur les chiffres, condition sur les majuscules… une vraie usine à gaz. Et puis je me suis souvenu que les RegEx existaient. La solution finale tenait sur… une seule ligne. À ce moment-là, j’ai compris que ce truc un peu mystérieux valait vraiment la peine d’être appris.

Comment écrire une RegEx en JavaScript ?

Entrons maintenant dans le concret. Une RegEx JS peut s’écrire de deux façons principales en JavaScript.

La première manière consiste à utiliser des slashes. C’est la plus directe, la plus lisible et celle que vous verrez le plus souvent.

const regex = /bonjour/;

Ici, la RegEx va rechercher le mot “bonjour” dans une chaîne de caractères. Ce qui est important, c’est que le motif (le pattern) est placé entre deux barres obliques.

La deuxième manière consiste à utiliser le constructeur RegExp de JavaScript.

const regex = new RegExp("bonjour");

Cette version est utile quand la RegEx doit être construite dynamiquement avec des variables. Mais si vous apprenez, la première écriture avec les slashes sera beaucoup plus confortable.

Comprendre les symboles de base sans paniquer

C’est souvent ici que les débutants prennent peur. Pourtant, chaque symbole a une logique simple. Prenons le temps de les apprivoiser doucement.

Lorsque vous écrivez /bonjour/, la RegEx JS va simplement chercher ce mot exact. Mais une RegEx JavaScript peut faire beaucoup plus que cela.

Par exemple, le point signifie “un caractère quelconque”.

const regex = /b.njour/;

Cela veut dire que JavaScript acceptera “bonjour”, “banjour”, ou “b3njour”, parce que le point peut remplacer n’importe quel caractère.

Les crochets servent à définir une liste de caractères possibles.

const regex = /b[oa]njour/;

Ici, la RegEx accepte “bonjour” ou “banjour”. Les crochets signifient “un des caractères à l’intérieur”.

Le antislash permet d’utiliser des raccourcis pratiques. Par exemple \d signifie “un chiffre”.

const regex = /\d\d\d/;

Cela signifie “trois chiffres consécutifs”. Si vous testez cette RegEx sur “456”, elle correspond. Si vous la testez sur “ab3”, elle ne correspond pas.

Déjà, avec ces quelques éléments, vous commencez à voir la puissance des RegEx javascript. Et pourtant, nous ne faisons qu’ouvrir la porte.

Les délimiteurs et les options (flags)

Une RegEx JS ne se limite pas au motif. Elle peut être accompagnée d’options, appelées “flags”, qui modifient son comportement.

Le flag i signifie “insensible à la casse”. Cela veut dire qu’on ignore les majuscules et les minuscules.

const regex = /bonjour/i;

Avec cette RegEx, “Bonjour”, “BONJOUR” ou “bonJour” seront acceptés.

Le flag g signifie “global”. Il permet de chercher toutes les correspondances dans un texte, pas seulement la première.

const regex = /js/g;

Avec ce flag, si une phrase contient plusieurs fois “js”, toutes les occurrences pourront être récupérées.

Il existe aussi le flag m pour gérer les textes avec plusieurs lignes, mais nous l’expliquerons plus en détail un peu plus tard dans l’article, lorsque nous travaillerons sur des cas concrets.

Exemple simple

Prenons un exemple clair. Imaginons une phrase :

const texte = "Bonjour, je découvre les RegEx JS et le JavaScript";
const regex = /javascript/i;

console.log(regex.test(texte)); 

La méthode test() permet de vérifier si la RegEx correspond au texte. Ici, le i permet d’ignorer la casse. JavaScript va donc renvoyer true, car il reconnaît bien “JavaScript” dans la phrase.

Ce genre de vérification est extrêmement courant dans les formulaires, dans les validations d’inputs et même dans les filtres de recherche.

Dans la suite, nous verrons comment utiliser concrètement une RegEx JS dans vos projets, comment extraire des informations, valider des emails, manipuler des mots de passe, et surtout comment ne plus avoir peur de ces fameux symboles. Nous parlerons aussi de méthodes essentielles comme match(), replace(), exec() et des cas réels que vous rencontrerez dans vos développements Frontend.

Comment utiliser une RegEx JavaScript dans vos scripts ?

En JavaScript, une RegEx javascript n’est pas juste un motif posé dans un coin. Elle va travailler main dans la main avec des méthodes pratiques qui vont vous permettre de tester un texte, d’en extraire des morceaux ou même de le transformer.

La méthode la plus simple et souvent la première que l’on découvre est test(). Elle renvoie simplement vrai ou faux. C’est un peu comme une question posée à JavaScript : “Ce texte respecte-t-il ce modèle ?”

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

const regex = /\d+/;
const texte = "Il y a 25 utilisateurs connectés";
console.log(regex.test(texte));

Ici, \d+ signifie “un ou plusieurs chiffres consécutifs”. Le texte contient “25”, donc la méthode renvoie true. C’est la base de toute validation : email, mot de passe, numéro de téléphone, pseudo, etc. Dès que vous voulez répondre à la question “est-ce que ce texte est valide ?”, vous pouvez penser à test().

Si maintenant vous voulez récupérer ce que la RegEx a trouvé et non simplement savoir si ça existe, vous pouvez utiliser la méthode match(). Elle renvoie les correspondances trouvées dans le texte.

const texte = "Mon code postal est 10000 et je vis à Troyes";
const regex = /\d+/g;
console.log(texte.match(regex));

Le g ici demande de récupérer toutes les correspondances. Vous obtiendrez donc un tableau contenant “10000”. Si la phrase contenait plusieurs nombres, ils seraient tous listés. Cette méthode devient très utile lorsqu’on veut extraire des informations précises d’une phrase ou d’un fichier.

Enfin, une des méthodes les plus agréables à utiliser est replace(). Elle permet de modifier un texte en utilisant une RegEx JS. Imaginons que vous vouliez masquer une partie d’un numéro de téléphone pour la confidentialité.

const phone = "06 45 78 90 12";
const regex = /\d{2}(?=\s)/g;
const result = phone.replace(regex, "**");
console.log(result);

Votre numéro deviendra : ** ** ** ** 12. Grâce aux RegEx javascript, vous pouvez réaliser ce type de traitement avec élégance, sans écrire du code interminable.

Les ancres pour être précis : début et fin

Une RegEx n’est pas juste une recherche floue, elle peut aussi être extrêmement précise. C’est là qu’entrent en jeu les ancres. Elles servent à indiquer à JavaScript où la RegEx doit s’appliquer dans le texte.

Le symbole ^ représente le début de la chaîne. Le symbole $ représente la fin.

Par exemple :

const regex = /^bonjour$/;

Cette RegEx JS signifie que la chaîne doit être exactement “bonjour”, rien de plus, rien de moins. Si vous testez “bonjour tout le monde”, la réponse sera fausse, car la phrase continue après le mot. C’est indispensable pour vérifier des entrées précises, comme un mot de passe ou une saisie de formulaire.

Les quantificateurs : répéter intelligemment

Vous avez sûrement remarqué que l’on peut demander un caractère, mais parfois on veut en demander plusieurs. C’est là que les quantificateurs deviennent précieux.

• Le + signifie “une ou plusieurs fois”.
• Le * signifie “zéro ou plusieurs fois”.
• Le ? signifie “zéro ou une fois”.
• Les accolades permettent de définir un nombre précis {}

Par exemple :

const regex = /^\d{5}$/;

Cette RegEx javascript correspond exactement à cinq chiffres. Elle est parfaite pour un code postal français. Si vous entrez “7500”, ce n’est pas bon. Si vous entrez “123456”, ce n’est pas bon non plus. C’est précis, clair et très puissant.

Les groupes : structurer une RegEx proprement

Plus vous avancerez dans l’utilisation des RegEx JS, plus vous aurez envie d’organiser vos motifs. Les parenthèses servent justement à regrouper des parties de la RegEx.

Par exemple, si vous voulez reconnaître des mots comme “bonjour”, “bonsoir” ou “bonne”, vous pouvez regrouper les parties communes.

const regex = /bon(soir|jour|ne)/;

Vous n’êtes plus obligé d’écrire plusieurs conditions ou plusieurs tests. Une seule RegEx javascript bien construite fait le travail.

Et lorsqu’on combine cela avec match(), vous pouvez récupérer les groupes capturés. Cela vous permettra plus tard d’isoler des éléments importants dans un texte.

Exemple concret : valider une adresse email

Même si ce sujet peut devenir très complexe, voyons une validation simple, largement suffisante pour la majorité des cas pédagogiques.

const email = "contact@example.com";
const regex = /^[a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,}$/i;

console.log(regex.test(email));

Cette RegEx JS vérifie plusieurs choses :

• Le début doit contenir des lettres, chiffres ou symboles autorisés.
• Il doit y avoir un @.
• Ensuite un nom de domaine.
• Puis un point.
• Puis une extension de minimum deux lettres.

Le i permet d’accepter majuscules et minuscules. Vous voyez ici comment une RegEx javascript devient un véritable gardien de saisie utilisateur.

Exemple pratique : sécuriser un mot de passe

Autre cas très fréquent : vérifier qu’un mot de passe respecte certaines règles. Par exemple, vous pourriez vouloir au moins une majuscule, une minuscule, un chiffre et huit caractères minimum.

const password = "Bonjour123";
const regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{8,}$/;

console.log(regex.test(password));

Cette RegEx JS peut paraître impressionnante, mais quand on la décompose, elle devient claire :

• (?=.*[A-Z]) oblige au moins une majuscule.
• (?=.*[a-z]) oblige au moins une minuscule.
• (?=.*\d) oblige au moins un chiffre.
• .{8,} impose une longueur minimale.

Et tout cela dans une seule ligne. C’est le genre d’outil qui, une fois maîtrisé, vous simplifie la vie au quotidien.

Utiliser exec() pour aller encore plus loin

Pour les cas plus avancés, la méthode exec() permet d’obtenir plus de détails sur les correspondances trouvées. Elle renvoie énormément d’informations utiles, notamment la position dans le texte. Elle est souvent utilisée quand vous devez parcourir un texte de manière plus technique.

const regex = /\d+/g;
const texte = "Il y a 3 chats, 5 chiens et 12 poissons";
let match;

while ((match = regex.exec(texte)) !== null) {
    console.log(`Trouvé : ${match[0]} à l’index ${match.index}`);
}

Ici, JavaScript parcourt le texte et trouve successivement 3, puis 5, puis 12. Pour des traitements avancés, c’est une merveille.

Les erreurs fréquentes et comment les éviter

Beaucoup de débutants pensent qu’une RegEx doit être parfaite dès le premier essai. C’est faux, et heureusement. Les développeurs expérimentés testent, corrigent, retestent. C’est un outil qui se construit souvent progressivement.

Vous risquez peut-être d’oublier des ancres, de mal placer un quantificateur ou d’écrire une RegEx trop stricte ou au contraire trop permissive. C’est normal. Le meilleur conseil est d’utiliser un site de test d’expressions régulières pendant que vous les construisez. Vous verrez en temps réel si votre RegEx JavaScript correspond à ce que vous attendez.

Autre piège fréquent : vouloir tout valider avec une seule RegEx gigantesque. Parfois, il vaut mieux diviser le problème en plusieurs étapes pour garder un code lisible et humain.

À ce stade, si vous êtes encore là, bravo. Vous venez de traverser une zone que beaucoup évitent, car elle paraît compliquée. Pourtant, vous voyez maintenant que les RegEx JS ne sont ni magiques ni brutales. Elles demandent simplement un peu de logique et de patience.

Il y a même quelque chose de satisfaisant quand une RegEx fonctionne enfin. C’est un peu ce moment où votre cerveau fait “clic” et vous vous dites : ah, mais c’est génial en fait.

Que faire maintenant avec les RegEx JS ?

Si vous deviez retenir une chose, c’est que les RegEx javascript sont un outil incontournable pour travailler avec du texte. Elles permettent de vérifier, filtrer, analyser et modifier du contenu avec une précision incroyable, souvent en une seule ligne de code. Elles vous feront gagner du temps, éviter des erreurs et apporter une vraie qualité à vos projets web.

Pour aller plus loin, je vous invite à pratiquer. Testez, jouez, cassez des choses, recommencez. Commencez doucement, avec des cas simples, puis ajoutez des symboles, des groupes, des quantificateurs. Votre cerveau va s’habituer progressivement à cette logique un peu particulière.

Et surtout, n’ayez pas peur. Même les développeurs expérimentés doivent parfois relire une RegEx pour comprendre ce qu’elle fait. Ce n’est pas une faiblesse, c’est simplement la nature de l’outil. Mais une chose est certaine : plus vous l’utiliserez, plus vous serez à l’aise. Et un jour, vous écrirez votre propre RegEx complexe sans froncer les sourcils. À ce moment-là, vous saurez que vous avez franchi un vrai cap dans votre apprentissage du JavaScript et du développement Frontend.

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr