Les expressions régulières (ou regex) sont des séquences de caractères qui définissent un modèle de recherche. Elles sont extrêmement utiles pour la manipulation de chaînes de caractères, permettant de trouver, remplacer ou valider des motifs complexes.
Concepts de base
JavaScript offre plusieurs méthodes pour travailler avec les chaînes de caractères qui peuvent utiliser des expressions régulières.
Opérations de chaîne courantes
// Opérations de base sur les chaînes
var maChaine = 'abcdef';
console.log(maChaine.indexOf('b')); // Affiche 1 (position de 'b')
console.log(maChaine.substring(2, 5)); // Affiche 'cde' (ne comprend pas l'indice de fin)
console.log(maChaine.substring(1)); // Affiche 'bcdef' (de l'indice 1 à la fin)
console.log(maChaine.charAt(3)); // Affiche 'd' (caractère à l'indice 3)
Utilisation de match()
La méthode match() extrait les correspondances d'une chaîne selon une expression régulière.
var texte = '12 fff 87 er334 233 -=-=-=fa80';
console.log(texte.match(/\d+/g)); // Affiche ['12', '87', '334', '233', '80']
// /\d+/g : \d correspond à un chiffre, + correspond à une ou plusieurs occurrences, g pour global (toutes les occurrences)
Syntaxe des Expressions Régulières
Il existe deux syntaxes principales pour définir une expression régulière en JavaScript :
// Syntaxe littérale (préférée pour les motifs statiques)
var regexLitterale = /motif/flags;
// Syntaxe avec l'objet RegExp (utile pour les motifs dynamiques)
var regexObjet = new RegExp('motif', 'flags');
// Exemple : recherche insensible à la casse
var regexInsensitive = /a/i; // Correspond à 'a' ou 'A'
Trouver la première occurrence
var texte = 'asdf 23 23 zxcacxzczxc';
var regexChiffre = /\d/; // Trouve le premier chiffre
console.log(texte.search(regexChiffre)); // Affiche 5 (l'indice du premier chiffre)
Approfondissement de match()
match(), lorsqu'utilisé avec le drapeau global (g), retourne un tableau de toutes les correspondances.
var chaine = 'asdf 34 656 vsd33';
var regexUnChiffre = /\d/; // Correspond au premier chiffre trouvé
var regexChiffresGlobaux = /\d/g; // Correspond à chaque chiffre individuellement
var regexSequencesChiffres = /\d+/g; // Correspond à chaque séquence d'un ou plusieurs chiffres
console.log(chaine.match(regexUnChiffre)); // Affiche ['3']
console.log(chaine.match(regexChiffresGlobaux)); // Affiche ['3', '4', '6', '5', '6', '3', '3']
console.log(chaine.match(regexSequencesChiffres)); // Affiche ['34', '656', '33']
Méthode replace()
replace() permet de substituer des parties d'une chaîne selon un motif.
var texte = 'abc aaa erw';
var regexA = /a/g; // Remplacer toutes les occurrences de 'a'
// Remplacement simple (ne prend que la première occurrence si pas de drapeau 'g')
console.log(texte.replace('a', '0')); // Affiche '0bc aaa erw'
// Remplacement global avec regex
console.log(texte.replace(regexA, '0')); // Affiche '0bc 000 erw'
Exemple : Filtrage de mots sensibles
On peut utiliser replace() pour remplacer des mots indésirables par des caractères masqués.
<body>
<textarea id='inputTexte' cols="40" rows="5"></textarea><br>
<button id="boutonFiltrer">Filtrer</button><br>
<textarea id='outputTexte' cols="40" rows="5"></textarea><br>
</body>
<script type="text/javascript">
window.onload = function() {
var input = document.getElementById("inputTexte");
var output = document.getElementById("outputTexte");
var btn = document.getElementById("boutonFiltrer");
btn.onclick = function() {
var motsSensibles = /motsenssible1|motsenssible2|autre/g; // Liste des mots à filtrer
output.value = input.value.replace(motsSensibles, '***');
}
}
</script>
Classes de caractères et groupes
Crochets []
Les crcohets définissent un ensemble de caractères possibles.
var chaine = 'apc fpc dpc xpc gpc rpc spc ppc';
var regexAvecCrochets = /[apx]pc/g; // Correspond à 'apc', 'ppc' ou 'xpc'
console.log(chaine.match(regexAvecCrochets)); // Affiche ['apc', 'xpc', 'ppc']
Quantificateurs
Les quantificateurs spécifient la fréquence d'apparition d'un élément.
+: Une ou plusieurs fois (équivalent à{1,}).{n}: Exactementnfois.{n, m}: Entrenetmfois.{n,}: Au moinsnfois.?: Zéro ou une fois (équivalent à{0, 1}).*: Zéro ou plusieurs fois (équivalent à{0,}) - à utiliser avec prudenec.
Classes de caractères prédéfinies et métacaractères
\d: Un chiffre (équivalent à[0-9]).\D: Un caractère qui n'est pas un chiffre (équivalent à[^0-9]).\w: Un caractère alphanumérique ou un underscore (équivalent à[a-zA-Z0-9_]).\W: Un caractère qui n'est pas alphanumérique ni underscore.\s: Un caractère d'espacement (espace, tabulation, saut de ligne, etc.).\S: Un caractère qui n'est pas un espacement..: N'importe quel caractère (sauf les sauts de ligne, sauf si le drapeausest utilisé). À utiliser avec précaution.\: Caractère d'échappement pour les métacaractères afin de les traiter littéralement (ex:\.pour un point littéral).
Ancres de ligne
^: Début de la chaîne (ou début d'une ligne en mode multiligne).$: Fin de la chaîne (ou fin d'une ligne en mode multiligne).
Fonctionnalités Avancées
Alternance (OU logique)
L'opérateur | permet de spécifier des alternatives.
// Correspond au début de la chaîne 'a' OU à la fin de la chaîne 'bc'
var regexOu1 = /^a|bc$/;
var str1 = "add";
console.log(regexOu1.test(str1)); // true
// Correspond exactement à 'a' OU 'bc' (tout le motif doit correspondre)
var regexOu2 = /^(a|bc)$/;
var str2 = "bc";
console.log(regexOu2.test(str2)); // true
Lookarounds (Assertions)
Les lookarounds permettent de vérifier la présence ou l'absence de certains motifs sans les inclure dans la correspondance.
1. Lookahead Positif ((?=...))
Vérifie si le motif suivant correspond, sans le consommer.
// Exemple 1 : Trouver 'foo' s'il est suivi de 'bar'
const str1 = "foobar foobaz";
const regex1 = /foo(?=bar)/g;
console.log(str1.match(regex1)); // Affiche ["foo"]
// Exemple 2 : Validation de mot de passe complexe (au moins 1 chiffre, 1 minuscule, 1 majuscule, 8 caractères min)
const password = "Password123";
const regexPwd = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
console.log(regexPwd.test(password)); // Affiche true
2. Lookahead Négatif ((?!...))
Vérifie si le motif suivant ne correspond pas, sans consommer de caractères.
// Exemple 1 : Trouver 'foo' s'il n'est PAS suivi de 'bar'
const str2 = "foobar foobaz";
const regex2 = /foo(?!bar)/g;
console.log(str2.match(regex2)); // Affiche ["foo"] (correspondant à 'foobaz')
// Exemple 2 : Valider des noms de fichiers n'étant pas des .jpg
const filenames = ["image.png", "photo.jpg", "document.pdf"];
const regexFile = /^(?!.*\.jpg$)/; // Assure que la chaîne ne se termine pas par '.jpg'
const validFiles = filenames.filter(filename => regexFile.test(filename));
console.log(validFiles); // Affiche ["image.png", "document.pdf"]
Comparaison Lookahead Positif vs Négatif
const chaine = "foobar foobaz";
const lookaheadPositif = /foo(?=bar)/g; // Cherche 'foo' devant 'bar'
const lookaheadNegatif = /foo(?!bar)/g; // Cherche 'foo' PAS devant 'bar'
console.log(chaine.match(lookaheadPositif)); // Affiche ["foo"] (correspondant à 'foobar')
console.log(chaine.match(lookaheadNegatif)); // Affiche ["foo"] (correspondant à 'foobaz')
Exemples d'utilisation
Validation d'un numéro de téléphone
Exemple de motif pour un numéro de téléphone avec indicatif et extension optionnels.
// Format potentiel: 010-87496698-86
// Indicatif (optionnel, 2-3 chiffres), séparateur '-', numéro principal (8 chiffres), extension (optionnelle, 1-5 chiffres)
// Commence par un chiffre différent de 0 pour le numéro principal.
var regexTel = /^(0\d{2,3}-)?[1-9]\d{7}(-\d{1,5})?$/;
Validation d'une adresse e-mail
Utilisation de test() pour vérifier si une chaîne correspond à un format d'email.
<body>
<input type="text" id='emailInput'>
<button id="validateBtn">Valider</button>
</body>
<script type="text/javascript">
window.onload = function() {
var emailInput = document.getElementById("emailInput");
var validateBtn = document.getElementById("validateBtn");
validateBtn.onclick = function() {
// Motif email : commence par des caractères \w, suivi de @, puis un domaine, et une extension. Sensible à la casse désactivé.
var regexEmail = /^\w+@[a-z0-9]+\.[a-z]+$/i;
// La méthode test() retourne true si la chaîne correspond, false sinon.
if (regexEmail.test(emailInput.value)) {
alert("Email valide");
} else {
alert("Email invalide");
}
}
}
</script>
Métacaractères courants
(,): Groupement.[,]: Définition d'une classe de caractères.{,}: Spécification de quantificateurs.\: Caractère d'échappement.^: Début de chaîne ou négation dans une clase.$: Fin de chaîne.|: Opérateur OU (alternance).?: Quantificateur (0 ou 1) ou rendant un quantificateur non gourmand.*: Quantificateur (0 ou plus).+: Quantificateur (1 ou plus)..: N'importe quel caractère (sauf nouvelle ligne).