Add Search Keyword Highlighting to Any Webpage with Mark.js

Most browsers have a CTRL+F functionality to hunt and find whatever a user is looking for. But, this underline isn’t upheld on mobile devices and it doesn’t work good regulating energetic text.

Luckily, there’s Mark.js, a giveaway JavaScript plugin that adds a highlight hunt feature to any page with ease.

By default, it works as a vanilla JS plugin though can also run on tip of jQuery. It’s a totally open-source project, so you’re giveaway to use this on any website blurb or otherwise.

It works most like any browser hunt feature, solely it comes with additional goodies. You can supplement your possess tradition filters and hunt for difference formed on regular expressions, specific synonyms, and even in dynamic page elements such as iframes.

To get started, only download a Mark.js record from GitHub or horde a record through a CDN to save time.

You should run this duty connected to an submit field on a page. This approach users can enter hunt terms and get evident feedback around highlighted text.

Here’s a sample snippet from a demo page:

$(".context").mark(keyword [, options]);

The .context category targets wherever a duty should search for terms. You competence use a default HTML body element if you’re perplexing to hunt a whole page, or we could pass multiple elements such as opposite tabbed widgets or iframes.

Then, inside a mark() duty we pass a keyword, along with a options (if we wish).

If we let users form in a keyword afterwards we can auto-update a function with a new keyword after each keypress. There’s even a specific function to aim this event.

Mark.js works with all vital browsers, including Chrome, Firefox, Opera (v12+), and Internet Explorer (9+). It’s genuine easy to set adult if we follow a docs and use a newest files.

But, if we wish to see Mark.js in action take a look during a fiddle below regulating a really simple jQuery demo to hunt a few paragraphs of Lorem Ipsum.

Add Comment