关键词高亮 记录

前言：开发过程中所遇问题，搜索半天发现许多大佬的办法虽然讲的很细但是很繁琐，不够简洁。

因此经过曲折的搜索，终于让我找到了，只做记录。

注意点：注意此段代码Vue 需要用v-html 进行渲染。

关键代码如下：

  // str是整段文字，keyWord是需高亮文字
    highlightText (str, keyWord) {
      const key = '(' + keyWord.replace(/([\+\.\*\|\?\-\(\[\^\$])/g, '\\$1').replace(/\s+/g, '|') + ')'
      const pattern = new RegExp(key, 'g')
      const str2 = str.replace(pattern, `<span style="color: #f00;">${keyWord}</span>`)
      return str2
    },

调用上述代码你可以得到如下图类似效果：红字高亮效果