vue搜索关键字高亮

    filter(val) {
    // input的长度大于0 
      if (val.length > 0) {

		// 业务需求有括号，括号不转义RegExp报错
		let value = val; // 不加转义 关键字高亮
        if (val.split('(').length > 1) {
          if (val.split('(')[1] != '') { // 括号转义，不然正则报错，但是转移了不能高亮
            val = val.split('(')[0] + '\\(' + val.split('(')[1].split(')')[0] + '\\)';
          } else {
            val = val.split('(')[0] + '\\(' + val.split('(')[1].split(')')[0];
          }
        }

        let replaceReg = new RegExp(val, 'ig');
        let clone = [];
        const data = this.data.modelActivity.model_arr;
   		// 所有数据遍历
        for (let i=0; i<data.length; i++) {
          const str = data[i].bsm_name.split(replaceReg);
          if (str[1] != undefined) {
          	//								符合条件的数据，高亮的文本，其他文本
            const li = this.highlightWord(data[i].brand_id,value,data[i]);
            // 因为在函数里添加，会逐渐渲染数据，不是全部一起显示，所以提到外面添加
            clone.push(li)
          }
        }
        // 赋值
        this.setData({
          alternativeList: clone
        })
      }
    },
    
    // 关键字高亮
    highlightWord (id, matchStr, need) {
      matchStr = matchStr.replace(/\s*/ig, '')
      // needStr = needStr.replace(/\s*/ig, '') // 去空格
      let needStr = need.bsm_name;
      let newKeyName = '';
      let idArr = []
      for (let i = 0; i < needStr.length; i++) {
        // 全匹配
        if (needStr.substring(i, i + matchStr.length).toUpperCase() === matchStr.toUpperCase()) {
          for (let ii = 0; ii < matchStr.length; ii++) {
            idArr.push(i + ii)
          }
        }
      }
      for (let i = 0; i < needStr.length; i++) {
        let str = needStr[i]
        if (idArr.includes(i)) {
        	// 高亮
          str = '<span style="background: #D7E4FF; border: 1px solid #D7E4FF;">' + needStr[i] + '</span>'
        }
        	// 完整文本
        newKeyName += str;
      }
      // 返回
      return {
        name: matchStr,
        li: need.s_model_name,
        str: newKeyName,
        id: id
      }
      
    },

原文链接，点击跳转