前端（js，vue）如何实现搜索结果根据关键字标红效果 （正则表达式实现）

示例：结果文字contentText ：“地震采集测试” ，关键字keyword ： “采集”

一、获取结果文字contentText与关键字keyword的共同值，即找到二者相同的字，存在一个数组wordsArray里，如下：

		//获取需要标红的文字
        getRedWords(contentText, keyword) {
          let keywordArray = keyword.split('');
          let wordsArray = [];
          for(let key of keywordArray){
            if(contentText.includes(key)){
              wordsArray.push(key)
            }
          }
          return wordsArray;
        },

得到结果wordsArray：
二、使用正则表达式，为contentText依次替换每一个wordsArray里的文字（默认文字替换为带有红色格式），如下：
(此时RegExp(word, 'i')是忽略大小写匹配，实测是匹配一次。如果想要多次匹配们可以使用RegExp(word, 'g')全局匹配，详情请移步：正则表达式匹配 个人根据实际情况进行选择)

		//将文字标红
        brightenKeyword(contentText, keyword) {
          let wordsArray = this.getRedWords(contentText, keyword);
          let res = contentText;//res的初始值是不带任何红色格式的
          //遍历相同字数组，
          for(let word of wordsArray){
            const Reg = new RegExp(word, 'i');
            //替换每一个相同字
            res = res.replace(Reg, `<span style="color: red;">${word}</span>`);
          }
          return res;//此时的res里已经将需要标红的字体带上了格式（<span style="color:red"></span>）
        },

三、调用brightenKeyword方法，拿到返回值，并使用标签展示该结果，如下：

<span v-html="brightenKeyword(record.productName,oldSearchText)"></span>

四、最终结果：