js 文字的高亮显示

<script language="JavaScript">window.onload=function(){preStr=document.getElementById("d").innerHTML;}function f(str){if(str==""){document.getElementById("d").innerHTML=preStr;}else{var reg=new RegExp("("+str+")","gi");var s=document.getElementById("d").innerHTML;document.getElementById("d").innerHTML=s.replace(reg,"<font color=red>$1</font>");}alert(document.getElementById("d").innerHTML);}</script><body>
<div id="d">
用JS让文章内容指定的关键字加亮
是这样的..
现在有这些关键字:美容,生活,购物<br>
当在文章里头出现这些关键字,就把它加亮显示..<br>
文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...<br>
不知道怎样来实现这样的功能啊?特此求助
</div>
<input type="text" id="t" onchange="f(this.value)">
</body>假如只要搜索一下连在一起的关键字，如“文章”，事件触发后会显示红色“文章”；但是比如说，我先输入“文”，触发事件，再输入“章”，再触发事件，让“文章”变红，应该怎么弄？

解决方案 »

  1.   

    你开始都保存了原字符串，但没用上...<script language="JavaScript">
    window.onload=function(){
    preStr=document.getElementById("d").innerHTML;
    }function f(str){
    if(str==""){
    document.getElementById("d").innerHTML=preStr;
    }else{
    var reg=new RegExp("("+str+")","gi");
    document.getElementById("d").innerHTML = preStr.replace(reg,"<font color=red>$1</font>");
    }
    alert(document.getElementById("d").innerHTML);
    }
    </script><body>
    <div id="d">
    用JS让文章内容指定的关键字加亮
    是这样的..
    现在有这些关键字:美容,生活,购物<br>
    当在文章里头出现这些关键字,就把它加亮显示..<br>
    文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...<br>
    不知道怎样来实现这样的功能啊?特此求助
    </div>
    <input type="text" id="t" onchange="f(this.value)">