<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现关键字匹配</title>
<style>
*{padding:0;margin:0;}
#box{width:400px;height: 200px;border:1px solid #ccc;margin:50px auto 10px;padding:10px;}
p{width:270px;margin:0px auto;}
#txt{height: 50px;outline: none;text-indent: .5em;}
#btn{width: 50px;height: 50px;outline: none;border:0;cursor: pointer;}
</style>
</head>
<body>
<div id="box">
GV范德萨割发代首躬逢盛典囧加快了健康金坷垃环节会耦合空今后我解耦我积极哦我解决哦我解决哦囧囧积极哦UI噢耶蜂蜜成都三放屁看破 同人文屁哦发我司可破托管人蛇 皮卡破
GV范德萨割发代首躬逢盛典囧加快了健康金坷垃环节会耦合空今后我解耦我积极哦我解决哦我解决哦囧囧积极哦UI噢耶蜂蜜成都三放屁看破 同人文屁哦发我司可破托管人蛇 皮卡破
GV范德萨割发代首躬逢盛典囧加快了健康金坷垃环节会耦合空今后我解耦我积极哦我解决哦我解决哦囧囧积极哦UI噢耶蜂蜜成都三放屁看破 同人文屁哦发我司可破托管人蛇 皮卡破
</div>
<p>
<input type="text" id="txt">
<input type="button" id="btn" value="查询">
</p>
<script>
window.onload = function(){
function $(id){
return document.getElementById(id);
};
var btnDom = $("btn");
var txtDom = $("txt");
var boxDom = $("box");
var html = boxDom.innerHTML;
btnDom.onclick = function(){
var txtValue = txtDom.value;
search(html,txtValue,boxDom);
};
//当txt对象获取焦点的时候
txtDom.onfocus = function(){
this.onkeyup = function(){
var txtValue = this.value;
search(html,txtValue,boxDom);
};
};
//封装search方法
function search(html,target,obj){
if(!target){//falsy NaN undefined '' "" null false 0
obj.innerHTML = html;
}else{
var arr = html.split(target);
var nStr = arr.join("<span style='color:red'>"+target+"</span>");
obj.innerHTML = nStr;
}
};
};
</script>
</body>
</html>
