3 Demos of jQuery/JavaScript keyword highlighting plug-in: mark.js

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, it may highlight the table data or text in other elements of the web page as well.

Demo1 Demo2 Demo3
Developer’s page Download plug-in

How to install the mark.js plug-in?

You may install the mark.js plug-in via Bower or npm as follows:

Via Bower:

$ bower install mark.js –save-dev

Via npm:

$ npm install julmot/mark.js –save-dev

Alternatively, download the plug-in from above GitHub link and refer the jQuery or JavaScript solution in the web page:

The jQuery plug-in:

    <script src=”js/jquery-mark/jquery.mark.min.js”></script>

For pure JavaScript:

    <script src=”js/jquery-mark/ mark.min.js”></script>

You may style the highlighted text properties by overriding the default style, for example:

mark {

  padding: 0;

  background: #003F7D;

  color: #fff; 

}

 

See the examples with output and code below using the mark.js plug-in in a paragraph and table data with different options.

Highlighting keywords by jQuery demo

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:

jQuery keyword highlight

See online demo and code

You can see three checkboxes specify the search options.

A demo of highlighting table data

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:

jQuery keyword highlight table

See online demo and code

The markup for this example:

<h2>A demo of table highlighting</h2>



<div class="panel panel-default">

  <div class="panel-heading">Search</div>

  <div class="panel-body">

    <div class="search row">

      <div class="col-xs-6">

        <span>Enter Product Name:</span>

        <input type="text" name="item" class="form-control input-sm" placeholder="Wheat..">

      </div>

      <div class="col-xs-6">

        <span>Enter Quality:</span>

        <input type="text" name="seller" class="form-control input-sm" placeholder="Fine...">

      </div>

    </div>

  </div>

</div>





<div class="panel panel-default">

  <div class="panel-body context">

    <table class="table table-striped">

      <thead>

        <tr>

          <th>Products</th>

          <th>Quantity</th>

          <th>Quality</th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <td>Wheat</td>

          <td>300 Bags</td>

          <td>Excellent</td>

        </tr>

        <tr>

          <td>Rice</td>

          <td>1400 Bags</td>

          <td>Fine</td>

        </tr>

        <tr>

          <td>Sugar</td>

          <td>1100 Bags</td>

          <td>Prime</td>

        </tr>

      </tbody>

    </table>



  </div>

</div>

 

See the script and complete code on the demo page.

A demo of highlighting and jump to option

This feature is desired if there are many matches found for a search term. In that case, a user may like Jump to option for the matches.

Open the demo page and enter a search term like “Lorem” and see how text is highlighted. Now press the down or up arrow for jumping directly to that match:

See online demo and code

There are many other options and demos like creating the animated highlighting, filtering of the list with highlighting etc. Visit the developer’s page to learn more about this.