Lägg till sökord med markering till vilken webbsida som helst med Mark.js

De flesta webbläsare har CTRL + F-funktionalitet att söka och hitta vad som användaren letar efter. Men den här funktionen stöds inte på mobila enheter och det fungerar inte bra med dynamisk text.

Lyckligtvis finns det Mark.js, ett gratis JavaScript-plugin som lägger till en markera sökfunktionen till vilken sida som helst med lätthet.

Som standard fungerar det som en Vanilla JS-plugin men kan också springa ovanpå jQuery. Det är ett helt open source-projekt, så du är fri att använda detta på någon kommersiell eller annan webbplats.

Det fungerar som alla webbläsarsökfunktioner, förutom att det kommer med extra godisar. Du kan lägga till dina egna anpassade filter och söka efter ord baserat på vanliga uttryck, specifika synonymer, och även i dynamiska sidelement som iframes.

För att komma igång, bara ladda ner Mark.js-filen från GitHub eller värd filen genom en CDN för att spara tid.

Du bör köra den här funktionen ansluten till ett inmatningsfält på sidan. På så sätt kan användarna skriva in sökord och få omedelbar feedback via markerad text.

Här är en provbit från demoversidan:

 $ (".text"). markering (sökord [, alternativ]); 

De .sammanhang klassmål varhelst funktionen ska söka efter termer. Du kan använda standard HTML element om du försöker söka hela sidan, eller du kan gå vidare flera element till exempel olika tabbad widgets eller iframes.

Sedan inuti markera() funktion dig skicka sökordet, tillsammans med alternativen (om du önskar).

Om du låter användare skriva in ett sökord kan du uppdatera funktionen automatiskt med ett nytt sökord efter varje knapptryckning. Det finns till och med en specifik funktion för att rikta denna händelse.

Mark.js fungerar med alla större webbläsare, inklusive Chrome, Firefox, Opera (v12 +) och Internet Explorer (9+). Det är riktigt enkelt att konfigurera om du följer docs och använder de senaste filerna.

Men om du vill se Mark.js i aktion ta en titt på fitta nedanför Använda en mycket grundläggande jQuery-demo för att söka efter några stycken av Lorem Ipsum.