Javascriptové vyhledávání podle značky. Organizace vyhledávání na webové stránce v JavaScriptu (bez jQuery)
Před pár dny jsem od společnosti obdržel testovací úlohu na volné pracovní místo Front-end dev. Úkol se samozřejmě skládal z několika bodů. Nyní si ale povíme jen o jednom z nich – organizaci vyhledávání stránek. Tito. banální vyhledávání pomocí textu zadaného do pole (obdoba Ctrl+F v prohlížeči). Zvláštností úkolu bylo, že je zakázáno použití jakýchkoliv JS frameworků nebo knihoven. Vše je napsáno v nativním JavaScriptu.
Hledání hotového řešení První myšlenka: přesně tohle už někdo napsal, musíte to vygooglit a zkopírovat a vložit. Tak jsem to udělal. Během hodiny jsem našel dva dobré scénáře, které v podstatě fungovaly stejně, ale byly napsány jinak. Vybral jsem si ten, jehož kódu jsem lépe rozuměl a vložil ho na svou domovskou stránku.Pokud má někdo zájem, vzal jsem kód.
Scénář fungoval okamžitě. Myslel jsem, že problém je vyřešen, ale jak se ukázalo, bez urážky autora scénáře, byla v něm obrovská chyba. Skript prohledal celý obsah tagu... a jak už asi tušíte, při hledání jakékoli kombinace znaků, které se tagu nebo jeho atributům podobaly, se celá HTML stránka rozbila.
Proč skript nefungoval správně? Je to jednoduché. Skript funguje následovně. Nejprve zapíšeme celý obsah značky body do proměnné, poté hledáme shody s regulárním výrazem (nastaveným uživatelem při zadávání do textového pole) a poté všechny shody nahradíme následujícím kódem:...shoda nalezena...
A pak nahradíme aktuální značku těla novým přijatým. Označení se aktualizuje, styly se změní a všechny nalezené výsledky se na obrazovce zvýrazní žlutě.
Pravděpodobně jste již pochopili, v čem je problém, ale přesto to vysvětlím podrobněji. Představte si, že jste do vyhledávacího pole zadali slovo „div“. Jak si dokážete představit, uvnitř těla je mnoho dalších značek, včetně div. A pokud použijeme výše uvedené styly na všechny „divy“, pak už to nebude blok, ale něco nepochopitelného, protože design se rozbije. Výsledkem je, že po přepsání označení skončíme se zcela nefunkční webovou stránkou. Vypadá to takhle.
Jak vidíte, stránka je úplně rozbitá. Stručně řečeno, scénář se ukázal jako nefunkční a rozhodl jsem se napsat svůj vlastní od nuly, čemuž je věnován tento článek.
Takže píšeme scénář úplně od začátku.
Nyní nás zajímá vyhledávací formulář. Zakroužkoval jsem to červenou čárou.
Pojďme na to trochu přijít. Implementoval jsem to následovně (zatím čisté HTML). Formulář se třemi značkami.
První je pro zadávání textu;
Druhá je pro zrušení vyhledávání (zrušení výběru);
Třetí je pro vyhledávání (zvýraznění nalezených výsledků).
Máme tedy vstupní pole a 2 tlačítka. JavaScript napíšu do souboru js.js. Předpokládejme, že jste jej již vytvořili a připojili.
První věc, kterou uděláme, je zapsat volání funkcí po kliknutí na tlačítko Hledat a na tlačítko Zrušit. Bude to vypadat takto:
Dovolte mi trochu vysvětlit, co zde je a proč je to potřeba.
Pro textové pole uvedeme id="text-to-find" ( pomocí tohoto id přistoupíme k prvku z js).
Tlačítku Storno dáváme následující atributy: type="button" onclick="javascript: FindOnPage("text-to-find",false); vrátit false;"
- Typ: tlačítko
- Po kliknutí se zavolá funkce FindOnPage("text-to-find",false). a předá id textového pole, false
Tlačítku vyhledávání dáváme následující atributy: type="button" onclick="javascript: FindOnPage("text-to-find",true); vrátit false;"
- Typ: odeslat (ne tlačítko, protože zde můžete použít Enter po zadání pole, ale můžete také použít tlačítko)
- Po kliknutí se zavolá funkce FindOnPage("text-to-find",true). a předá id textového pole, true
Pravděpodobně jste si všimli ještě jednoho atributu: pravda/nepravda. Pomocí něj určíme, na které tlačítko bylo kliknuto (zrušit vyhledávání nebo spustit vyhledávání). Pokud klikneme na Storno, předáme false . Pokud klikneme na hledat, předáme true .
Než začneme psát kód, udělejme krok zpět a nejprve si proberme, jak by věci měly fungovat. Tito. V podstatě sepíšeme akční plán. Potřebujeme tedy, aby se stránka prohledávala při zadávání textu do pole, ale tagů a atributů nelze sáhnout. Tito. pouze textové objekty. Jak toho dosáhnout – jsem si jistý, že existuje mnoho způsobů. Nyní ale použijeme regulární výrazy.
Takže následující regulární výraz bude hledat pouze následující text. jako: ">… text...(.*?)(.*?)(.*?)
