js实现关键字匹配

最新推荐文章于 2024-04-11 15:50:17 发布

二牛说课

最新推荐文章于 2024-04-11 15:50:17 发布

阅读量3.6k

点赞数 1

分类专栏：前端技术

本文链接：https://blog.csdn.net/ucicno000/article/details/80450893

版权

前端技术专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>

二牛说课

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现关键字匹配

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js实现关键字匹配&lt;/title&gt; &lt;style&gt; *{padding:0;margin:0;} #box{width:4
复制链接

扫一扫