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="http://www.mamicode.com/搜索" />
            <input type="reset" name="ret" id="ret" value="http://www.mamicode.com/重置" />
     </div>

</form>

js部分：

var oBtn= document.getElementById("btn");
var oText =document.getElementById("text");
var oWb = document.getElementById("wb");
var oZichuan = oWb.innerHTML;
    oText.onfocus=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 ;
                }
     }

利用JavaScript的字符串操作实现简单查字