vue实现搜索高亮关键字

2023-06-25 19:23| 来源: 网络整理| 查看: 265

模仿浏览器中ctrl+f实现搜索关键字高亮显示思路：

通过ref获取dom元素删除当前关键词高亮色；设置本次搜索的关键词高亮；进行内容替换；为首个关键词进行高亮，设置为当前关键词；

关键代码：

定义一个正则 key就代表要高亮的字符串，i 代表匹配大小写 g代表全局匹配利用字符串的replace方法进行替换，把匹配的关键字进行替换进行包裹正则语法： str.replace(正则,( 匹配到内容 )=>{ return 要替换的内容 }) // 获取对应的dom元素 const main = this.$refs[`checkboxOpposite${key}`][0].$el as any; let innerHTML = main.innerHTML; //删除当前关键词的背景色 const emReg1 = new RegExp('', 'g'); innerHTML = innerHTML.replace(emReg1, ''); const emReg2 = new RegExp('', 'g'); innerHTML = innerHTML.replace(emReg2, ''); const emReg3 = new RegExp('', 'g'); innerHTML = innerHTML.replace(emReg3, ''); const emReg4 = new RegExp('', 'g'); innerHTML = innerHTML.replace(emReg4, ''); // ------ main.innerHTML = innerHTML; // 设置本次搜索背景色 if (value !== '' && value !== ' ') { 设置本次搜索背景色; const reg = new RegExp(value, 'g'); const mainInnerHTML = innerHTML.replace(new RegExp('(?=\>).+?(?=\

【本文地址】

公司简介

联系我们