Vue 正则表达式 替换

Question

需求是 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并高亮。很难受？该怎么写

Answer 1

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

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

Answer 2

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