Objet RegExp JavaScript


Table des matières

    Afficher la table des matières


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.


Qu'est-ce qu'une expression régulière ?

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.

Syntaxe

/pattern/modifiers;

Exemple

/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).


Utiliser des méthodes de chaîne

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é.


Utilisation de la chaîne search() avec une chaîne

La méthode search() recherche dans une chaîne une valeur spécifiée et renvoie la position de la correspondance :

Exemple

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 &quot;W3Schools&quot;, 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>


Utilisation de la chaîne search() avec une expression régulière

Exemple

Utilisez 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>



Utilisation de la chaîne replace() avec une chaîne

La 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 &quot;Microsoft&quot; with &quot;W3Schools&quot; 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>



Utilisez la chaîne replace() avec une expression régulière

Exemple

Utilisez 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>

As-tu remarqué?

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).


Modificateurs d'expressions régulières

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>

Modèles d'expressions régulières

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>

Utilisation de l'objet RegExp

En JavaScript, l'objet RegExp est un objet d'expression régulière avec propriétés et méthodes prédéfinies.


Utiliser test()

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 » :

Exemple

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!");

Utiliser exec()

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 » :

Exemple

/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>

Référence complète de RegExp

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.