Vue 正则表达式 替换

clipboard.png
需求是 Vue的AutoComplete组件输入abc会去后台吧所有存在abc(不区分大小写的)拿出来,并高亮、

highlightData: function (data, propShow, propOrigin, highlight) {
        data.forEach(item => {
          // 匹配关键字正则
          let replaceReg = new RegExp(highlight, 'gi')
          // 高亮替换v-html值
          let replaceString = '<span class="color-primary">' + highlight + '</span>'
          // 开始替换
          item[propShow] = item[propOrigin].replace(replaceReg, replaceString)
        })
        return data
      },

之前我是这么写的,但是这样的话会把原来的ABC变成abc并高亮。很难受?该怎么写

回答:

为什么是用replace呢?我觉得应该用test或者是match。当然,你用replace也不是不可以,
let replaceReg = new RegExp(highlight, ‘gi’)
let replaceString = ‘<span class=”color-primary”>$&</span>’
item[propShow] = item[propOrigin].replace(replaceReg, replaceString)

回答:

但是这样的话会把原来的ABC变成abc并高亮

'abc和ABC'.replace(/abc/gi,(val) =>`<p>${val}</p>`)
//"<p>abc</p>和<p>ABC</p>"

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注