Dodaj wyszukiwanie słów kluczowych do dowolnej strony internetowej za pomocą Mark.js

Większość przeglądarek ma Funkcja CTRL + F wyszukać i znaleźć to, czego szuka użytkownik. Ale ta funkcja nie jest obsługiwany na urządzeniach mobilnych i nie działa dobrze z użyciem tekstu dynamicznego.

Na szczęście jest Mark.js, darmowa wtyczka JavaScript, która dodaje a podświetl funkcję wyszukiwania na dowolnej stronie z łatwością.

Domyślnie działa jako vanilla JS plugin ale może również działać na górze jQuery. To całkowicie open-source'owy projekt, więc możesz go używać na dowolnej stronie komercyjnej lub innej.

Działa podobnie jak każda funkcja wyszukiwania w przeglądarce, z wyjątkiem dodatkowych funkcji. Możesz dodać własne własne filtry i szukaj słów na podstawie wyrażenia regularne, specyficzne synonimy, a nawet w dynamiczne elementy strony takie jak iframes.

Aby rozpocząć, pobierz plik Mark.js z GitHub lub hostuj plik przez CDN oszczędzać czas.

Powinieneś uruchomić tę funkcję podłączony do pola wejściowego na stronie. W ten sposób użytkownicy mogą wprowadzać wyszukiwane hasła i uzyskać natychmiastową informację zwrotną przez podświetlony tekst.

Tutaj jest przykładowy urywek ze strony demonstracyjnej:

 $ (". context"). mark (słowo kluczowe [, opcje]); 

The .kontekst cele klasowe, gdziekolwiek powinna być funkcja szukaj terminów. Możesz użyć domyślny HTML element jeśli próbujesz przeszukać całą stronę, lub możesz przejść wiele elementów takie jak różne widgety z kartami lub ramki iframe.

Następnie w środku znak() funkcjonuj przekazać słowo kluczowe, wraz z opcjami (jeśli chcesz).

Jeśli pozwolisz użytkownikom wpisywać słowo kluczowe, możesz to zrobić automatyczna aktualizacja funkcji z nowym słowem kluczowym po każdym naciśnięciu klawisza. Istnieje nawet określona funkcja, która będzie kierować to zdarzenie.

Mark.js działa ze wszystkimi głównymi przeglądarkami, w tym Chrome, Firefox, Opera (v12 +) i Internet Explorer (9+). Konfiguracja jest prosta, jeśli śledzisz dokumenty i używasz najnowszych plików.

Ale jeśli chcesz to zobaczyć Mark.js w akcji rzuć okiem na bawić się poniżej używając bardzo prostego demo jQuery, aby przeszukać kilka akapitów Lorem Ipsum.