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

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

关键代码：

  1. 定义一个正则 key就代表要高亮的字符串，i 代表匹配大小写 g代表全局匹配
  2. 利用 字符串的replace方法进行替换，把匹配的关键字进行替换进行包裹
  3. 正则语法： 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('(?=\>).+?(?=\<)', 'g'), function (str) {const reg1 = new RegExp('(?=>).+', 'g');return str.replace(new RegExp('(>).+', 'g'), function (str2) {return str2.replace(reg1, function (str1) {return str1.replace(reg, '' + value + '');});});});main.innerHTML = mainInnerHTML;}// em标签都是被替换的 所以em标签的数量就是搜索到关键字的数量 为首个关键词进行高亮，设置为当前关键词；// const num = document.getElementsByTagName('em').length;// if (num !== 0) {// document.getElementsByTagName('em')[0].innerHTML =// '' + value + '';// // 滚动到第一个关键字位置// document.getElementsByTagName('em')[0].scrollIntoView({// block: 'start',// behavior: 'smooth',// });// }

参考链接

但是上方适用于段落这种操作，如果是和饿了么的下拉框等组件配合使用的话，就有些不行, 不能点击checkbox【起码我没想到方法，有大佬想到方法，可以一起交流】

所以基于饿了么的我又想了一个办法，配合使用v-html
我这里是checkbox的例子，我们获取到options，对options的每一个进行操作，如果匹配符合的话给他设置背景

formOptions是很多多选框组成的数组，我需要替换到搜索的那一组多选框的options即可

 private threeFormChange(value: string, searchItem: any) {if (searchItem.options && searchItem.options.length > 0) {searchItem.options.filter(item => {const reg = new RegExp(value, 'g');const replaceString = `${value.trim()}`;item.htmlLabel = null;if (item.label.match(reg) && value) {item.htmlLabel = item.label.replace(reg, replaceString);return item;}});this.formOptions.splice(this.formOptions.findIndex(item => item.prop === searchItem.prop),1,{...searchItem,options: searchItem.options});}}

html代码

 <el-checkbox-group v-model="bindValue" v-on="$listeners"><el-checkbox-buttonv-for="(item, index) in options":key="index":label="item.value":disabled="item.disabled ? item.disabled : false":checked="item.checked ? item.checked : false":class="item.class ? item.class : ''"><span v-show="!item.htmlLabel">{{ item.label }}</span><div v-show="item.htmlLabel" v-html="item.htmlLabel"></div></el-checkbox-button></el-checkbox-group>