匹配搜索关键高亮 new RegEXP 填坑

需求：在搜索框输入关键字，点击搜索查找内容，在正文中匹配搜索关键字的内容高亮显示

使用 new RegEXP 实现

matchKeyword (searchKeyword, value) { // searchKeyword搜索关键字, value正文内容
    if (value) {      
      value = value + ''    //转化为字符串类型
    } else {
      return
    }
    if (searchKeyword && searchKeyword.length > 0) {
      let searchKeywords = searchKeyword.split(' ');
      for (let i = 0; i < searchKeywords.length; i++) {
        if (searchKeywords[i] !== '') {      //排除掉空字符串，开始没有考虑空值、空格情况，导致 
                                             //全文都被匹配
          let replaceReg = new RegExp(searchKeywords[i], 'gi');
          let replaceString = '<span style="background-color:#ffc600;color: #000 ">' + searchKeywords[i] + '</span>';
          value = value.replace(replaceReg, replaceString);
        }
      }
      return value   //返回替换后加上高亮样式的正文内容
    } else {
      return value;
    }
  }

<p v-html="matchKeyword(key,value)"></p>
用v-html  去解析返回的内容，这样样式（html标签）才会被解析

注意：一定要考虑  searchKeywords[i]  为空，导致  replaceReg 值为空的情况 ，当 replaceReg为空时，它与全文都能匹配，最后的结果是全文均能被匹配上，加上高亮样式。

解决：1.关键字符串包含多个用空格隔开的字符串，把关键字分隔成数组时，同时去除多余字符串

           2.字符串分隔成数组之后，判断如果为空数组则不进行匹配操作（如上文）