【前端小实战】页面文字搜索功能

Fetters04

已于 2023-01-14 17:03:08 修改

阅读量356

点赞数 1

文章标签：前端 html css javascript

于 2023-01-14 16:36:05 首次发布

本文链接：https://blog.csdn.net/qq_53569667/article/details/128582119

版权

文章目录

一、页面效果展示
二、代码实现

一、页面效果展示

在这里插入图片描述

二、代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 输入框 -->
		<input type="text" id="my_input"/>
		<!-- 按钮 -->
		<button id="my_btn">搜索</button>
		<!-- 文本内容 -->
		<p id="my_p">
			噫，吁嚱，危乎高哉！蜀道之难，难于上青天！
			蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。
			西当太白有鸟道，可以横绝峨嵋巅。地崩山摧壮士死，然后天梯石
			栈方钩连。
			上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。
			青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？
			畏途巉岩不可攀。
			但见悲鸟号古木，雄飞从雌绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，
			使人听此凋朱颜。连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。
			其险也若此，嗟尔远道之人，胡为乎来哉。
			剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇，
			磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。
			蜀道之难，难于上青天，侧身西望长咨嗟。
		</p>
	</body>
	
	<script>
		// 获取对象
		var my_input = document.getElementById("my_input");
		var my_btn = document.getElementById("my_btn");
		var my_p = document.getElementById("my_p");
		
		my_btn.onclick = function() {
			// 重置为不含标签的文本，清除上一次查找的标注
			my_p.innerHTML = my_p.innerText;
			
			// 获取输入框中的内容，即要查找的内容
			var content = my_input.value;
			if (content) {
				// 使用正则表达式全局查找 content
				var regex = new RegExp(content, 'g');
				
				// 将标注的内容替换到查到到的原内容
				var newP = "<span style='background: yellow;'>" + content + "</span>";
				my_p.innerHTML = my_p.innerHTML.replace(regex, newP)
			}
		}
	</script>
</html>