Vyhledávání v textu stránky pomocí JavaScriptu

Ve stránkách, které obsahují mnoho textu, návštěvník mnohdy a snadno ztrácí orientaci. Poté bývá nucen k vyvolání dialogu hledání v prohlížeči. To se může někomu zdát zdlouhavé. Proto dnes vytvoříme skript, který vyhledává text (skupinu znaků) zadaný v prvku input. Popisuji zde také vestavěný objekt textRange a několik jeho metod.

Pomocí následujícího formuláře, obsahujícího prvek input, můžete najít jakýkoli text na této stránce.

Pokud se hledaný řetězec na stránce nacházel, označil se.

Celou práci obstarává jediná funkce nazvaná findInPage(str). V parametru dostává hledaný text (vlastnost value prvku input). Její hlavičku vidíte v příkladu, zároveň deklarujeme také několik globálních proměnných.

• NS4 – logická proměnná, pokud je browser Netscape, je pravda, jinak nepravda
• IE4 – to samé, ale pro MS-Internet Explorer
• n – pomocná proměnná na určení zda byl řetězec nalezen
• txt – budoucí objekt textRange
• found – logická proměnná také určující zda byl řetězec nalezen

Proběhnutí celého těla funkce je ošetřeno podmínkou zda prvek input obsahuje nějaký text. Dále je také podmínka rozlišující jednotlivé prohlížeče.

Podívejme se na část pro Netscape. Používá metodu objektu window – find(str, case-sensitive, backward). Má tři parametry (druhé dva jsou nepovinné). Tím povinným parametrem je hledaný řetězec; pokud je zadán pouze ten, funkce nerozlišuje velikost písmen a hledá směrem dolů po stránce. Druhé dva parametry (hodnoty true nebo false) určují rozlišení velikosti písmen a směr hledání. Pokud je zadán jeden musí být zadán i druhý. Také je zde použita známá funkce alert(), která otevírá výstražné dialogové okno s textem předaným v parametru.

Příkaz v první podmínce prohledá stránku směrem dolů. Pokud metoda find hledaný text nalezne označí jej a vrátí true. Podmínka tedy skočí na část else a inkrementuje proměnnou n. Pokud ne, vrátí false čímž se splní podmínka pro běh cyklu while. Ten opět spustí metodu find(), ale s parametrem backward true – prohledá tedy stránku ještě směrem nahoru. Pokud řetězec najde, vrátí se true, inkrementuje se n a text se označí. Pak funkce přejde na následující podmínku, která testuje hodnotu n. Pokud n zůstalo nulové (text nebyl nalezen), otevře se dialogové okno, které oznámí nenalezení řetězce.

Část pro Internet Explorer je možná složitější, ale zajímavější. Je zde použit objekt TextRange, který reprezentuje text ve stránce. Je obsažen pouze v IE 4.0 a výše.

Prvním příkazem se vytvoří objekt txt typu TextRange pomocí metody createTextRange. Je použita na document.body, txt bude tedy reprezentovat všechen text ve stránce. Dále jsou zde použity následující metody objektu TextRange …

• findText(str) … metoda funguje stejně jako find() v Netscape, když str najde, přemístí koncový a začáteční bod objektu TextRange okolo nalezeného řetězce, jinak vrací false
• moveStart(„character“, 1) … metoda posune počáteční bod TextRange o 1 znak dopředu
• moveEnd(„textedit“) … metoda posune koncový bod TextRange na znak následující za nalezeným slovem
• select() … označí všechen text označen v aktuálním objektu TextRange
• scrollIntoView() … posune stránku na začátek označeného textu

Druhým příkazem je cyklus for, který proběhne za podmínky, že metoda findText() (v testovací podmínce cyklu) nalezne specifikovaný text a zároveň pomocná proměnná n je menší než proměnná i cyklu for. Pokud ano, nastaví se proměnná found na true a cyklus proběhne – posune počáteční bod TextRange o znak dopředu (kvůli vyhledání dalšího řetězce; nikdo neříká, že je na stránce pouze jednou, že ano :-)). Dále přejde na další příkaz (podmínka cyklu for už nebude po inkrementaci i splněna). Následující podmínka shledá že je found true, posune počátek TextRange o znak zpět, najde v něm řetězec, označí ho a scrolluje stránkou k výsledku. Nakonec ještě inkrementuje n, kvůli dalšímu volání funkce – cyklus for teď proběhne 2x (atd.), protože n bude rovno i až po druhé inkrementaci. Díky tomu se krajní bod TextRange posune o 2 znaky vpřed – volání metody findText() tedy podruhé nebude hledat v již prohledaném textu. Pokud findText() řetězec nenajde, cyklus neproběhne a found bude false. Podmínka if (found) skočí na část else. Zde je další podmínka, která zjistí velikost n. Pokud je větší než nula (pouze v případě že už byla funkce findInPage() s úspěchem volána), nastaví ho zpět na nulu a zavolá hledání znovu. Jinak se otevře dialog, který oznámí, že text nebyl nalezen.

Celý skript bude vypadat takto …

Nyní stačí umístit do stránky formulář s prvkem input a potvrzovacím tlačítkem. Formulář musí mít definované události onSubmit (zavolá se findInPage()) a onChange (n se nastaví na 0).

Funkce musí být volána s klíčovým slovem return, jinak by odeslání formuláře znovu načetlo stránku, čímž by se nalezený text odznačil. Nulování proměnné n při každé změně textu v input je nutné kvůli splnění testovacích podmínek naší funkce při hledání jiného řetězce.

Nashledanou příště.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.