在客户端用javascript对内容中的特定关键字加亮（高亮）显示的实现方法或思路

<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=gb2312'>
<title>在线用户列表</title>
<style type='text/css'>
body{font-family:'宋体';font-size:12pt;}td{font-family:'宋体';font-size:10.5pt;line-height:135%;}.p105{font-family:'宋体';color:blue;font-size:10.5pt;}.p9{color=FFFF00;font-size:9pt;}A{color:white;text-decoration:none;}A:Hover{color:black;text-decoration:none;}A:Active{color:black}
</style>
<script language='JavaScript'>
var NS4 = (document.layers);
var IE4 = (document.all);
var win = window;
var n=0;
function findInPage(str){
var txt,i,found;
if(str==''){return false;}
if(NS4){if(!win.find(str))
while(win.find(str,false,true))n++;else{n++;}if(n==0)alert('您要的名字没有找到！');}
if(IE4){txt=win.document.body.createTextRange();
for(i=0;i<=n&&(found=txt.findText(str))!=false;i++){txt.moveStart('character',1);txt.moveEnd('textedit');}if(found){txt.moveStart('character',-1);txt.findText(str);txt.select();txt.scrollIntoView();n++;}else{if(n>0){n=0;findInPage(str);}else{alert('您要的名字没有找到！');}}}return false;}function zxmd(){window.open('/hqt/readonly4.00/hqtchat004.htm','onlinelist','width=540,height=310')}</script>
</head>
<body bgcolor=3A6EA5 background=/hqt/readonly4.00/blank.gif bgproperties=fixed>
<div align=center>
<font color=FFFFFF id=f8rmn>【　　　　】</font>
<hr size=1 color=FFFF00>
<span class=p105><b><font color=red id=f8len>0</font></b> 人在线</font>
<table width=100% border=0 cellspacing=0 cellpadding=0>
  <form name='search' onSubmit='return findInPage(this.string.value);'>
    <tr>
      <td><center>
          <a href=javascript:zxmd()><font class=p9>在线名单汇总表</font></a>
        </center>
        <input name='string' type='text' size=8 onChange='n=0;' style='font-family:宋体;font-size:9pt;background-color:008800;color:FFFFFF;border: 1 double'>
        <input type='submit' value='查找' style='font-size:9pt;background-color:FF9900;color:FFFFFF;border: 1 double'>
      </td>
    </tr>
  </form>
  <tr>
    <td><br>
      <a href=javascript:parent.w('[大家]'); target=f4>大家</a><br>
      <a href=javascript:parent.w('[稻田青蛙]'); target=f4>稻田青蛙</a><br>
      <span id=f8list></span> </td>
  </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    整理了楼上的，但是可不可以让搜到的同时高亮现实？
    ----------------------------------------------
    <html>
    <head>
    <meta http-equiv='content-type' content='text/html; charset=gb2312'>
    <title>show it in highlight</title>
    <style type='text/css'>
    body{font-family:'宋体';font-size:12pt;}td{font-family:'宋体';font-size:10.5pt;line-height:135%;}.p105{font-family:'宋体';color:blue;font-size:10.5pt;}.p9{color=FFFF00;font-size:9pt;}A{color:white;text-decoration:none;}A:Hover{color:black;text-decoration:none;}A:Active{color:black}
    </style>
    <script language='JavaScript'>
    var NS4 = (document.layers);
    var IE4 = (document.all);
    var win = window;
    var n=0;
    function findInPage(str){
    var txt,i,found;
    if(str==''){return false;}
    if(NS4){if(!win.find(str))
    while(win.find(str,false,true))n++;else{n++;}if(n==0)alert('您要的名字没有找到！');}
    if(IE4){txt=win.document.body.createTextRange();
    for(i=0;i<=n&&(found=txt.findText(str))!=false;i++){txt.moveStart('character',1);txt.moveEnd('textedit');}if(found){txt.moveStart('character',-1);txt.findText(str);txt.select();txt.scrollIntoView();n++;}else{if(n>0){n=0;findInPage(str);}else{alert('您要的名字没有找到！');}}}return false;}function zxmd(){window.open('/hqt/readonly4.00/hqtchat004.htm','onlinelist','width=540,height=310')}</script>
    </head>
    <body bgcolor=3A6EA5 background=/hqt/readonly4.00/blank.gif bgproperties=fixed>
      <form name='search' onSubmit='return findInPage(this.string.value);'>
            <input name='string' type='text' size=8 onChange='n=0;' style='font-family:宋体;font-size:9pt;background-color:008800;color:FFFFFF;border: 1 double'>
            <input type='submit' value='查找' style='font-size:9pt;background-color:FF9900;color:FFFFFF;border: 1 double'>
      </form>
    <p>&nbsp;</p>
      <p>事件源对象 <br>
    </p>
    event.srcElement.tagName event.srcElement.type
    <p><br>
      捕获释放 <br>
    </p>
    event.srcElement.setCapture(); event.srcElement.releaseCapture();
    <p><br>
      事件按键 <br>
    </p>
    event.keyCode event.shiftKey event.altKey event.ctrlKey
    <p><br>
      事件返回值 <br>
    </p>
    event.returnValue
    <p><br>
      鼠标位置 <br>
      event.x <br>
      event.y <br>
      窗体活动元素 <br>
      document.activeElement <br>
      绑定事件 <br>
    </p>
    document.captureEvents(Event.KEYDOWN);
    <p><br>
      访问窗体元素 <br>
    </p>
    document.all("txt").focus(); document.all("txt").select();
    <p><br>
      窗体命令 <br>
      document.execCommand <br>
      窗体COOKIE <br>
      document.cookie <br>
      菜单事件 <br>
      document.oncontextmenu <br>
      创建元素 <br>
    </p>
    document.createElement("SPAN");
    </body>
    </html>
      

  2.   

    看这个，如何实现点击一次，所有的都选中。
    ----------------------------------------------
    <html>
    <head>
    <meta http-equiv='content-type' content='text/html; charset=gb2312'>
    <title>highlightshow</title>
    <style type='text/css'>
    body{font-family:'宋体';font-size:12pt;}td{font-family:'宋体';font-size:10.5pt;line-height:135%;}.p105{font-family:'宋体';color:blue;font-size:10.5pt;}.p9{color=FFFF00;font-size:9pt;}A{color:white;text-decoration:none;}A:Hover{color:black;text-decoration:none;}A:Active{color:black}
    </style>
    <script language='JavaScript'>
    var NS4 = (document.layers);
    var IE4 = (document.all);
    var win = window;
    var n=0;
    function findInPage(str){
    var txt,i,found;
    if(str==''){return false;}
    if(NS4){if(!win.find(str))
    while(win.find(str,false,true))n++;else{n++;}if(n==0)alert('没有此报类');}
    if(IE4){txt=win.document.body.createTextRange();
    for(i=0;i<=n&&(found=txt.findText(str))!=false;i++){txt.pasteHTML("<b style='background-color:#fff'>"+txt.text+"</b>");}
    if(found)
    {
    txt.scrollIntoView();
    n++;
    }
    else
    {if(n>0){n=0;findInPage(str);}else{alert('没有此报类');}
    }
    }
    return false;
    }
    </script>
    </head>
    <body bgcolor=3A6EA5>
      <form name='search' onSubmit='return findInPage(this.string.value);'>
            <input name='string' type='text' size=8 onChange='n=0;' style='font-family:宋体;font-size:9pt;background-color:008800;color:FFFFFF;border: 1 double'>
            <input type='submit' value='查找' style='font-size:9pt;background-color:FF9900;color:FFFFFF;border: 1 double'>
      </form>
    <p>&nbsp;</p>
      <p>事件源对象 <br>
    </p>
    event.srcElement.tagName event.srcElement.type
    <p><br>
      捕获释放 <br>
    </p>
    event.srcElement.setCapture(); event.srcElement.releaseCapture();
    <p><br>
      事件按键 <br>
    </p>
    event.keyCode event.shiftKey event.altKey event.ctrlKey
    </body>
    </html>