java 关键字高亮_关于搜索功能的关键字高亮显示是如何实现的

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')，结果内容中的呵呵就显示高亮了。

抛砖引玉