jQuiteLight

jQuery Smart Search Query Highlight Plugin

Features

• Works with Regular Expressions.
• An array of search queries can be applied at once.
• Smart highlight logic is included.
• Additional logic can be applied using beforeMark property.
• Each highlight is held separately, so it is easy to remove highlight by index.

Installation

Installing using node package manager.
Type the following in your console inside your project directory:

npm install jquitelight

If you have bower installed in your pc, you can install the plugin using the command:

bower install jquitelight

Inline HTML including

<!-- Note: jQuery version should not be less than 1.6 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="path/to/plugin/jquitelight.js"></script>

Usage

// basic highlighting
$(".element-to-be-highlighted").mark("text to be highlighted here");

// With RegExp
$(".element-to-be-highlighted").mark(new RegExp("/test.{1,2}/"));

// An array of queries
$(".element-to-be-highlighted").mark(["test", "another-test"]);

// Using options
$(".element-to-be-highlighted").mark(["test", "another-test"], {
	markData: {
		"class": "my-highlight"
	},
	ignoreCase: false
});
// To remove highlight use:
// Get array of highlights
var HIGHLIGHTS = $(".element-to-be-highlighted").data("marker");
// Destroy
HIGHLIGHTS[0].destroy();

Resolving plugin conflicts

// if you have another plugin with such jQuery method
// you can get overridden method by using noConflict method
var prevMarkMethod = $.fn.mark.noConflict();
$.fn.mark.myCoolMark = prevMarkMethod;

Making changes into plugin

// starting from version v1.2.0 plugin core object is linked to jQuery method
var plugin = $.fn.mark.Marker,
	oldWrapStringMethod = plugin.prototype.wrapString;
plugin.prototype.wrapString = function (content) {
	console.log(content);
	return oldWrapStringMethod.call(this, content);
}

Advanced usage (tricks)

// starting version 2.0.0
// make some strings inside the text links with specific url
$(".some-content").mark([
	{
		query: "test",
		markData: {
			href: "http://www.example.com/test"
		}
	},
	{
		query: "another-test",
		markData: {
			href: "/under-domain-link"
        }
	},
	{
        query: "strict lower case text",
        ignoreCase: false,
        markData: {
            title: "advanced usage test",
            href: "/strict-lower-case"
        }
    }], {
	markData: {
		"class": "linked"
	},
	markTag: "a",
	ignoreCase: true
});

// excluding some sensitive words from matching when using together with smart behaviour
$(".text-container").mark("each word occurence from this sentence should be highlighted".split(" "), {
	useSmartBehavior: true,
	beforeMark: function (match) {
		// exclude words "bee" and "teach" 
		return match !== "bee" && match !== "teach";	
	}
});

Options

skippedTags
Type: array
Default: ["script", "style"]
Expected an array of strings with HTML tag names that should be skipped on highlighting (in lower case).

ignoreCase
Type: bool
Default: true
Expected a boolean value for ignoring query matching case.

useSmartBehavior
Type: bool
Default: false
Expected a boolean value for using RegExp extending function for string queries.

beforeMark
Type: Function
Default: function (text) { return true; }
Function deciding match highlight. Accepts a matched string. Should return a boolean value.

afterMark
Type: Function
Default: function (element) {}
Function for manipulating with highlight. Accepts a jQuery element (wrapper of current match).

markTag
Type: String
Default: "span"
Name of an HTML tag for wrapping matches.

markData
Type: Object
Default: { "class": "marked-text" }
Attributes to be applied for wrapper.