Voeg zoekwoordmarkering toe aan elke webpagina met Mark.js

De meeste browsers hebben de CTRL + F-functionaliteit om te zoeken en te vinden waar de gebruiker naar op zoek is. Maar deze functie wordt niet ondersteund op mobiele apparaten en het werkt niet goed met dynamische tekst.

Gelukkig is dat zo Mark.js, een gratis JavaScript-plug-in die een markeer zoekfunctie naar elke pagina met gemak.

Standaard werkt het als een vanille JS plugin maar kan ook rennen bovenop jQuery. Het is een volledig open-sourceproject, dus je bent vrij om dit op elke commerciële website of anderszins te gebruiken.

Het werkt net als elke browserzoekfunctie, maar het wordt geleverd met extra goodies. Je kan toevoegen uw eigen aangepaste filters en zoek naar woorden op basis van normale uitdrukkingen, specifieke synoniemen, en zelfs in dynamische pagina-elementen zoals iframes.

Download het bestand Mark.js om aan de slag te gaan van GitHub of host het bestand via een CDN tijd besparen.

U zou deze functie moeten uitvoeren verbonden met een invoerveld op de pagina. Op deze manier kunnen gebruikers zoektermen invoeren en krijg onmiddellijke feedback via gemarkeerde tekst.

Hier is een voorbeeldfragment van de demopagina:

 $ (". context"). mark (sleutelwoord [, opties]); 

De .context klassedoelen waar de functie ook zou moeten zijn zoek naar termen. U kunt de standaard HTML element als je de hele pagina probeert te doorzoeken, of je zou kunnen slagen meerdere elementen zoals verschillende widgets met tabbladen of iframes.

Vervolgens, binnen de Mark() functie jou geef het sleutelwoord door, samen met de opties (indien u dit wenst).

Als u gebruikers een trefwoord laat typen, kunt u dat auto-update de functie met een nieuw trefwoord na elke toetsaanslag. Er is zelfs een specifieke functie om dit evenement te targeten.

Mark.js werkt met alle belangrijke browsers, inclusief Chrome, Firefox, Opera (v12 +) en Internet Explorer (9+). Het is heel eenvoudig in te stellen als u de documenten volgt en de nieuwste bestanden gebruikt.

Maar als je het wilt zien Mark.js in actie neem een ​​kijkje op de viool hieronder een zeer eenvoudige jQuery-demo gebruiken om een ​​paar alinea's van Lorem Ipsum te doorzoeken.