Pure Client page keyword search highlight jquery plugin

Source: Internet
Author: User

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]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.