文章内容实现关键字搜索高亮标红

最新推荐文章于 2024-10-10 17:26:59 发布

mwsblue

最新推荐文章于 2024-10-10 17:26:59 发布

阅读量341

点赞数

分类专栏：前端基础文章标签：中国女篮奥运会资格赛菲律宾姚明韩旭

本文链接：https://blog.csdn.net/mwsblue/article/details/115646823

版权

前端基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<input type="text"><button>搜索</button>
	<pre>
	
	</pre>
	<script>
	var str = `
北京时间11月17日，东京奥运会女篮资格赛亚大区预赛继续在新西兰奥克兰进行。
中国女篮在最后一场比赛中发挥出色，最终以127-49吊打击败菲律宾，成功取得2连胜，
晋级奥运会资格赛。本场比赛，中国篮协主席姚明来到现场观战。
球员数据：李月汝14分4篮板，韩旭24分9篮板，王雪朦14分，李梦6分，杨力维10分，
王思雨11分，黄思静12分，孙梦然10分
今年国际篮联对女篮奥运会预选赛赛制进行了全新的改革，在这一阶段资格赛中，将亚洲8队分为A、B两个小组，
每组前两名将有资格参加明年的东京奥运会女篮资格赛。中国队和韩国、新西兰和菲律宾一起被分在了A组，
这3个对手均在亚洲杯上惨败过中国，但是在首场比赛中，中国爆冷输给了韩国，好在随后击败新西兰，拿到出线主动权。`

	document.querySelector("pre").innerHTML = str;
    document.querySelector("button").onclick=function(){
		var userIn = document.querySelector("input").value;
		var reg = new RegExp(userIn,"img");
		document.querySelector("pre").innerHTML=str.replace(reg,function(){
			console.log(arguments[0])
			return `<span style="color:red">${arguments[0]}</span>`
		})
	}
	</script>
</body>
</html>