Úloha 6 – Metody pro hledání textu v řetězci

Úvod do úlohy

Vyhledávání textu nebo prvků v JavaScriptu je velmi častá operace — používá se při ověřování vstupů, filtrování dat, práci s formuláři, validaci e-mailů, nebo třeba při kontrole, jestli řetězec obsahuje určité slovo.
Pro tyto situace nám JavaScript nabízí tři užitečné metody: .indexOf(), .search() a .includes().

Na první pohled všechny tři dokážou „najít text“, ale každá se chová trochu jinak.

• .indexOf() a .search() vracejí číslo – pozici, kde se hledaný text poprvé vyskytuje.

• .includes() vrací true/false – jednoduše říká, zda text obsahuje hledaný výraz.

Tím pádem se .includes() často používá tam, kde nepotřebujeme znát přesnou pozici, ale jen ověřit, zda text existuje.

---

Teorie a principy

.indexOf()

• Hledá přesný text v řetězci nebo poli.

• Vrací index prvního výskytu nebo -1, pokud nebyl nalezen.

• Umí začít hledat od určité pozice (druhý parametr).

• Je citlivá na velikost písmen.

Syntaxe:

.search()

• Funguje podobně jako .indexOf(), ale navíc umí používat regulární výrazy.

• Vrací také index prvního výskytu nebo -1.

• Neumožňuje zadat počáteční pozici hledání.

Syntaxe:

.includes()

• Nejjednodušší metoda na ověření, zda text (nebo pole) něco obsahuje.

• Vrací pouze true (ano) nebo false (ne).

• Je čitelnější než .indexOf() tam, kde nepotřebujeme znát pozici.

• Je také citlivá na velikost písmen.

Syntaxe:

---

Praktické příklady kódu

1. .indexOf() – získání pozice slova

2. .search() – vyhledávání pomocí regulárního výrazu

3. .includes() – kontrola, jestli text obsahuje výraz

4. .includes() na poli

---

Porovnání metod

---

Typické chyby a záludnosti

1. Záměna návratových hodnot
   .indexOf() a .search() vrací číslo, zatímco .includes() vrací true/false.
   Pokud omylem porovnáte .indexOf() s true, kód nebude fungovat.

2. Citlivost na velikost písmen
   Všechny tři metody rozlišují velká a malá písmena.
   Chcete-li hledat bez ohledu na velikost, převeďte text na malá:

3. Zapomenutí na kontrolu -1 u .indexOf() nebo .search()
   Pokud se výraz nenajde, obě metody vracejí -1, což je třeba ošetřit podmínkou.

4. Použití regulárního výrazu u .includes()
.includes() podporuje pouze běžný text, ne regulární výrazy – k tomu slouží .search().

---

Shrnutí

• .indexOf() – zjistí kde se výraz nachází (index).

• .search() – najde výraz podle vzoru (RegExp).

• .includes() – rychle zjistí, zda text výraz obsahuje (true/false).

• Všechny tři metody jsou citlivé na velikost písmen.

• .includes() je ideální pro jednoduché podmínky, .search() pro pokročilé vyhledávání a .indexOf() pro práci s pozicemi textu nebo prvků v poli.

Úloha

Zadání (kontext úlohy):

Představ si, že vytváříš skript, který má zjistit, zda text obsahuje určité slovo – a chceš porovnat, zda .indexOf() a .search() vrací stejný výsledek. Cílem je pochopit, že obě metody dělají podobnou věc, ale fungují trochu jinak.

---

Cíl úlohy:

Procvičíš si metody .indexOf() a .search(), jejich výsledky a rozdíly v použití.

---

Vstupní podmínky:

Student pracuje pouze s nově vytvořeným souborem script.js.
V proměnné text bude uložen libovolný řetězec.
V proměnné hledaneSlovo bude text, který má program hledat.

---

Požadovaný výstup:

• Pomocí .indexOf() zjisti pozici hledaného slova a ulož ji do proměnné poziceIndexOf.

• Pomocí .search() zjisti pozici stejného slova a ulož ji do proměnné poziceSearch.

• Výsledky vypiš do konzole ve tvaru:

  • indexOf našlo slovo na pozici: X

  • search našlo slovo na pozici: Y

• Pokud některá metoda vrátí -1, vypiš místo čísla text Slovo nebylo nalezeno.

---

Doplňující pokyny:

• Obě metody rozlišují velká a malá písmena.

• Nepoužívej regulární výrazy – zatím hledej pouze prostý text.

Řešení úlohy

Co je zde splněno

• Použity obě metody .indexOf() a .search() pro vyhledání slova.

• Výsledky jsou uloženy do proměnných poziceIndexOf a poziceSearch.

• Výstup je vypsán do konzole v předepsaném formátu.

• Pokud metoda vrátí -1, vypíše se text „Slovo nebylo nalezeno“.

• Dodrženo rozlišování velkých a malých písmen (např. "Slunce" ≠ "slunce").

🔍 Poznámky

• .indexOf() i .search() vrací první nalezený index výskytu daného textu.

• Hlavní rozdíl je, že .search() dokáže přijímat i regulární výrazy, zatímco .indexOf() nikoli – ale v této úloze se používají pouze obyčejné texty.

• Pokud bys chtěl vyhledávat bez ohledu na velikost písmen, můžeš přidat .toLowerCase() k oběma řetězcům.