前端实现搜索然后关键字变色

效果

核心实现思路

1. 先通过input的input事件，获取到输入框里输入的关键字，根据关键字过滤一遍数据。
2. 根据过滤后的数据，调用封装好的替换方法。就是字符串的替换，替换成html片段，在dom元素上使用v-html。

替换方法实现

 // 匹配到的关键字变色
    keyWordchangeColor(kw, str) {
      // kw 传入的关键字 str 需要检索关键字的字符串
      const reg = new RegExp(kw, 'ig'); // ig 是所有的意思 而非在发现第一个匹配项时立即停止
      // 使用replace方法替换元素产生高亮
      return str.replace(reg, (match) => `<span style="color:#66a4fb">${match}</span>`);
    },

完整代码

 processSearchChange(val) {
      if (val.length > 49) {
        this.$message.warning('最大支持输入50个字符');
      }
      if (val.length === 0) {
        this.nodes = JSON.parse(JSON.stringify(this.nodes2));
        this.noResult = false;
        return;
      }
      // data中定义了两个相同的nodes 处理下键盘输入 _
      this.nodes = JSON.parse(JSON.stringify(this.nodes2));
      this.nodes = this.nodes.filter((item) => item.projectName.includes(val) || item.projectId.includes(val) || item.processName.includes(val));
      // 未查询到数据
      if (this.nodes.length === 0) {
        this.noResult = true;
      } else {
        this.noResult = false;
      }
      this.nodes.forEach((item) => {
        item.processName = this.keyWordchangeColor(val, item.processName);
        item.projectName = this.keyWordchangeColor(val, item.projectName);
        item.projectId = this.keyWordchangeColor(val, item.projectId);
      });
    },
    // 匹配到的关键字变色
    keyWordchangeColor(kw, str) {
      // kw 传入的关键字 str 需要检索关键字的字符串
      const reg = new RegExp(kw, 'ig'); // ig 是所有的意思 而非在发现第一个匹配项时立即停止
      // 使用replace方法替换元素产生高亮
      return str.replace(reg, (match) => `<span style="color:#66a4fb">${match}</span>`);
    },