Recherche de chaîne JavaScript


Table des matières

    Afficher la table des matières

Méthodes de recherche de chaînes

  • String indexOf()
  • String lastIndexOf()
  • String search()
  • String match()
  • String matchAll()
  • String includes()
  • String startsWith()
  • String endsWith()

Chaîne JavaScript indexOf()

La méthode indexOf() renvoie l'index (position) la première occurrence d'une chaîne dans une chaîne :

Exemple

let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>The indexOf() method returns the position of the first occurrence of a string in a string.</p>
<p>The position of the first occurrence of "locate" is:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

Note

JavaScript compte les positions à partir de zéro.

0 est la première position dans un chaîne, 1 est le deuxième, 2 est le troisième, ...


Chaîne JavaScript lastIndexOf()

La méthode lastIndexOf() renvoie l'index du dernier occurrence d'un texte spécifié dans une chaîne :

Exemple

let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The lastIndexOf() Method</h2>

<p>The position of the last occurrence of "locate" is:</p>

<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>

indexOf() et lastIndexOf() renvoient -1 si le texte n'est pas trouvé :

Exemple

let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("John");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>Both indexOf() and lastIndexOf() return -1 if the text is not found:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("John");
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>

Les deux méthodes acceptent un deuxième paramètre comme position de départ pour le recherche:

Exemple

let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate", 15);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>The indexOf() method accepts a second parameter as the starting position for the search:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate",15);
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

Les méthodes lastIndexOf() effectuent une recherche en arrière (de la fin au début), c'est-à-dire : si le deuxième paramètre est 15, la recherche commence à la position 15 et recherche jusqu'au début de la chaîne.

Exemple

let text = "Please locate where 'locate' occurs!";
text.lastIndexOf("locate", 15);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The lastIndexOf() Method</h2>

<p>The lastIndexOf() method accepts a second parameter as the starting position for the search.</p>
<p>Remember that the lastIndexOf() method searches backwards, so position 15 means start the search at position 15, and search to the beginning.</p>

<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate", 15);
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>


Recherche de chaîne JavaScript()

La méthode search() recherche dans une chaîne une chaîne (ou une expression régulière) et renvoie la position du match :

Exemples

let text = "Please locate where 'locate' occurs!";
text.search("locate");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The search() Method</h2>

<p>The search() method returns the position of the first occurrence of a string in a string.</p>
<p>The position of the first occurrence of "locate" is:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search("locate");
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

let text = "Please locate where 'locate' occurs!";
text.search(/locate/);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The search() Method</h2>

<p>The search() method returns the position of the first occurrence of a string in a string.</p>
<p>Return the position of the first occurrence of a regular expression:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search(/locate/);
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>


As-tu remarqué?

Les deux méthodes, indexOf() et search(), sont égales ?

Ils acceptent les mêmes arguments (paramètres) et renvoient la même valeur ?

Les deux méthodes ne sont PAS égales. Voici les différences :

  • La méthode search() ne peut pas prendre un deuxième argument de position de départ.

  • La méthode indexOf() ne peut pas prendre valeurs de recherche puissantes (expressions régulières).

Vous en apprendrez davantage sur expressions régulières dans un chapitre ultérieur.



Correspondance de chaîne JavaScript()

La méthode match() renvoie un tableau contenant les résultats de la correspondance une chaîne contre une chaîne (ou une expression régulière).

Exemples

Effectuez une recherche sur "ain":

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match("ain"); 

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match("ain");
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

Effectuez une recherche sur "ain":

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/); 

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;

</script>

</body>
</html>

Effectuez une recherche globale de "ain":

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/g); 

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a global search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/g);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

Effectuez une recherche globale, insensible à la casse, pour « ain » :

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/gi);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a global, case-insensitive search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/gi);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

Note

Si une expression régulière n'inclut pas le modificateur g (recherche globale), match() renverra uniquement la première correspondance de la chaîne.

En savoir plus sur les expressions régulières dans le chapitre JS RegExp.


Chaîne JavaScript matchAll()

La méthode matchAll() renvoie un itérateur contenant les résultats de la correspondance une chaîne contre une chaîne (ou une expression régulière).

Exemple

const iterator = text.matchAll("Cats");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Si le paramètre est une expression régulière, l'indicateur global (g) doit être défini, sinon une TypeError est levée.

Exemple

const iterator = text.matchAll(/Cats/g);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Si vous souhaitez effectuer une recherche sans tenir compte de la casse, l'indicateur insensible (i) doit être défini :

Exemple

const iterator = text.matchAll(/Cats/gi);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Remarques

matchAll() est une fonctionnalité ES2020.

matchAll() ne fonctionne pas dans Internet Explorer.


La chaîne JavaScript inclut()

La méthode includes() renvoie true si une chaîne contient une valeur spécifiée.

Sinon, il renvoie false.

Exemples

Vérifiez si une chaîne inclut "world" :

let text = "Hello world, welcome to the universe.";
text.includes("world");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world":</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>

</body>
</html>

Vérifiez si une chaîne inclut "world". Commencez à la position 12 :

let text = "Hello world, welcome to the universe.";
text.includes("world", 12);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world" starting from position 12:</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world", 12);
</script>

</body>
</html>

Remarques

includes() est sensible à la casse.

includes() est une fonctionnalité ES6.

includes() n'est pas pris en charge dans Internet Explorer.


La chaîne JavaScript commence par()

La méthode startsWith() renvoie true si une chaîne commence par une valeur spécifiée.

Sinon, il renvoie false :

Exemples

Renvoie vrai :

let text = "Hello world, welcome to the universe.";
text.startsWith("Hello");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p>Check if a string starts with "Hello":</p>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>

</body>
</html>

Renvoie faux :

let text = "Hello world, welcome to the universe.";
text.startsWith("world")

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world");
</script>

</body>
</html>

Une position de départ pour la recherche peut être spécifiée :

Renvoie faux :

let text = "Hello world, welcome to the universe.";
text.startsWith("world", 5)

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 5);
</script>

</body>
</html>

Renvoie vrai :

let text = "Hello world, welcome to the universe.";
text.startsWith("world", 6)

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 6);
</script>

</body>
</html>

Remarques

startsWith() est sensible à la casse.

startsWith() est une fonctionnalité ES6.

startsWith() n'est pas pris en charge dans Internet Explorer.


La chaîne JavaScript se termine par()

La méthode endsWith() renvoie true si une chaîne se termine par une valeur spécifiée.

Sinon, il renvoie false :

Exemples

Vérifiez si une chaîne se termine par "Doe" :

let text = "John Doe";
text.endsWith("Doe");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check if a string ends with "Doe":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>

</body>
</html>

Vérifiez si les 11 premiers caractères d'une chaîne se terminent par "world" :

let text = "Hello world, welcome to the universe.";
text.endsWith("world", 11);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check in the 11 first characters of a string ends with "world":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.endsWith("world", 11);
</script>

</body>
</html>

Remarques

endsWith() est sensible à la casse.

endsWith() est une fonctionnalité ES6.

endsWith() n'est pas pris en charge dans Internet Explorer.


Référence de chaîne complète

Pour une référence complète sur String, accédez à notre :

Référence complète des chaînes JavaScript.

La référence contient des descriptions et des exemples de toutes les propriétés et méthodes de chaîne.