{"id":3478,"date":"2017-04-23T07:21:01","date_gmt":"2017-04-23T07:21:01","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=3478"},"modified":"2023-10-02T09:26:44","modified_gmt":"2023-10-02T09:26:44","slug":"3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/","title":{"rendered":"3 Demos of jQuery\/JavaScript keyword highlighting plug-in: mark.js"},"content":{"rendered":"

Highlighting the keywords in web pages<\/strong><\/h3>\n

The mark.js is a pure JavaScript and jQuery solution for highlighting the keywords entered in the search field. If you have long text paragraphs in your web pages and need to facilitate the users highlighting the specified text then mark.js is a solution for you.<\/p>\n

Not only text paragraphs, it may highlight the table data or text in other elements of the web page as well.<\/p>\n

Demo1 Demo2\u00a0Demo3<\/h6>\n
Developer\u2019s page<\/a> Download plug-in<\/a><\/strong><\/h6>\n

How to install the mark.js plug-in?<\/strong><\/h3>\n

You may install the mark.js plug-in via Bower or npm as follows:<\/p>\n

Via Bower:<\/strong><\/p>\n

$ bower install mark.js –save-dev<\/p><\/blockquote>\n

Via npm:<\/strong><\/p>\n

$ npm install julmot\/mark.js –save-dev<\/p><\/blockquote>\n

Alternatively, download the plug-in from above GitHub link and refer the jQuery or JavaScript solution in the web page:<\/p>\n

The jQuery plug-in:<\/strong><\/p>\n

\u00a0\u00a0\u00a0 <script src=”js\/jquery-mark\/jquery.mark.min.js”><\/script><\/p><\/blockquote>\n

For pure JavaScript:<\/strong><\/p>\n

\u00a0\u00a0\u00a0 <script src=”js\/jquery-mark\/ mark.min.js”><\/script><\/p><\/blockquote>\n

You may style the highlighted text properties by overriding the default style, for example:<\/p>\n

mark {\r\n\r\n\u00a0 padding: 0;\r\n\r\n\u00a0 background: #003F7D;\r\n\r\n\u00a0 color: #fff;\u00a0\r\n\r\n}<\/pre>\n
 <\/p>\n
See the examples with output and code below using the mark.js plug-in in a paragraph and table data with different options.<\/p>\n
Highlighting keywords by jQuery demo<\/strong><\/h3>\n
In this example, the jQuery solution is used for demonstrating the keyword highlighting plug-in. Open the demo and enter some text and check how the text in a paragraph highlights with custom background and color:<\/p>\n
\"jQuery<\/p>\n
See online demo and code<\/strong><\/h6>\n
You can see three checkboxes specify the search options.<\/p>\n
A demo of highlighting table data<\/strong><\/h3>\n
In this example, a table with three columns is created based on the Bootstrap framework. The first and third columns (Products and Quality) are associated with two text boxes on top. Enter the product name that exists in the products column or Quality that also exists in its column to see how it highlights the text:<\/p>\n
\"jQuery<\/p>\n
See online demo and code<\/strong><\/h6>\n
The markup for this example:<\/strong><\/p>\n
<h2>A demo of table highlighting<\/h2>\r\n\r\n\r\n\r\n<div class=\"panel panel-default\">\r\n\r\n\u00a0 <div class=\"panel-heading\">Search<\/div>\r\n\r\n\u00a0 <div class=\"panel-body\">\r\n\r\n\u00a0\u00a0\u00a0 <div class=\"search row\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"col-xs-6\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <span>Enter Product Name:<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" name=\"item\" class=\"form-control input-sm\" placeholder=\"Wheat..\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"col-xs-6\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <span>Enter Quality:<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" name=\"seller\" class=\"form-control input-sm\" placeholder=\"Fine...\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0 <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"panel panel-default\">\r\n\r\n\u00a0 <div class=\"panel-body context\">\r\n\r\n\u00a0\u00a0\u00a0 <table class=\"table table-striped\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <thead>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th>Products<\/th>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th>Quantity<\/th>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th>Quality<\/th>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/thead>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <tbody>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>Wheat<\/td>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>300 Bags<\/td>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>Excellent<\/td>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>Rice<\/td>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>1400 Bags<\/td>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>Fine<\/td>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>Sugar<\/td>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>1100 Bags<\/td>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>Prime<\/td>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tbody>\r\n\r\n\u00a0\u00a0\u00a0 <\/table>\r\n\r\n\r\n\r\n\u00a0 <\/div>\r\n\r\n<\/div><\/pre>\n
 <\/p>\n
See the script and complete code on the demo page.<\/p>\n
A demo of highlighting and jump to option<\/strong><\/h3>\n
This feature is desired if there are many matches found for a search term. In that case, a user may like Jump to<\/strong><\/em> option for the matches.<\/p>\n
Open the demo page and enter a search term like \u201cLorem\u201d and see how text is highlighted. Now press the down or up arrow for jumping directly to that match:<\/p>\n
See online demo and code<\/strong><\/h6>\n
There are many other options and demos like creating the animated highlighting, filtering of the list with highlighting etc. Visit the developer\u2019s page to learn more about this.<\/p>\n","protected":false},"excerpt":{"rendered":"
Highlighting the keywords in web pages The mark.js is a pure JavaScript and jQuery solution for highlighting the keywords entered in the search field. If you have long text paragraphs in your web pages and need to facilitate the users highlighting the specified text then mark.js is a solution for you. Not only text paragraphs, … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3479,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[47],"yoast_head":"\n3 Demos of jQuery\/JavaScript keyword highlighting plug-in: mark.js<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3 Demos of jQuery\/JavaScript keyword highlighting plug-in: mark.js\" \/>\n<meta property=\"og:description\" content=\"Highlighting the keywords in web pages The mark.js is a pure JavaScript and jQuery solution for highlighting the keywords entered in the search field. If you have long text paragraphs in your web pages and need to facilitate the users highlighting the specified text then mark.js is a solution for you. Not only text paragraphs, ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-23T07:21:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-02T09:26:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/04\/153.0_1-jQuery-keyword-highlight.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/\",\"url\":\"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/\",\"name\":\"3 Demos of jQuery\/JavaScript keyword highlighting plug-in: mark.js\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2017-04-23T07:21:01+00:00\",\"dateModified\":\"2023-10-02T09:26:44+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3 Demos of jQuery\/JavaScript keyword highlighting plug-in: mark.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3 Demos of jQuery\/JavaScript keyword highlighting plug-in: mark.js","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/","og_locale":"en_US","og_type":"article","og_title":"3 Demos of jQuery\/JavaScript keyword highlighting plug-in: mark.js","og_description":"Highlighting the keywords in web pages The mark.js is a pure JavaScript and jQuery solution for highlighting the keywords entered in the search field. If you have long text paragraphs in your web pages and need to facilitate the users highlighting the specified text then mark.js is a solution for you. Not only text paragraphs, ... Read more","og_url":"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/","article_published_time":"2017-04-23T07:21:01+00:00","article_modified_time":"2023-10-02T09:26:44+00:00","og_image":[{"width":540,"height":350,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/04\/153.0_1-jQuery-keyword-highlight.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/","url":"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/","name":"3 Demos of jQuery\/JavaScript keyword highlighting plug-in: mark.js","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2017-04-23T07:21:01+00:00","dateModified":"2023-10-02T09:26:44+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/3-demos-of-jqueryjavascript-keyword-highlighting-plug-in-mark-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"3 Demos of jQuery\/JavaScript keyword highlighting plug-in: mark.js"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3478"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=3478"}],"version-history":[{"count":4,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3478\/revisions"}],"predecessor-version":[{"id":10718,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3478\/revisions\/10718"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/3479"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=3478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=3478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=3478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}