Concept et Utilisation de la Recherche de Chaîne en JavaScript

(ou : « Comment retrouver une aiguille dans une botte de foin… en JavaScript »)

La recherche de chaînes en JavaScript est un sujet que beaucoup de développeurs abordent avec cette idée en tête :

« Je connais déjà ça… includes(), quoi. »

Mais dans la vraie vie, les choses sont un peu différentes.

• Les données venant des utilisateurs sont désordonnées
• Les textes sont longs
• La casse (majuscule/minuscule) est un vrai casse-tête
• Le même mot apparaît à plusieurs endroits
• Les questions du type
  « Ce mot est-il au début, à la fin ou au milieu ? »
  ne s’arrêtent jamais

C’est pour ça que la recherche de chaînes est une petite étape, mais cruciale, sur le chemin qui mène de junior à senior 😎

Cet article est :

• Long ✔️
• Riche en exemples ✔️
• Explicatif ligne par ligne ✔️
• Proche de situations réelles ✔️

Après l’avoir lu, tu te diras :

« Ok, maintenant les strings ne peuvent plus m’échapper. »

1️⃣ Qu’est-ce que la recherche de chaînes ? (À quoi ça sert vraiment ?)

La recherche de chaînes consiste à :

• trouver un mot,
• un caractère,
• une partie de phrase,
• ou un motif (pattern)

à l’intérieur d’un texte,
ou à vérifier sa présence ou connaître sa position.

JavaScript nous fournit déjà des super-pouvoirs intégrés pour ça.
Donc pas besoin de réinventer la roue 🛞

Les méthodes les plus utilisées :

• includes() → Est-ce que ça existe ?
• indexOf() → Où est-ce que c’est ?
• startsWith() → Ça commence par ça ?
• endsWith() → Ça se termine par ça ?
• search() → Recherche avec regex
• match() → Donne-moi toutes les occurrences

Chacune a son rôle.
Ensemble, elles forment une vraie équipe 🎬

2️⃣ includes() – « Ce mot est-il ici ? »

Que fait-elle ?

Elle vérifie simplement si une expression est présente ou non dans une chaîne.

👉 Le résultat est un booléen : true ou false

Exemple simple

const text = "JavaScript is awesome";

text.includes("JavaScript");

📣 Résultat :

true

Pourquoi ?

Parce que le mot "JavaScript" est bien présent dans la chaîne.

Et s’il n’y est pas ?

text.includes("Python");

📣 Résultat :

false

Comparaison avec la vie quotidienne 🧠

includes() =
« Y a-t-il du lait dans le frigo ? » 🥛
Pas de détails, pas de position.
Juste oui ou non.

⚠️ Le piège des majuscules / minuscules

"JavaScript".includes("javascript"); // false

Parce que JavaScript dit :

« Moi, je fais très attention aux lettres » 😄

✅ Utilisation sécurisée :

"JavaScript".toLowerCase().includes("javascript");

3️⃣ indexOf() – « C’est exactement où ? »

Que fait-elle ?

Elle retourne la position (index) à laquelle l’expression commence.

const text = "Learn JavaScript today";

text.indexOf("JavaScript");

📣 Résultat :

6

Pourquoi 6 ?

L e a r n   J
0 1 2 3 4 5 6

JavaScript commence à compter à partir de zéro.
Oui, il aime un peu trop les maths 🧮

Et si le mot n’existe pas ?

text.indexOf("Python");

📣 Résultat :

-1

🧠 Règle d’or :
-1 = « J’ai cherché, mais je n’ai rien trouvé »

⚠️ Erreur très fréquente

if (text.indexOf("JS")) {
  console.log("Trouvé");
}

❌ ERREUR
Car 0 est évalué comme false.

✅ Bonne pratique :

if (text.indexOf("JS") !== -1) {
  console.log("Trouvé 🎉");
}

4️⃣ startsWith() – « Ça commence par ça ? »

Que fait-elle ?

Elle vérifie si la chaîne commence par une expression donnée.

const url = "https://example.com";

url.startsWith("https");

📣 Résultat :

true

Cas d’utilisation

• Vérification d’URL
• Noms de fichiers
• Formats de noms d’utilisateur

Mini scénario 😄

const username = "admin_42";

username.startsWith("admin");

👉 Probablement un admin… ou quelqu’un qui y croit 😅

5️⃣ endsWith() – « Ça se termine comme ça ? »

Que fait-elle ?

Elle vérifie si la chaîne se termine par une expression donnée.

const fileName = "photo.jpg";

fileName.endsWith(".jpg");

📣 Résultat :

true

Cas d’utilisation

• Vérification d’extensions de fichiers
• Validation d’email
• Fin d’URL

const email = "test@gmail.com";

email.endsWith("@gmail.com");

6️⃣ search() – « Le terrain des fans de regex »

Que fait-elle ?

• Retourne l’index de la correspondance
• Est surtout utilisée avec des expressions régulières

const text = "I love JavaScript";

text.search("JavaScript");

📣 Résultat :

7

Encore plus puissante avec regex 💪

text.search(/javascript/i);

🧠 /i → insensible à la casse

7️⃣ match() – « Donne-moi toutes les occurrences »

Que fait-elle ?

Elle retourne toutes les correspondances avec un motif donné.

const text = "JS is fun. JS is powerful. JS everywhere.";

text.match(/JS/g);

📣 Résultat :

["JS", "JS", "JS"]

Que s’est-il passé ?

• /g → recherche globale
• Pas une seule, mais toutes les occurrences

🎯 Cas d’utilisation :

• Analyse de texte
• Fichiers de logs
• Traitement de grandes données

8️⃣ Cas réel 🎯

Filtre de recherche simple

function searchProduct(products, keyword) {
  return products.filter(product =>
    product.toLowerCase().includes(keyword.toLowerCase())
  );
}

🧠 Ce qu’on a fait :

• Normalisation de la casse
• Filtrage avec includes()
• Expérience utilisateur améliorée

9️⃣ Mini Cheat Sheet 🧾

🎬 Grande métaphore pour conclure

Une string → une ville bondée 🏙️
Les méthodes de recherche → une application de navigation 📍

• includes() → « Cette rue existe ? »
• indexOf() → « Elle est où exactement ? »
• startsWith() → « À l’entrée ? »
• endsWith() → « À la sortie ? »
• match() → « Montre-les-moi toutes ! »

🏁 Mot de la fin

Bien maîtriser la recherche de chaînes en JavaScript, c’est :

• Un code plus propre
• Moins de bugs
• Des applications plus intelligentes

Si ton code fonctionne, c’est bien.
Mais si tu trouves exactement ce que tu cherches…
alors là, tu maîtrises vraiment le sujet 😎🚀