vue3 仿Ctrl+F实现页面全局搜索

vue3 仿Ctrl+F实现页面全局搜索

直接上效果图

实现原理

1.获取元素的html
2.通过搜索内容进行比对，给搜索内容外部重新生成一个标签
3.给元素重新赋值html

<script setup>
import { reactive, toRefs } from 'vue';
	let cont=ref('')
	const conter = ref(null);
	const seach=()=>{
		//开始搜索时，将替换的标签替换回来
		replaceEm()
		//判断是否输入搜索值
		if(!cont.value){
			return
		}
		//
		let reg = new RegExp(cont.value, "g");
		//替换搜索值
		let mateConter = conter.value.innerHTML.replace(reg, `<em class="serch-dom" style="color: red;font-size: 18px;">${cont.value}</em>`);
		//重新赋值给html
		conter.value.innerHTML = mateConter
		//滚动到指定元素，并可指定滚动选项
		const element = document.querySelectorAll(".serch-dom")[0];
		element.scrollIntoView({
		  behavior: "smooth", // 平滑滚动
		});
	}
	const replaceEm=()=>{
		let mateConter = conter.value.innerHTML.replace(new RegExp('<em class="serch-dom" style="color: red;font-size: 18px;">', "g"),'');
		mateConter = mateConter.replace(new RegExp('</em>', "g"),'');
		conter.value.innerHTML = mateConter	
	}
</script>