js实现模糊搜索下的文字高亮显示

因为项目需求写了一段模糊搜索文字高亮显示的功能，

效果如下:

话不多说，直接甩代码：

//this.searchValue 为搜索项 匹配搜索项与this.fileList[index].fullName是否匹配 然后
//返回匹配项数组searchMatchArr.涉及到了模糊搜索,故而做了大小写处理即函数searchSubStr
//this.positions用于存储检索到的需要高亮的下标

setSearchStyle() {
        if(this.searchValue.trim() !== '')
        {
          for(let i = 0; i < this.fileList.length; i++)
          {
            this.positions = [];
              //遍历获取符合要求的搜索项
              let re = new RegExp(this.searchValue,"ig");
              let searchMatchArr = [];
              searchMatchArr = this.fileList[i].fullName.match(re);
            if(this.fileList[i].fullName.match(re).length > 0)
            {
               //模糊搜索,不区分大小写
              this.searchSubStr(this.fileList[i].fullName, this.searchValue);
              let fullNameArr = this.fileList[i].fullName.split('');
              for(let m = 0; m < this.positions.length; m++)
              {
                //动态包裹标签设置class类
                fullNameArr.splice(this.positions[m], this.searchValue.length);
                fullNameArr.splice(this.positions[m], 0, '<span class="hignLight">' + searchMatchArr[m] + '</span>');
                this.fileList[i].fullName = fullNameArr.join('');
              }
            }
          }
        }
      }
//模糊搜索,不区分大小写
searchSubStr(str, subStr) {
      let pos = str.toLowerCase().indexOf(subStr.toLowerCase());
      while (pos > -1) {
        this.positions.push(pos);
        pos = str.toLowerCase().indexOf(subStr.toLowerCase(), pos + 1);
      }
    },