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>