css部分：

  *{

  margin: 0;

  padding: 0;

    }

  #ziku{width: 600px;height: 500px;border: 1px solid gold;margin: 0 auto;}

  #wb{width: 600px;height: 450px;border: 1px solid #f40;margin: 0 auto;}

  #text{margin-left: 100px;height: 30px;width: 200px;display: block;margin-top: 10px;float: left;}

  #btn{margin-left: 20px;height: 30px;width: 100px;display: block;margin-top: 10px;float: left;}

  #ret{margin-left: 20px;height: 30px;width: 100px;display: block;margin-top: 10px;float: left;}

结构部分：

<form>

     <div id="ziku">

     <div id="wb">

                博客园创建于2004年1月，博客园诞生于江苏扬州这样一个IT非常落后的小城市，城市虽小，但是这里却有很多求知创新的人，博客园诞生的理由是如此简单。

     </div>

            <input type="text" name="text" id="text" value="" />

            <input type="button" name="btn"  id="btn" value="搜索" />

            <input type="reset" name="ret" id="ret" value="重置" />

     </div>

</form>

js部分：

var oBtn= document.getElementById("btn");

var oText =document.getElementById("text");

var oWb = document.getElementById("wb");

var oZichuan = oWb.innerHTML;

    oText.οnfοcus=function(){

                onkeyup =function(){

                    jia (oText.value);

                }

     }

     function jia(a){

                if(a){

                   var arr = oZichuan.split(a)

                   oWb.innerHTML = arr.join( '<span style="color:red;background:gold;" >'+a+'</span>' ) ;

                }else{

                   oWb.innerHTML = oZichuan ;

                }

     }