为了账号安全,请及时绑定邮箱和手机立即绑定

js实现查找关键字效果

标签:
Html5

<!DOCTYPE html>

<html>

<head>

<title>http://www.cnblogs.com/web001/p/8260684.html</title>

<meta charset="utf-8"/>

<style type="text/css">

p { border:5px solid #ccc; background:#FFFF99; width:400px; padding:20px; font-size:16px;  }

        span { background:red; }

</style>

</head>

<body>

<div>

<input type="text" id="content" />

    <input type="button" value="查找" id="btn"/>

    <p id="box">

        轻轻的我走了,正如我轻轻的来;我轻轻的招手,作别西天的云彩。<br/>

        那河畔的金柳,是夕阳中的新娘;波光里的艳影,在我的心头荡漾。<br/>

        软泥上的青荇,油油的在水底招摇;在康河的柔波里,我甘心做一条水草! <br/>

        那榆荫下的一潭,不是清泉,是天上虹;揉碎在浮藻间,沉淀着彩虹似的梦。<br/>

        寻梦?撑一支长篙,向青草更青处漫溯;满载一船星辉,在星辉斑斓里放歌。<br/>

        但我不能放歌,悄悄是别离的笙箫;夏虫也为我沉默,沉默是今晚的康桥!<br/>悄悄的我走了,正如我悄悄的来;我挥一挥衣袖,不带走一片云彩

    </p>

</div>

</body>



</html>

<script type="text/javascript">

var content=document.getElementById('content');

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

var box=document.getElementById("box");


btn.=function(){

var getValue=content.value;

if(!getValue){

return;

}

box.innerHTML=box.innerHTML.split(getValue).join('<span>'+getValue+'</span>');

}


</script>


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
37
获赞与收藏
165

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消