純客戶端頁面關鍵字搜索高亮jQuery插件

by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=888

1、效果搶鮮展現

此插件是我今天下午寫的，爲了直觀地看到是個什麼東東，先展現效果，您能夠狠狠地點擊這裏：搜索頁面文字jQuery插件Demo

下圖爲Demo頁面的兩個測試截圖 – 測試頁面HTML代碼取自豆瓣網幫助頁面：

下載
您能夠狠狠地點擊這裏：jquery.textSearch-1.0.js
文件較小，功能簡單，恕不打包~~

2、功能簡述

從上圖也應該看出來了，就是對HTML頁面上的文字內容進行高亮標記，這個能夠用在內容搜索上。純粹的客戶端程序，與後臺一點瓜葛都沒有。

3、如何使用

使用方法是textSearch，具體爲：$(選擇器). textSearch(String,可選參數)。例如，

$("body").textSearch("世界盃");

表示的含義就是查詢並紅色高亮標註body標籤下的全部的「世界盃」這個關鍵字，也就是頁面下高亮標註全部的「世界盃」文字。又如：

$(".test").textSearch("空姐 鳳姐 芙蓉姐",{markColor: "blue"});

則表示class中有test樣式的全部標籤下的「空姐」，「鳳姐」，「芙蓉姐」文字用藍色高亮標註。
此方法中，有一個參數是必須的，就是你要搜索的關鍵字字符串（默認情況下，使用空格隔開可表示多個關鍵字），還有一個可選參數，可自定義一些樣式，關鍵字處理方法，回調函數等，具體參見本文下一部分。

4、一些可選參數

參見下表：

參數	默認值	說明
divFlag	true	布爾型，true表示對字符串進行多關鍵字處理，false表示不處理，整個字符串當作1個關鍵字
divStr	" "	字符串，表示分割多個關鍵字的字符，默認爲空格，若是divFlag爲false，此參數將失效
markClass	""	代碼高亮的class類，默認爲沒有樣式，若是設置樣式，將覆蓋默認的紅色高亮顏色值
markColor	"red"	字符串，指高亮文字的顏色值，默認紅色。markClass不爲空，則此參數失效。
nullReport	true	布爾型，表示當搜索結果爲空時，是否彈出提示信息。默認彈出。
callback	return false;	回調函數，默認無效果。當存在搜索結果時執行。

其餘一些說明：
1. 高亮的文字的jQuery對象能夠經過$(「span[rel='mark']「)獲取。
2. 支持中英文和各種字符搜索，支持多關鍵字搜索。

5、結勒個語

擡頭一看，文章短短的，妥妥的。js文件很小，加上註釋不足100行，難點在於稍稍複雜的正則表達式和一些相應的字符串處理！最後，本人仍是顆成長期的小菠菜，資歷有限，出現問題不免。歡迎指出，不甚感謝。或者您有更好的搜索實現方案，也很是歡迎提出，交流。

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址： http://www.zhangxinxu.com/wordpress/?p=888