{"id":37552,"date":"2017-07-28T18:01:42","date_gmt":"2017-07-28T10:01:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=37552"},"modified":"2017-11-24T19:11:04","modified_gmt":"2017-11-24T11:11:04","slug":"markjs-search-highlighting","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/markjs-search-highlighting\/","title":{"rendered":"Add Search Keyword Highlighting to Any Webpage with Mark.js"},"content":{"rendered":"

Most browsers have the CTRL<\/span>+F<\/span> functionality<\/strong> to search and find whatever the user is looking for. But, this feature isn\u2019t supported on mobile devices<\/strong> and it doesn\u2019t work well using dynamic text.<\/p>\n

Luckily, there\u2019s Mark.js<\/a><\/strong>, a free JavaScript plugin that adds a highlight search feature<\/strong> to any page with ease.<\/p>\n

By default, it works as a vanilla JS plugin<\/strong> but can also run on top of jQuery<\/strong>. It\u2019s a completely open-source project, so you\u2019re free to use this on any website commercial or otherwise.<\/p>\n

It works much like any browser search feature, except it comes with extra goodies. You can add your own custom filters<\/strong> and search for words based on regular expressions<\/strong>, specific synonyms<\/strong>, and even in dynamic page elements<\/strong> such as iframes.<\/p>\n

Read Also:<\/strong> How to Auto-Highlight Text Upon User Click<\/a><\/p>\n

To get started, just download the Mark.js file from GitHub<\/a><\/strong> or host the file through a CDN<\/a><\/strong> to save time.<\/p>\n

You should run this function connected to an input field<\/strong> on the page. This way users can enter search terms and get immediate feedback<\/strong> via highlighted text.<\/p>\n

Here\u2019s a sample snippet<\/strong> from the demo page:<\/p>\n

\r\n$(\".context\").mark(keyword [, options]);\r\n<\/pre>\n
The .context<\/code> class targets wherever the function should search for terms<\/strong>. You might use the default HTML <body><\/code> element<\/strong> if you\u2019re trying to search the entire page, or you could pass multiple elements<\/strong> such as different tabbed widgets or iframes.<\/p>\n
Then, inside the mark()<\/code> function you pass the keyword<\/strong>, along with the options (if you wish).<\/p>\n
If you let users type in a keyword then you can auto-update the function<\/strong> with a new keyword after every keypress. There\u2019s even a specific function<\/a> to target this event.<\/p>\n
Mark.js works with all major browsers<\/strong>, including Chrome, Firefox, Opera (v12+), and Internet Explorer (9+). It\u2019s real easy to set up if you follow the docs<\/a> and use the newest files.<\/p>\n
But, if you want to see Mark.js in action<\/strong> take a peek at the fiddle below<\/a><\/strong> using a very basic jQuery demo to search a few paragraphs of Lorem Ipsum.<\/p>\n