模糊匹配的内容高亮显示

最新推荐文章于 2024-06-21 14:20:11 发布

八月的猪猪

最新推荐文章于 2024-06-21 14:20:11 发布

阅读量439

点赞数

分类专栏：前端文章标签：模糊匹配高亮显示

本文链接：https://blog.csdn.net/qq_42894622/article/details/90228214

版权

前端专栏收录该内容

123 篇文章 3 订阅

订阅专栏

个人blog，欢迎关注加收藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/Vue-min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input v-model="search" @keyup.enter="isShow"/>
			<div id="show">
				
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					search:""
				},
				methods:{
					isShow(){						
						var reg = new RegExp(vm.search,"gim");//正则表达式插入变量
						var str = "js你快点发你看js都没法看了没jS地方边框JS";
						var arr = str.match(reg,str);
						var newArr = [...new Set(arr)];//数组去重
						console.log(newArr);
						for (let i in newArr) {
							var regsearch = new RegExp(newArr[i],"gm");
							str = str.replace(regsearch,"<span style='color:red'>"+newArr[i]+"</span>");				
						}
						document.getElementById("show").innerHTML = str;
					}
				}
			});
			
			
		</script>
	</body>
</html>

八月的猪猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模糊匹配的内容高亮显示

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/Vue-min.js" type="text/javascript" charset="utf-8"></script>...
复制链接

扫一扫

专栏目录