Objet RegExp de Javascript
RegExp, est abréviation l'expression régulière.
Les expressions régulières sont des modèles utilisés pour vérifier des combinaisons de caractère dans les chaînes de caractères.
Qu’est ce que RegExp ?
Les expressions régulières, communément appelées "regex" ou "RegExp", sont des chaînes de texte spécialement formatées utilisées pour trouver des modèles dans le texte. Les expressions régulières sont l'un des outils les plus puissants disponibles aujourd'hui pour un traitement et une manipulation efficaces et efficients du texte. Par exemple, elles peuvent être utilisées pour vérifier si le format des données (nom, e-mail, numéro de téléphone, mot de passe, etc.) saisies par l'utilisateur est correct ou non, pour trouver ou remplacer la chaîne correspondante dans le contenu du texte, etc.
JavaScript prend en charge les expressions régulières de style Perl. Pourquoi des expressions régulières de style Perl ? Parce que Perl (Practical Extraction and Report Language) a été le premier langage de programmation grand public à fournir une prise en charge intégrée des expressions régulières et qu'il est bien connu pour sa prise en charge des expressions régulières et ses extraordinaires capacités de traitement et de manipulation du texte.
Les expressions régulières sont utilisées pour effectuer de puissantes fonctions de recherches et de remplacements sur le texte.
Commençons par un bref aperçu des méthodes intégrées de JavaScript les plus couramment utilisées pour effectuer le filtrage de modèles avant de nous plonger dans le monde des expressions régulières.
| Fonction | Description |
|---|---|
| exec() | Recherche une correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou null en cas de non-concordance. |
| test() | Teste si une chaîne de caractères correspond à un modèle. Il renvoie true (vrai) ou false (faux). |
| search() | Recherche d'une correspondance dans une chaîne de caractères. Elle renvoie l'index de la première correspondance, ou -1 si aucune correspondance n'est trouvée. |
| replace() | Recherche une correspondance dans une chaîne, et remplace la sous-chaîne correspondante par une chaîne de remplacement. |
| match() | Recherche une correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou null en cas de non correspondance. |
| split() | Divise une chaîne en un tableau de sous-chaînes en utilisant une expression régulière. |
Définition des expressions régulières
En JavaScript, les expressions régulières sont représentées par un objet RegExp, qui est un objet JavaScript natif comme String, Array, etc. Il existe deux façons de créer un nouvel objet RegExp : l'une consiste à utiliser la syntaxe littérale, l'autre à utiliser le constructeur RegExp().
La syntaxe littérale utilise des barres obliques (/pattern/) pour envelopper le modèle d'expression régulière
Syntaxe
var txt=/modele/modifier;
• le modele spécifie le modèle d'une expression
• le modifier spécifie si une recherche est globale, distinguant majuscules et minuscules, etc.
Tandis que la syntaxe du constructeur utilise des guillemets ("pattern").
Syntaxe
var txt=new RegExp(modele,modifier);
ou simplement:
L'exemple suivant montre les deux façons de créer une expression régulière qui correspond à toute chaîne commençant par "Bo".
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Création d'une expression régulière en JavaScript</title>
</head>
<body>
<script>
var str = "Bonjour le monde";
// Syntaxe littérale
var regex1 = /^Bo./;
if(regex1.test(str)) {
document.write("Correspondance trouvée !");
} else {
document.write("Correspondance non trouvée !");
}
document.write("<hr>");
// Syntaxe du constructeur
var regex2 = new RegExp("^Bo\.");
if(regex2.test(str)) {
document.write("Correspondance trouvée !");
} else {
document.write("Correspondance non trouvée !");
}
</script>
</body>
</html>
Comme vous pouvez le constater, la syntaxe littérale des expressions régulières est plus courte et plus facile à lire. Il est donc préférable d'utiliser la syntaxe littérale. Nous l'utiliserons également tout au long de ce tutoriel.
Correspondance de modèles avec l'expression régulière
Les modèles d'expression régulière permettent d'utiliser des lettres, des chiffres, des signes de ponctuation, etc., ainsi qu'un ensemble de caractères spéciaux d'expression régulière (à ne pas confondre avec les caractères spéciaux HTML).
Les caractères qui ont une signification particulière dans une expression régulière sont les suivants :
. * ? + [ ] ( ) { } ^ $ | \. Vous devrez mettre une barre oblique inversée sur ces caractères lorsque vous souhaitez les utiliser littéralement. Par exemple, si vous voulez faire correspondre " . ", vous devrez écrire \.
Tous les autres caractères prennent automatiquement leur signification littérale.
Les sections suivantes décrivent les différentes options disponibles pour formuler des modèles :
Classes de caractères
Les crochets entourant un modèle de caractères sont appelés une classe de caractères, par exemple [abc]. Une classe de caractères correspond toujours à un seul caractère parmi une liste de caractères spécifiés, ce qui veut dire que l'expression [abc] correspond uniquement à un caractère a, b ou c.
Il est également possible de définir des classes de caractères négatives qui correspondent à n'importe quel caractère, à l'exception de ceux contenus entre parenthèses. Une classe de caractères négatifs est définie en plaçant un symbole d'accentuation (^) immédiatement après le crochet ouvrant, comme [^abc], qui correspond à tout caractère sauf a, b et c.
Vous pouvez également définir une plage de caractères en utilisant le trait d'union (-) à l'intérieur d'une classe de caractères, comme [0-9]. Voici quelques exemples de classes de caractères :
| RegExp | Description |
|---|---|
| [abc] | Correspond à l'un des caractères a, b ou c. |
| [^abc] | Correspond à un caractère autre que a, b et c. |
| [a-z] | Correspond à n'importe quel caractère de la minuscule a à la minuscule z. |
| [A-Z] | Correspond à n'importe quel caractère de la majuscule a à la majuscule z. |
| [a-Z] | Correspond à n'importe quel caractère de la minuscule a à la majuscule z. |
| [0-9] | Correspond à un seul chiffre entre 0 et 9. |
| [a-z0-9] | Correspond à un seul caractère compris entre a et z ou entre 0 et 9. |
L'exemple suivant montre comment vérifier si un motif existe ou non dans une chaîne de caractères en utilisant l'expression régulière avec la méthode JavaScript test() :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Correspondance d'un seul caractère à l'aide d'une expression régulière en JavaScript</title>
</head>
<body>
<script>
var regex = /ca[gf]é/;
var str = "Il mangeait du gâteau avec le café.";
/* teste de la chaîne de caractères par rapport
à l'expression régulière*/
if(regex.test(str)) {
document.write("correspondance trouvée !");
} else {
document.write("correspondance non trouvée !");
}
</script>
</body>
</html>
En outre, vous pouvez ajouter le drapeau global (ou modificateur) g à une expression régulière pour trouver toutes les correspondances dans une chaîne :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Trouver toutes les occurrences d'un motif dans une chaîne de caractères à l'aide d'une expression régulière</title>
</head>
<body>
<script>
var regex = /[cg][aâ]/g;
var str = "Il mangeait du gâteau avec le café.";
var trouver = str.match(regex);
/* teste de la chaîne de caractères par rapport
à l'expression régulière*/
if(regex.test(str)) {
document.write(trouver.length +" correspondances sont Trouvées et sont: " + trouver);
} else {
document.write("correspondance non trouvée !");
}
</script>
</body>
</html>
Info : Les expressions régulières ne sont pas exclusives à JavaScript. Divers langages, tels que Java, Perl, Python, PHP, etc., utilisent également la même notation pour trouver des motifs dans le texte.
Modificateurs de RegExp
Un modificateur de modèle vous permet de contrôler la façon dont une correspondance de modèle est traitée. Les modificateurs de modèle sont placés directement après l'expression régulière. Par exemple, si vous souhaitez rechercher un modèle sans tenir compte de la casse, vous pouvez utiliser le modificateur i, comme ceci : /modèle/i.
Le tableau suivant répertorie certains des modificateurs de modèle les plus couramment utilisés.
| Modificateur | Description |
|---|---|
| g | Effectue une correspondance globale, c'est-à-dire qu'elle trouve toutes les occurrences. |
| i | Rend la correspondance insensible à la casse (c'est à dire ne distinguant pas majuscules et minuscules). |
| m | Modifie le comportement de ^ et $ pour qu'ils correspondent à une limite de nouvelle ligne (c'est-à-dire le début ou la fin de chaque ligne dans une chaîne multiligne), au lieu d'une limite de chaîne. |
| o | Évalue l'expression une seule fois. |
| s | Modifie le comportement de . (point) pour correspondre à tous les caractères, y compris les nouvelles lignes. |
| x | Vous permet d'utiliser des espaces et des commentaires dans une expression régulière pour plus de clarté. |
L'exemple suivant vous montre comment utiliser les modificateurs g et i dans une expression régulière pour effectuer une recherche globale et insensible à la casse avec la méthode JavaScript match().
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JjavaScript - Faire correspondre le modèle sans tenir compte de la case à l'aide d'une expression régulière.</title>
</head>
<body>
<script>
var str = "La couleur rouge est plus visible que la Couleur bleue à la lumière du jour.";
var regex1 = /couleur/g;
var regex2 = /couleur/gi;
var trouver = str.match(regex1); // modéle distingant le magiscule
document.write("<p>" + trouver.length + " correspondance trouvée: " + trouver + "</p>");
trouver = str.match(regex2); // modéle ignorant le magiscule
document.write("<p>" + trouver.length + " correspondances trouvées: " + trouver + "</p>");
</script>
</body>
</html>
De même, l'exemple suivant montre comment effectuer une correspondance au début de chaque ligne d'une chaîne de plusieurs lignes en utilisant l'ancre ^ et le modificateur m avec la méthode JavaScript match().
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Faire correspondre un modèle dans une chaîne de caractères multiligne à l'aide d'une expression régulière</title>
</head>
<body>
<script>
var str = "La couleur rouge est plus visible que \nla couleur bleue à la lumière du jour.";
var regex1 = /^La couleur/gi;
var regex2 = /^La couleur/gim;
var trouver = str.match(regex1); /* modèle de correspondance sans multilignesflag */
document.write("<p> " + trouver.length + " crrespondance trouvée: " + trouver + "</p>");
trouver = str.match(regex2); /* modèle de correspondance avec modificateur multiligne m */
document.write("<p> " + trouver.length + " correspondances trouvées: " + trouver + "</p>");
</script>
</body>
</html>
Des modificateurs sont employés pour exécuter des recherches ne distinguant pas majuscules et minuscules et globales.
Le modificateur I est employé pour effectuer la correspondance ne distinguant pas majuscules et minuscules.
Le modificateur g est employé pour effectuer une correspondance globale (trouvez toutes les correspondances plutôt qu'en s'arrêtant après la première trouvée).
Exemple 1
Faites une recherche ne distinguant pas majuscules et minuscules de « Apprendre-creer-sites » dans une chaîne :
var text="Visitez oujood\.com pour Apprendre creer sites";
var modele1=/ apprendre creer sites /i;
Exemple 2
Faites une recherche globale de « est » :
var text="est ce que tout est là? " ;
var modele1=/est/g ;
Exemple 3
Faites une recherche globale et ne distinguant pas majuscules et minuscules de « est » :
var text="est ce que tout est là? " ;
var modele1=/Est/gi ;
Classes de caractères prédéfinies
Certaines classes de caractères, comme les chiffres, les lettres et les espaces, sont utilisées si fréquemment qu'il existe des noms raccourcis pour les désigner. Le tableau suivant répertorie ces classes de caractères prédéfinies :
| Raccourci | Description |
|---|---|
| . | Correspond à n'importe quel caractère unique, à l'exception de la nouvelle ligne \n. |
| \d | correspond à tout caractère numérique. Identique à [0-9]. |
| \D | Correspond à tout caractère non numérique. Identique à [^0-9]. |
| \s | Correspond à tout caractère d'espacement (espace, tabulation, nouvelle ligne ou caractère de retour chariot). Identique à [ \t\n\r] |
| \S | Correspond à tout caractère autre qu'un espace. Identique à [^ \t\n\r] |
| \w | Correspond à n'importe quel caractère de mot (défini comme a à z, A à Z, 0 à 9, et le trait de soulignement). Identique à [a-zA-Z_0-9]. |
| \W | Correspond à tout caractère non verbal. Identique à [^a-zA-Z_0-9]. |
L'exemple suivant vous montre comment trouver et remplacer un espace par un trait d'union dans une chaîne de caractères à l'aide d'une expression régulière et de la méthode JavaScript replace() :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Rechercher et remplacer des caractères dans une chaîne en utilisant une expression régulière</title>
</head>
<body>
<script>
var regex = /\s/g;
var replacement = "_";
var str = "La terre tourne au tour\ndu soleil\tpondant une année";
// Affiche la chaine de caractére d'origine
document.write("<pre>" + str + "</pre>");
// Replace le caractére espace , nouvelle ligne "\n" et le caractére tabulatio "\t" and tabs par le caractére "_"
document.write("<pre>" + str.replace(regex, replacement) + "</pre>");
// Replace seulement le caractére espace
document.write("<pre>" + str.replace(/ /g, "_") + "</pre>");
</script>
</body>
</html>
Quantificateurs de répétition
Dans la section précédente, nous avons appris à faire correspondre un seul caractère de différentes manières. Mais que se passe-t-il si vous voulez faire correspondre plus d'un caractère ? Par exemple, disons que vous voulez trouver des mots contenant une ou plusieurs occurrences de la lettre p, ou des mots contenant au moins deux p, et ainsi de suite.
C'est là que les quantificateurs entrent en jeu. Grâce aux quantificateurs, vous pouvez spécifier le nombre de fois qu'un caractère dans une expression régulière doit correspondre. Les quantificateurs peuvent être appliqués aux caractères individuels, ainsi qu'aux classes de caractères et aux groupes de caractères contenus dans les parenthèses.
Le tableau suivant répertorie les différentes manières de quantifier un modèle particulier :
| RegExp | Description |
|---|---|
| p+ | Correspond à une ou plusieurs occurrences de la lettre p. |
| p* | Correspond à zéro ou plusieurs occurrences de la lettre p. |
| p? | Correspond à zéro ou une occurrence de la lettre p. |
| p{2} | Correspond à exactement deux occurrences de la lettre p. |
| p{2,3} | Correspond à au moins deux occurrences de la lettre p, mais pas plus de trois occurrences. |
| p{2,} | Correspond à deux occurrences ou plus de la lettre p. |
| p{,3} | Recherche au maximum trois occurrences de la lettre p. |
L'expression régulière de l'exemple suivant divise la chaîne à la virgule, à la séquence de virgules, à l'espace ou à une combinaison de ces éléments à l'aide de la méthode JavaScript split() :
ExempleExécutez ce code "
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Rechercher et remplacer des caractères dans une chaîne en utilisant une expression régulière</title>
</head>
<body>
<script>
var regex = /[\s,]+/ ;
var str = "Mes couleurs préférées sont le rouge, le vert et le bleu" ;
var parts = str.split(regex) ;
// Boucle dans le tableau des parties et affiche les sous-chaînes
for(var part of parts){
document.write("<p>" + part + "</p>") ;
}
</script>
</body>
</html>
La méthode test()
La méthode test() recherche dans une chaîne une valeur spécifique, et renvoie vrai ou faux, selon le résultat.
L'exemple suivant recherche dans une chaîne le caractère « e »
Exemple
var modele1=new RegExp (" e ") ;
document.write (modele1.test (" les meilleures choses dans la vie sont libres "));
Puisqu'il y a un « e » dans la chaîne, le résultat du code ci-dessus sera : true
La méthode exec ()
La méthode exec() recherche dans une chaîne une valeur spécifique, et renvoie le texte de la valeur trouvée. Si aucune correspondance n'est trouvée, elle renvoie nulle.
L'exemple suivant recherche une chaîne le caractère « e » :
Exemple
var modele1=new RegExp (" e ") ;
document.write (modele1.exec (" les meilleures choses dans la vie sont libres "));
Puisqu'il y a un « e » dans la chaîne, le résultat du code ci-dessus sera : e
Forme d’une adresse email
Voici un exemple plus concret. Dans cet exemple nous allons tester si la forme l’adresse email saisie par l’utilisateur sur le formulaire est valide. Exemple Validation de la forme de l’adresse email
Sélectionner le code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Validation de la forme de l’adresse email</title>
<script type="text/javascript">
function validerAdresse(){
var email = document.form.email.value;
var modele = /^[a-z0-9\-_\.]+@[a-z0-9]+\.[a-z]{2,5}$/i;
if (modele.test(email))
alert("Votre adresse email est valide !")
else
alert("Votre adresse email est invalide !");
return false;
}
</script>
<body>
<form name="form">
<input type="text" name="email" value="adresse@email.com"/>
<input type="submit" value="Valider" onclick="validerAdresse();">
</form>
</body>
</html>
Explications du code :
Le signe ^ indique que la chaîne doit commencer par ce qui suit, et le signe $ indique qu'elle doit se terminer par ce qui précède.
[a-z0-9\-_\.] veut dire une chaîne de caractère composée de lettres et chiffres, soit les 26 lettres de l'alphabet et les dix chiffres , un tiret, un sous ligné, et le point .
+@ veut dire suivie par le symbole @
+\.[a-z]{2,5} veut dire chaîne composée de 2 à 5 lettres de a à z
le i à la fin pour ne pas distinguer les majiscules
Le modele = /^[a-z0-9\-_\.]+@[a-z0-9]+\.[a-z]{2,5}$/i veut dire commence par une chaîne qui contient des lettres des chiffres un tiret, un sous ligné, et le point suivie du symbole @ puis un point et une chaîne composée de 2 à 5 lettres de a à z
Avec la méthode test() on teste la variable email si elle est conforme au modèle elle renvoie:
alert("Votre adresse email est valide !")
si non elle renvoie alert("Votre adresse email est invalide !")
Caractères spéciaux en JavaScript
Pour rechercher un caractère faisant partie des caractères spéciaux, il suffit de le faire précéder d'un antislash (sauf entre crochets) :
| Caractère spécial | Echappement |
|---|---|
| \ | \\ |
| . | \. |
| $ | \$ |
| [ | \[ |
| ] | \] |
| ( | \( |
| ) | \) |
| { | \{ |
| } | \} |
| ^ | \^ |
| ? | \? |
| * | \* |
| + | \+ |
| - | \- |
Les symboles ^ et $ indiquent respectivement le début et la fin d'une chaîne, et permettent donc de la délimiter.
"^debut": chaîne qui commence par "debut"
"fin$": chaîne qui se termine par "fin"
"^chaîne$": chaîne qui commence et se termine par "chaîne"
"abc": chaîne contenant la chaîne "abc"
Les symboles *, + et ?, signifient respectivement "zéro ou plusieurs", "au moins un", "un ou aucun", et permettent de donner une notion de quantité.
"abc+": chaîne qui contient "ab" suivie de un ou plusieurs "c" ("abc", "abcc", etc.)
"abc*": chaîne qui contient "ab" suivie de zéro ou plusieurs "c" ("ab", "abc", etc.)
"abc?": chaîne qui contient "ab" suivie de zéro ou un "c" ("ab" ou "abc" uniquement)
"^abc+": chaîne commençant par "ab" suivie de un ou plusieurs "c" ("abc", "abcc", etc.)
Les accolades {X,Y} permettent de donner des limites précises de nombre d'occurences.
"abc{2}": chaîne qui contient "ab" suivie de deux "c" ("abcc")
"abc{2,}": chaîne qui contient "ab" suivie de deux "c" ou plus ("abcc" etc..)
"abc{2,4}": chaîne qui contient "ab" suivie 2, 3 ou 4 "c" ("abcc" .. "abcccc")
Il est à noter que le premier nombre de la limite est obligatoire ("{0,2}", mais pas "{,2}"). Les symboles vu précedemment ('*', '+', et '?') sont équivalents à "{0,}", "{1,}", et "{0,1}".
Parenthèses capturantes
Les parenthèses ( ) permettent de représenter une séquence de caractères et de capturer le résultat. Les occurences correspondant au modèle entre parenthèses sont accessibles via la méthode exec() de l'objet RegExp ou bien les méthodes search(), match() et replace() de l'objet String.
"a(bc)+": chaîne qui contient "a" suivie de au moins une occurence de la chaîne "bc"
La barre verticale | se comporte en tant qu'opérateur OU
"(un|le)": chaîne qui contient "un" ou "le"
Caractère quelconque
Le point (.) indique n'importe une occurence de n'importe quel caractère.
"^.{3}$": chaîne qui contient 3 caractères
".*": Tous les caractères
Liste de caractères
Les crochets [ ] définissent une liste de caractères autorisés (ou interdits). Le signe - permet quand à lui de définir un intervalle. Le caractère ^ après le premier crochet indique quand à lui une interdiction.
"[abc]": chaîne qui contient un "a", un "b", ou un "c".
"[a-z]": chaîne qui contient un caractère compris entre "a" et "z".
"[^a-zA-Z]": chaîne qui ne commence pas par une lettre.
"[-ag]": chaîne qui contient un moins (-), un "a", ou un "g"
"[a-g]": chaîne qui contient un caractère compris entre "a" et "g"
"[\+?{}.]": chaîne qui contient un de ces six caractères
"[]-]": chaîne qui contient le caractère "]" ou le caractère "-"
Caractères spéciaux
Il existe enfin des caractères spéciaux (précédés d'une barre oblique inverse) représentant des types de caractères spécifiques :
| Caractère spécial | Utilité |
|---|---|
| \b | Permet de capturer une coupure de mot, c'est-à-dire des caractères situés au tout début ou à la fin d'un mot. Par exemple "he\b" permet de capturer "CommentCaMarche" mais pas "chenil". De la même façon "\bCo" permet de capturer "CommentCaMarche" mais pas "DéCor". |
| \B | Permet de capturer les caractères non précédés ou suivis d'une coupure de mot, c'est-à-dire des caractères situés au milieu d'un mot. Par exemple "ment\B" permet de capturer "CommentCaMarche" mais pas "Comment Ca Marche". |
| \cCaractère | Permet de capturer un caractère de contrôle (correspondant à la combinaison Ctrl+Caractère. Par exemple "\cC" permet de capturer la séquence Ctrl+c. |
| \d | Permet de capturer un caractère numérique. \d est ainsi équivalent à [0-9]. |
| \f | Permet de capturer un saut de page. |
| \n | Permet de capturer un saut de ligne. |
| \r | Permet de capturer un retour chariot. |
| \s | Permet de capturer un "caractère blanc" (espace, retour chariot, tabulation, saut de ligne, saut de page). |
| \S | Permet de capturer un "caractère non blanc" (tous les caractères sauf espace, retour chariot, tabulation, saut de ligne, saut de page). |
| \t | Permet de capturer une tabulation horizontale. |
| \v | Permet de capturer une tabulation verticale. |
| \w | Permet de capturer un caractère alphanumérique (y compris le caractère _). \w est ainsi équivalent à [a-zA-Z0-9_]. |
| \w | Permet de capturer un caractère non alphanumérique. \W est ainsi équivalent à [^a-zA-Z0-9_]. |
| \oNombre | Permet de capturer un nombre en base octale (base 8). |
| \xNombre | Permet de capturer un nombre en base hexadécimale (base 16). |
Tableau récapitulatif
Voici un tableau récapitulatif des caractères spéciaux utilisés dans les expressions régulières :
| Caractère | Utilité |
|---|---|
| \ | Le caractère antislash représente lui-même ou le caractère spécial qui le suit. |
| [] | Les crochets définissent une liste de caractères. |
| () | Les parenthèses définissent un élément composé de l'expression régulière qu'elle contient. |
| {} | Les accolades lorsqu'elles contiennent un ou plusieurs chiffres séparés par des virgules représentent le nombre d'occurences de l'élément les précédant (par exemple p{2,5} correspond à ppp, pppp ou ppppp |
| - | Un moins entre deux caractères dans une liste représente un intervalle (par exemple [a-d] représente [abcd]). |
| . | Le caractère point représente un caractère quelconque. |
| * | Le caractère astérisque indique un nombre d'occurences indéterminé (y compris aucune) de l'élément le précédant. |
| + | Le caractère plus indique une ou plusieurs occurences de l'élément le précédant. |
| ? | Le caractère "point d'interrogation" indique une occurence éventuelle (0 ou 1) de l'élément le précédant. |
| | | La barre verticale signifie l'occurrence de l'élément situé à sa gauche ou de celui situé à sa droite (lard|cochon) |
| ^ • | Placé en début d'expression il signifie "chaîne commençant par .. " |
| • | Utilisé entre crochet, immédiatement après le crochet ouvrant, il signifie "ne contenant pas les caractères suivants... |
| [abc] | Permet de rechercher les caractères compris entre les crochets. |
| [^abc] | Permet de rechercher tous les caractères sauf ceux compris entre les crochets. |
| $ | Placé en fin d'expression il signifie "chaîne finissant par ... " |
Exemple fonction pour remplacer les caractères avec les accents
Sélectionner le code
<script><!--
function sansaccent(chaine) {
temp = chaine.replace(/[àâä]/gi,"a")
temp = temp.replace(/[éèêë]/gi,"e")
temp = temp.replace(/[îï]/gi,"i")
temp = temp.replace(/[ôö]/gi,"o")
temp = temp.replace(/[ùûü]/gi,"u")
return temp
}
document.write(sansaccent("l'élément doit être sans accents"))
//--></script>
Ancres de position javascript
Dans certaines situations, vous souhaitez effectuer une correspondance au début ou à la fin d'une ligne, d'un mot ou d'une chaîne. Pour ce faire, vous pouvez utiliser des ancres. Les deux ancres les plus courantes sont l'accentuation (^), qui représente le début de la chaîne, et le signe dollar ($), qui représente la fin de la chaîne.
| RegExp | Description |
|---|---|
| ^p | Correspond à la lettre p au début d'une ligne. |
| p$ | Correspond à la lettre p à la fin d'une ligne. |
L'expression régulière de l'exemple suivant correspondra uniquement à tous les noms du tableau qui commencent par la lettre "J" en utilisant la fonction JavaScript test() :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Faire correspondre des chaînes de caractères commençant par des caractères spécifiques à l'aide d'une expression régulière</title>
</head>
<body>
<script>
var regex = /^J/;
var noms = ["James Bond", "Clark Kent", "John Rambo"];
/* Effectuer une boucle dans le tableau des noms et afficher les noms correspondants.*/
for(var nom of noms) {
if(regex.test(nom)) {
document.write("<p>" + nom + "</p>")
}
}
</script>
</body>
</html>
Alternance JavaScript : spécifier une version alternative d'un modèle dans une expression régulière
L'alternance vous permet de spécifier une version alternative d'un modèle. L'alternance dans une expression régulière fonctionne comme l'opérateur OR dans une instruction conditionnelle if-else.
Vous pouvez spécifier l'alternance à l'aide d'une barre verticale (|). Par exemple, l'expression régulière /renard|chien|lapin/ correspond à la chaîne "renard", ou à la chaîne "chien", ou à la chaîne "lapin". Voici un exemple :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript : spécifier une version alternative d'un modèle dans une expression régulière</title>
</head>
<body>
<script>
var regex = /lapin|chien|renard/;
var str = "Le renard brun et rapide saute par-dessus le lapin inattentif, mais il est poursuivi par le chien courageux.";
var trouver = str.match(regex);
document.write("La Correspondance à la sous-chaîne trouvée est : " + trouver);
</script>
</body>
</html>
JavaScript Regroupement de sous-expressions dans une expression régulière
Les expressions régulières utilisent les parenthèses pour regrouper les sous-expressions, tout comme les expressions mathématiques. Les parenthèses permettent d'appliquer un quantificateur de répétition à l'ensemble d'une sous-expression.
Par exemple, dans l'expression rationnelle /go+/, le quantificateur + est appliqué uniquement au dernier caractère o et correspond aux chaînes "go", "goo", etc. Alors que dans la regexp /(go)+/, le quantificateur + est appliqué au groupe de caractères g et o et correspond aux chaînes "go", "gogo", etc.
Code
<title>JavaScript Regroupement de sous-expressions dans une expression régulière</title>
</head>
<body>
<script>
var str = "One day Gogo will go to school.";
var regex1 = /(go)+/i;
var regex2 = /(go)+/gi;
var trouver = str.match(regex1); // correspondance insensible à la case
console.log(trouver);
trouver = str.match(regex2); // correspondance globale, insensible à la case
console.log(trouver);
</script>
<p><strong>Note:</strong> Veuillez consulter la console du navigateur en appuyant sur la touche F12 du clavier.</p>
</body>
</html>
Remarque : si l'expression régulière inclut le drapeau g, la méthode match() renvoie uniquement un tableau contenant toutes les sous-chaînes correspondantes plutôt que l'objet match. Les groupes capturés, l'index de la correspondance entière et les autres propriétés ne sont pas retournés.
JavaScript Frontières des mots: Faire correspondre des mots commençant ou se terminant par un modèle à l'aide d'une expression régulière
Un caractère de délimitation de mot ( \b) vous aide à rechercher les mots qui commencent et/ou se terminent par un modèle. Par exemple, l'expression /\bcar/ correspond aux mots commençant par le modèle car, et pourrait correspondre à cart, carrot, ou cartoon, mais pas à oscar.
De même, l'expression /car\b/ correspond aux mots se terminant par le modèle car, et correspondrait à oscar ou supercar, mais pas à cart. De même, l'expression /\bcar\b/ correspond aux mots commençant et se terminant par le modèle car, et ne correspond qu'au mot car.
L'exemple suivant met en évidence les mots commençant par car en gras :
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>JavaScript Faire correspondre des mots commençant ou se terminant par un modèle à l'aide d'une expression régulière</title>
</head>
<body>
<script>
var regex = /(\b(car)\w*)/g;
var str = " cart, carrot, cartoon, oscar, supercar. ";
var replacement = '<b style="color:red">$1</b>';
/* Highlights the words beginning with car in bold*/
var resultat = str.replace(regex, replacement);
document.write(" Les mots commençant par car sont en gras rouge : ");
document.write(resultat);
</script>
</body>
</html>
Dans ce tutoriel nous avons fait le tour des points les plus importants des expressions régulières de javascript les plus utilisées.
Si ce tutoriel vous a été utile , encouragez nous en partageant cet page sur les réseaux sociaux.
|
Cours precedent: |
Sommaire : |
Cours suivant: |
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
