思路:
有一段文字,现在想找到查找到这段文字中的某个字符串,并且给这段文字所有匹配的字符串加上一个背景颜色,这个背景要首先设置好。
通过split('查找的文字');将这段文字分割成数组,
再通过join('<span>'+str+'</span>');将带样式查找的文字作为数组的分隔将数组连接成字符串。
按照这个思路,功能就大体实现了,但是还有问题,就是查找一次后,输入框清空再次查找会出现一些奇怪的情况。
判断一下就好了:if(!str)return;
贴一下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body{
width: 800px;
margin: 0 auto;
}
p{
width: 800px;
height: auto
}
span{
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
var aIn = document.getElementsByTagName('input');
var oP = document.getElementsByTagName('p')[0];
aIn[1].onclick = function(){
var str = aIn[0].value;
if(!str)return;
var arr = oP.innerHTML.split(str);
oP.innerHTML = arr.join('<span>'+str+'</span>');
}
}
</script>
<body>
<input type="text" />
<input type="button" value="查找" />
<p>
归正传,最近新开通了平台gongxin,想借着平台的力量来使自己能有更快的提高(督促自
己)。随着社会的高速发展,每天的变化可以说是日新月异,大多数学gongxin技术的人们心中的
念头怕都是想着:”学的东西太多了,gongxin实在学不过来了“。其实每个想要上进的人又何尝
不是这样想的,本人也很痛苦,在学习新知识时,由于缺乏相关连续性知识,看到一半发
现这里不懂,gongxin于是又跑去补这块知识,补着补着,”咦gongxin,这个技术好啊!感觉学起来对自
己更有裨益。”于是乎,放下这块gongxin,又跑去看那快去了,可结果呢?就正如猴子掰玉米那
样——掰一个丢一个。gongxin
</p>
</body>
</html>