jq中的实现方法:
//搜索结果高亮显示
function encode(s) {
return s.replace(/&/g, "&").replace(//g, ">").replace(/([\\\.\*\[\]\(\)\$\^])/g, "\\$1");
}
function decode(s) {
return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g, "$1").replace(/>/g, ">").replace(/
}
function loopSearch(s, obj) {
var cnt = 0;
if (obj.nodeType == 3) {
cnt = replace(s, obj);
return cnt;
}
for (var i = 0, c; c = obj.childNodes[i]; i++) {
if (!c.className || c.className != "highlight")
cnt += loopSearch(s, c);
}
return cnt;
}
function replace(s, dest) {
var r = new RegExp(s, "g");
var tm = null;
var t = dest.nodeValue;
var cnt = 0;
if (tm = t.match(r)) {
cnt = tm.length;
t = t.replace(r, "{searchHL}" + decode(s) + "{/searchHL}")
dest.nodeValue = t;
}
return cnt;
}
function highlight(s,l) {
if (s.length == 0) {
return false;
}
s = encode(s).toLowerCase();
var obj_li = $('#'+l+'').find('h4');//显示内容的容器id下的标题h4,可以改成你自己用的其他的标签
obj_li.each(function (i, o) {
var t = o.innerHTML.replace(/([^<>]*)/gi, "$1");
o.innerHTML = t;
var cnt = loopSearch(s, o);
t = o.innerHTML
var r = /{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g
t = t.replace(r, "$1");
o.innerHTML = t;
});
}
使用:
例如:你的内容是显示在这个div#aaaa内,搜索内容的标题是h4标签显示的,那么调用上面的方法:highlight('呵呵','aaaa'),结果内容中的呵呵就显示高亮了。
抛砖引玉