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) == "<") ? a : "<strong class=\""+ configs.hls_class +"\">" + c + "</strong>";

  }));

  },

  unicode: function(s){

  var len=s.length;

  var rs="";

  s = s.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1");

  for(var i=0;i<len;i++){

  if(s.charCodeAt(i) > 255)

  rs+="\\u"+ s.charCodeAt(i).toString(16);

  else rs +=  s.charAt(i);

  }

  return rs;

  }

  });

  2.highlight插件点击此处下载

  希望本文所述对大家的jQuery程序设计有所帮助。