Pridať vyhľadávacie kľúčové slovo Zvýraznenie na ľubovoľnú webovú stránku s označením Mark.js

Väčšina prehliadačov má Funkcie CTRL + F vyhľadávať a nájsť čokoľvek hľadá používateľ. Ale táto funkcia nie je podporovaná v mobilných zariadeniach a nepracuje dobre pomocou dynamického textu.

Našťastie je tu Mark.js, zadarmo plugin pre JavaScript, ktorý pridáva zvýraznite funkciu vyhľadávania na ľubovoľnú stránku s ľahkosťou.

Štandardne funguje ako vanilkový JS plugin ale môže tiež bežať na vrchole jQuery. Je to projekt s úplným otvoreným zdrojom, takže ho môžete používať na ľubovoľnej komerčnej alebo inej webovej stránke.

Funguje to podobne ako každá funkcia vyhľadávania prehliadača, s výnimkou, že prichádza s extrami. Môžete pridať vlastné vlastné filtre a vyhľadajte slová na základe regulárne výrazy, špecifické synonymá, a dokonca aj v dynamické prvky stránky ako sú rámce iframe.

Ak chcete začať, stačí stiahnuť súbor Mark.js od spoločnosti GitHub alebo hostite súbor cez CDN ušetriť čas.

Túto funkciu by ste mali spustiť pripojené k vstupnému poľu na stránke. Týmto spôsobom môžu používatelia zadávať hľadané výrazy a získajte okamžitú spätnú väzbu prostredníctvom zvýrazneného textu.

Tu je a útržok vzorky z demo stránky:

 $ ("kontext"), značka (kľúčové slovo [, možnosti]); 

.kontext triedy cieľov všade tam, kde by funkcia mala hľadanie výrazov. Môžete použiť predvolené HTML element ak sa pokúšate vyhľadávať celú stránku, alebo môžete prejsť viacerých prvkov ako napríklad rôzne miniaplikácie alebo rámce iframe.

Potom, vnútri mark () fungovať prejdite kľúčové slovo, spolu s možnosťami (ak chcete).

Ak necháte používateľov zadávať kľúčové slovo, potom môžete automatickú aktualizáciu funkcie s novým kľúčovým slovom po každom stlačení tlačidla. Na zacielenie tejto udalosti je dokonca aj špecifická funkcia.

Mark.js pracuje so všetkými hlavnými prehliadačmi, vrátane programov Chrome, Firefox, Opera (v12 +) a Internet Explorer (9+). Je to skutočne jednoduché nastavenie, ak budete sledovať dokumenty a používať najnovšie súbory.

Ale ak chcete vidieť Mark.js v akcii pozrite sa na nižšie pomocou veľmi základné jQuery demo na vyhľadávanie niekoľkých odsekov Lorem Ipsum.