前端查询框做高亮显示,特殊字符在RegExp正则表达式中报错

  1. 在做一个前端需求时(我是后端)555。高亮显示输入框的值,后端返回数据这些都不说了,前端高亮网上基本都是做一个正则表达式,获取输入的值在返回的值里面替换对应的字段,再在字段前后加上字体颜色样式。
  2. 提供下高亮的函数:
    ​​​searchKeyword(val,keyword){
    
          if(keyword){
    
          let str = this.escAddFun(keyword);
    
          let reg = new RegExp(str)
    
          val = val.replace(reg,function(text){
    
           return '<font color="red">'+text+'</font>'
    
        })
    
        }
    
        return val
    
    }

    正则表达式中对字符是一些要求,比如[最为参数传入时,需要加\\两根斜线,是的是两根。所以对[来说入参时必须为\\[,所以这里的escAddFun函数就是专门给字符加\\的,你自己写也可以,这里也提供一个。

 escAddFun(value){
        // 先对拿到的字符进行分割(分割完之后是一个数组)
        let valueSplit = value.split("")
        // 创建一个自定义的数组用于存放特殊字符的坐标
        let valueSplitIndex = []
        // 遍历分割完的字符数组,把特殊字符的坐标存放在自定义的数组中
        for (var i = 0; i < valueSplit.length; i++) {
          if (valueSplit[i] == "\\") {
            valueSplitIndex.push(i)
          }
        }
        // 遍历坐标数组
        for (let i = 0; i < valueSplitIndex.length; i++) {
          // 这里把对应特殊字符的值替换成 \\+字符
          valueSplit.[valueSplitIndex[i]] = "\\" + valueSplit.[valueSplitIndex[i]];
        }
        // 对字符数组进行拼接获得新字符串(此时就为给\加上转义符的字符串了)
        let newValue = valueSplit.join("")
        return newValue;
      }

这样匹配高亮的函数就不会报错了

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值