vue实现搜索高亮关键字-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue实现搜索高亮关键字。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

模仿浏览器中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('<em style="background-color: yellow">', 'g');
    innerHTML = innerHTML.replace(emReg1, '');
    const emReg2 = new RegExp('</em>', 'g');
    innerHTML = innerHTML.replace(emReg2, '');
    const emReg3 = new RegExp('<strong style="background-color: #ff9632">', 'g');
   	innerHTML = innerHTML.replace(emReg3, '');
    const emReg4 = new RegExp('</strong>', '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, '<em style="background-color: yellow">' + value + '</em>');
          });
        });
      });
      main.innerHTML = mainInnerHTML;
    }
    // em标签都是被替换的 所以em标签的数量就是搜索到关键字的数量 为首个关键词进行高亮，设置为当前关键词；
    // const num = document.getElementsByTagName('em').length;
    // if (num !== 0) {
    //   document.getElementsByTagName('em')[0].innerHTML =
    //     '<strong style="background-color: #ff9632">' + value + '</strong>';
    //   // 滚动到第一个关键字位置
    //   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 = `<span style="background-color: yellow">${value.trim()}</span>`;
        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代码文章来源地址https://www.toymoban.com/news/detail-497865.html

 <el-checkbox-group v-model="bindValue" v-on="$listeners">
    <el-checkbox-button
      v-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>