Pure Client page keyword search highlight jquery plugin

First, the effect of fresh display

This plugin is I wrote this afternoon, in order to see what is an intuitive, first show the effect, you can ruthlessly click here: Search page text jquery plugin Demo

Two Tests for the demo page – the test page HTML code is taken from the Douban help page:

Download
You can really click here: jquery.textsearch-1.0.js
Small file, simple function, do not pack ~ ~

Second, Function brief

It should also be seen, that is, the text content on the HTML page is highlighted, this can be used in content search. A purely client-side program that has nothing to do with the background.

Third, how to use

The use method is textSearch , specifically: $ (selector). Textsearch (String, optional parameter). For example

$ ("Body"). Textsearch ("World Cup");

The implication is that the query and red highlight all the "World Cup" keywords under the body tag, which is the "World Cup" text highlighted under the page. Another example:

$ (". Test"). Textsearch ("stewardess Sister Feng Furong sister", {markcolor: "Blue"});

It means "stewardess", "Sister Feng" and "Sister Furong" with blue highlighting in the class with all the tags in the test style.
In this method, one parameter is required, which is the keyword string you are searching for (by default, spaces can be used to represent multiple keywords), and an optional parameter to customize some styles, keyword processing methods, callback functions, and so on, see the next section of this article.

Iv. some optional parameters

See the table below:

Parameters	Default Value	Description
Divflag	True	Boolean, True for multi-keyword processing of strings, false for non-processing, whole string as 1 keywords
Divstr	" "	A string that represents the character that splits multiple keywords, the default is a space, and if Divflag is false, this parameter is invalidated
Markclass	""	Code highlighting class class, default is no style, if you set the style, will override the defaults red highlight color value
Markcolor	"Red"	A string that refers to the color value of the highlighted text, which is red by default. Markclass is not empty, this parameter is invalidated.
Nullreport	True	A Boolean that indicates whether the message pops up when the search result is empty. Default Popup.
Callback	return false;	callback function, no effect by default. Executes when there is a search result.

Some other notes :
1. The jquery object of the highlighted text can be obtained by $ ("span[rel= ' Mark ')").
2. Support multi-keyword search in Chinese, English and various character search.

V. The language of the knot

Look up, the article is short and duly completed. JS file is small, with less than 100 lines of comments, the difficulty lies in a slightly complex regular expression and some corresponding string processing! Finally, I am still a long-term small spinach, limited qualifications, there are inevitable problems. Welcome to point out, not very grateful. Or you have a better search implementation plan, but also very welcome to put forward, exchange.

Reprinted from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]