搜索当前页面中的关键字让关键字变色

 

<script type="text/javascript">
String.prototype.trim = function() { return this.replace(/^/s+|/s+$/g,''); }

//通过点击事件触发函数
function sub_fm_find(formobj)
{
if(formobj.channalName.value.trim() != "" && formobj.channalName.value.trim() != "请输入您要搜索的频道")
{

//获取后台传入页面中的数据   我这里在action中将List转换为了json格式的字符串 通过eval可以比较放心的使用json字符串。 eval可以将字符串生成语句执行，和SQL的exec()类似。 eval函数的用法 blog.csdn.net/xiechunmei13/archive/2009/11/20/4842264.aspx
    var tep= eval(${jsonString});
var html='';
for(var i=0;i <tep.length;i++)
{
// 利用 IndexOf方法来判断 关键字是否存在与 name属性 与 prog_name属性中，如果不存在将返回-1 存在则返回所在位置的下标
if(tep[i].name.indexOf(formobj.channalName.value.trim())!=-1
|| tep[i].prog_name.indexOf(formobj.channalName.value.trim())!=-1){
//将整条信息放入到页面中，页面结构由js输出。搜到多少条信息 返回多少个div
        html+=" <div class=/"RoundedCorner/" style=/"margin-left: 15px; margin-top: 3px;/"> ";
html+=" <b class=/"rtop/"> <b class=/"r1/"> </b> <b class=/"r2/"> </b> <b class=/"r3/"> </b> <b class=/"r4/"> </b> </b>";
html+=" <table width=/"285/" style=/"margin-left: 3px/">";
html+=" <tr>";
html+=" <td width=/"52/" rowspan=/"2/"> <a href=/""+tep[i].code+"/">";
html+=" <img src=/" <%=path%>"+tep[i].icon+"/" /> </a> </td>";
html+=" <td width=/"80/"> <span style=/"font-size: 14px;/">";
html+=" <a href=/""+tep[i].code+"/">";
html+=tep[i].name+" </a> </span> </td>";
html+=" <td width=/"164/" align=/"right/"> <a href=/""+tep[i].code+"/">";
html+=" <img class=/"hand/" src=/"images/demand/btn_play.png/" /> </a>&nbsp;";
html+=" <a href=/"javascript:insertLive('','"+tep[i].name+"','"+tep[i].mediCode+"','"+tep[i].icon+"','"+tep[i].television_id+"','"+tep[i].code+"','"+tep[i].play_datetime+"','"+tep[i].prog_name+"',' <%=path%>');/">";
html+=" <img src=/"images/demand/btn_shoucang.png/" /> </a> </td>";
html+=" </tr>";
html+=" <tr>";
html+=" <td width=/"80/">"+tep[i].play_datetime+" </td>";
html+=" <td width=/"164/">"+tep[i].prog_name+" </td>";
html+=" </tr>";
html+=" </table>";
html+=" <b class=/"rbottom/"> <b class=/"r4/"> </b> <b class=/"r3/"> </b> <b class=/"r2/"> </b> <b class=/"r1/"> </b> </b> </div>";
}
}
document.getElementById("find_div_id").innerHTML=html;

//调用 highlight 方法将关键字传入进去 在这里是为了改变关键字的颜色。
    highlight(formobj.channalName.value.trim());
document.getElementById("find_div_id").style.display="block";
document.getElementById("aaa").style.display="none";
}
else
{
document.getElementById("aaa").style.display="block";
document.getElementById("find_div_id").style.display="none";
}
}
function encode(s){
return s.replace(/&/g,"&").replace(/ </g," <").replace(/>/g,">").replace(/([///./*/[/]/(/)$/^])/g,"/$1");
}
function decode(s){
return s.replace(///([///./*/[/]/(/)$/^])/g,"$1").replace(/>/g,">").replace(/ </g," <").replace(/&/g,"&");
}

//改变关键字颜色函数
function highlight(s){
s=encode(s);

//只在刚才搜到的div中去寻找关键字 并不要求整个Body中
var obj= document.getElementById("find_div_id");

//为关键字加入样式
var t=obj.innerHTML.replace(/ <span/s+class=.?highlight.?>([^ <>]*) <//span>/gi,"$1");
obj.innerHTML=t;
var cnt=loopSearch(s,obj);
t=obj.innerHTML
var r=/{searchHL}(({(?!//searchHL})|[^{])*){//searchHL}/g
t=t.replace(r," <span class='highlight'>$1 </span>");
obj.innerHTML=t;
// alert("搜索到关键词"+cnt+"处")
}
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;
}
</script>
<style type="text/css">
.highlight {
font-weight: bold;
color: red;
}
</style>
搜索出当前页中List数据下 否和某个关键字的数据显示到新的div中 且让关键字变色。

关键字变色的代码是抄的。。。。希望大家见谅~~