搜尋當前頁面中的關鍵字讓關鍵字變色

 

<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中 且讓關鍵字變色。

關鍵字變色的代碼是抄的。。。。希望大家見諒~~