Une expression régulière est une séquence de caractères qui forme un modèle de recherche.
Le modèle de recherche peut être utilisé pour la recherche de texte et le remplacement de texte opérations.
Une expression régulière est une séquence de caractères qui forme une recherche motif.
Lorsque vous recherchez des données dans un texte, vous pouvez utiliser ce modèle de recherche pour décrire ce que vous recherchez.
Une expression régulière peut être un caractère unique ou un modèle plus compliqué.
Les expressions régulières peuvent être utilisées pour effectuer tous les types de recherche de texte et les opérations de remplacement de texte.
/pattern/modifiers;
/w3schools/i;
Exemple expliqué :
/w3schools/i est une expression régulière.
w3schools est un modèle (à utiliser dans une recherche).
i est un modificateur (modifie la recherche pour qu'elle ne soit pas sensible à la casse).
En JavaScript, les expressions régulières sont souvent utilisées avec les deux chaînes méthodes : search()
et replace()
.
La méthode search()
utilise une expression pour rechercher un match, et renvoie la position du match.
La méthode replace()
renvoie une chaîne modifiée où le Le motif est remplacé.
search()
avec une chaîneLa méthode search()
recherche dans une chaîne une valeur spécifiée et renvoie la position de la correspondance :
Utilisez une chaîne pour effectuer une recherche de « W3schools » dans une chaîne :
let text = "Visit W3Schools!";
let n = text.search("W3Schools");
Le résultat dans n sera :
6
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Search a string for "W3Schools", and display the position of the match:</p>
<p id="demo"></p>
<script>
let text = "Visit W3Schools!";
let n = text.search("W3Schools");
document.getElementById("demo").innerHTML = n;
</script>
</body>
</html>
search()
avec une expression régulièreUtilisez une expression régulière pour effectuer une recherche insensible à la casse de "w3schools" dans une chaîne :
let text = "Visit W3Schools";
let n = text.search(/w3schools/i);
Le résultat dans n sera :
6
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Search a string for "w3Schools", and display the position of the match:</p>
<p id="demo"></p>
<script>
let text = "Visit W3Schools!";
let n = text.search(/w3Schools/i);
document.getElementById("demo").innerHTML = n;
</script>
</body>
</html>
replace()
avec une chaîneLa méthode replace()
remplace une valeur spécifiée par une autre valeur dans une chaîne :
let text = "Visit Microsoft!";
let result = text.replace("Microsoft", "W3Schools");
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace("Microsoft","W3Schools");
}
</script>
</body>
</html>
replace()
avec une expression régulièreUtilisez une expression régulière insensible à la casse pour remplacer Microsoft par W3Schools dans une chaîne :
let text = "Visit Microsoft!";
let result = text.replace(/microsoft/i, "W3Schools");
Le résultat en res sera :
Visit W3Schools!
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace(/microsoft/i, "W3Schools");
}
</script>
</body>
</html>
Des arguments d'expression régulière (au lieu d'arguments de chaîne) peuvent être utilisés dans les méthodes ci-dessus.
Les expressions régulières peuvent rendre votre recherche beaucoup plus puissante (insensible à la casse par exemple).
Les Modificateurs peuvent être utilisés pour effectuer des recherches plus globales sans tenir compte de la casse :
Modificateur :
i
Description : effectuer une correspondance sans tenir compte de la casse
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a case-insensitive search for "w3schools" in a string:</p>
<p id="demo"></p>
<script>
let text = "Visit W3Schools";
let result = text.match(/w3schools/i);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Modificateur :
g
Description : Effectuer une correspondance globale (trouver toutes les correspondances plutôt que de s'arrêter après la première correspondance)
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a global search for "is" in a string:</p>
<p id="demo"></p>
<script>
let text = "Is this all there is?";
let result = text.match(/is/g);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Modificateur :
m
Description : Effectuer une correspondance multiligne
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a multiline search for "is" at the beginning of each line in a string:</p>
<p id="demo"></p>
<script>
let text = "\nIs th\nis it?";
let result = text.match(/^is/m);
document.getElementById("demo").innerHTML = "Result is: " + result;
</script>
</body>
</html>
Les crochets sont utilisés pour rechercher une plage de caractères :
Modificateur :
[abc]
Description : Recherchez l'un des caractères entre parenthèses
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a global search for the character "h" in a string:</p>
<p id="demo"></p>
<script>
let text = "Is this all there is?";
let result = text.match(/[h]/g);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Modificateur :
[0-9]
Description : Recherchez l'un des chiffres entre parenthèses
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a global search for the numbers 1 to 4 in a string:</p>
<p id="demo"></p>
<script>
let text = "123456789";
let result = text.match(/[1-4]/g);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Modificateur :
(x|y)
Description : Recherchez l'une des alternatives séparées par |
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a global search for any of the specified alternatives (red|green):</p>
<p id="demo"></p>
<script>
let text = "re, green, red, green, gren, gr, blue, yellow";
let result = text.match(/(red|green)/g);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Les métacaractères sont des caractères ayant une signification particulière :
Modificateur :
\d
Description : Rechercher un chiffre
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a global search for digits in a string:</p>
<p id="demo"></p>
<script>
let text = "Give 100%!";
let result = text.match(/\d/g);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Modificateur :
\s
Description : Rechercher un caractère d'espacement
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a global search for whitespace characters in a string:</p>
<p id="demo"></p>
<script>
let text = "Is this all there is?";
let result = text.match(/\s/g);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Modificateur :
\b
Description : Recherchez une correspondance au début d'un mot comme ceci : \bWORD, ou à la fin d'un mot. comme ceci : WORD\b
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Search for the characters "LO" in the <b>beginning</b> of a word in the phrase:</p>
<p>"HELLO, LOOK AT YOU!"</p>
<p>Found in position: <span id="demo"></span></p>
<script>
let text = "HELLO, LOOK AT YOU!";
let result = text.search(/\bLO/);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Search for the characters "LO" in the <b>end</b> of a word in the phrase:</p>
<p>"HELLO, LOOK AT YOU!"</p>
<p>Found in position: <span id="demo"></span></p>
<script>
let text = "HELLO, LOOK AT YOU!";
let result = text.search(/LO\b/);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Modificateur :
\uxxxx
Description : recherchez le caractère Unicode spécifié par le nombre hexadécimal xxxx
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a global search for the hexadecimal number 0057 (W) in a string:</p>
<p id="demo"></p>
<script>
let text = "Visit W3Schools. Hello World!";
let result = text.match(/\u0057/g);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Les Quantificateurs définissent des quantités :
Modificateur :
n+
Description : correspond à toute chaîne contenant au moins un n
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a global search for at least one "o" in a string:</p>
<p id="demo"></p>
<script>
let text = "Hellooo World! Hello W3Schools!";
let result = text.match(/o+/g);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Modificateur :
n*
Description : correspond à toute chaîne contenant zéro ou plusieurs occurrences de n
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a global search for an "l", followed by zero or more "o" characters:</p>
<p id="demo"></p>
<script>
let text = "Hellooo World! Hello W3Schools!";
let result = text.match(/lo*/g);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Modificateur :
n?
Description : correspond à toute chaîne contenant zéro ou une occurrence de n
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a global search for a "1", followed by zero or one "0" characters:</p>
<p id="demo"></p>
<script>
let text = "1, 100 or 1000?";
let result = text.match(/10?/g);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
En JavaScript, l'objet RegExp est un objet d'expression régulière avec propriétés et méthodes prédéfinies.
La méthode test()
est une méthode d'expression RegExp.
Il recherche un modèle dans une chaîne et renvoie vrai ou faux, selon le résultat.
L'exemple suivant recherche dans une chaîne le caractère « e » :
const pattern = /e/;
pattern.test("The best things in life are free!");
Puisqu'il y a un "e" dans la chaîne, le résultat du code ci-dessus sera :
true
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Search for an "e" in the next paragraph:</p>
<p id="p01">The best things in life are free!</p>
<p id="demo"></p>
<script>
let text = document.getElementById("p01").innerHTML;
const pattern = /e/;
document.getElementById("demo").innerHTML = pattern.test(text);
</script>
</body>
</html>
Vous n'êtes pas obligé de mettre d'abord l'expression régulière dans une variable. Les deux Les lignes ci-dessus peuvent être raccourcies à une :
/e/.test("The best things in life are free!");
La méthode exec()
est une méthode d'expression RegExp.
Il recherche dans une chaîne un modèle spécifié et renvoie le texte trouvé sous la forme un objet.
Si aucune correspondance n'est trouvée, il renvoie un objet (null) vide.
L'exemple suivant recherche dans une chaîne le caractère « e » :
/e/.exec("The best things in life are free!");
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p id="demo"></p>
<script>
const obj = /e/.exec("The best things in life are free!");
document.getElementById("demo").innerHTML =
"Found " + obj[0] + " in position " + obj.index + " in the text: " + obj.input;
</script>
</body>
</html>
Pour une référence complète, rendez-vous sur notre Complete Référence JavaScript RegExp.
La référence contient des descriptions et des exemples de tous les RegExp propriétés et méthodes.