Smart Text Highlighting Plugin with jQuery - jQuiteLight

File Size: 14.3 KB
Views Total: 1134
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smart Text Highlighting Plugin with jQuery - jQuiteLight

jQuiteLight is a smart jQuery text highlighting plugin which allows you to highlight matched characters in the webpage using Regex or string arrays. Great for use in your search result page to highlight the search terms.

Basic usage:

1. Place the jQuery jQuiteLight plugin at the end of the document, but before the closing body tag. Make sure you first have jQuery library installed.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquitelight.js"></script>

2. Highlight text in the p using Regex. Any text matching the pattern will be highlighted.

$("p").mark(new RegExp("/test.{1,2}/"));

3. Highlight matched text using an array of strings.

$("p").mark(["ipsum", "quis"]);

4. The matched text will be wrapped into an inline container with css class 'marked-text' so that you can style the highlighted text whatever you like in the CSS.

.marked-text {
  background-color: yellow;
  font-weight: bold;
  padding: 0 5px;
  color: #000;
  border-radius: 5px;
  font-weight: 300
}

5. Plugin's default options.

$("p").mark("ipsum",{

  // an array of text to ingore
  skippedTags: ["script","style"],

  // Case sensitive?
  ignoreCase: true,

  // 
  escape: false,

  // Using RegExp extending function for string queries
  useSmartBehavior: false,

  // Function deciding match highlight. 
  beforeMark: function (text) { return true; },

  // Function for manipulating with highlight. 
  afterMark: function (element) {},

  // Name of an HTML tag for wrapping matches.
  markTag: "span",

  // Attributes to be applied for wrapper.
  markData: {
    "class": "marked-text"
  },

  // Css properties to be applied for wrapper.
  markCss: {}
  
});

Change log:

2015-10-29

  • v2.1.0: Query string is now escaped when used with useSmartBehavior property

This awesome jQuery plugin is developed by iamwebdesigner. For more Advanced Usages, please check the demo page or visit the official website.