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
      }
      
    },

原文链接,点击跳转

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值