jquery實作頁面關鍵字高亮顯示的方法_jquery

本文實例講述了jquery實作頁面關鍵字高亮顯示的方法。分享給大家供大家參考。具體分析如下：

透過jquery對頁面搜尋關鍵字進行高亮顯示
支援中文多詞頁面中高亮顯示

1. JavaScript程式碼如下：

複製程式碼 程式碼如下:

jQuery.fn.extend({
    highlight: function(search, configs){
        if(typeof(search) == 'undefined') return;
        var configs =  jQuery.extend({
            insensitive: 1, //是否符合大小寫  0符合 1不符
            hls_class: 'highlight', // 亮後的class
            clear_last: true, // 清除原高亮的結果
        },configs);  
        if(configs.clear_last) {
            $(this).find("strong." configs.hls_class).each(function(){
                $(this).after($(this).text());
                $(this).remove();
            })
        }
        return this.each(function() {
            if(typeof(search) == "string") {
                $(this).highregx(search,configs);
            } else if (search.constructor === Array ) {
                for(var query in search){
                    var search_str = $.trim(search[query]);
                    if(search_str != "") $(this).highregx(search_str,configs);
                }
            }
        });              
    },             
    highregx: function(query,configs){
        query = this.unicode(query);
        var regex = new RegExp("(]*>)|(" query ")", configs.insensitive ? "ig" : "g");      
        this.html(this.html().replace(regex, function(a, b, c){
            return (a.charAt(0) == "" c "";
        }));
    },
    unicode: function(s){
         var len=s.length;
         var rs="";
         s = s.replace(/([-.* ?^${}()|[]/\])/g,"\$1");
         for(var i=0;i             if(s.charCodeAt(i) > 255)
                rs ="\u" s.charCodeAt(i).toString(16);
            else rs =  s.charAt(i);
         }  
         return rs;
    } 
});

2.highlight外掛點此下載。

希望本文所述對大家的jQuery程式設計有所幫助。