前端开发，多关键字搜索时，搜索结果高亮显示(解决输入英文时，会错误的把html标签渲染的问题)

因为是多关键字搜索，首先考虑的是把关键词转换为一个数据，把关键词和文本信息进行一次循环比对， 发现是重复的，就进行高亮显示，如果之前的第一个关键词已经关键词显示，那么此时文本已经存在了 html标签，这个时候把html标签转化为一个特殊的符号，把这些所有的特殊符号的代表内容放如到一个数组内， 再紧接着高亮渲染html标签，完成后，把原先特殊符号进行替换，依次替换成需要显示的html标签，即可

解决代码

/**
 * 高亮函数
 * @param text 文本
 * @param searchKeywords  关键词
 * @param splitStr 关键词分隔符
 */
export function hightLight(text,searchKeywords,splitStr = " ") {
  // 取出前后空格 去除中间多余的空格保留一个
  let searchArray = searchKeywords.trim().replace(/\s+/g, " ").split(splitStr)

  searchArray.forEach((keyword) => {  //循环关键词数组
    if (keyword && text.indexOf(keyword) !== -1) {
      let regHtml = new RegExp("\<.*?\>", "ig"); //定义html正则
      let dealHtml = text.match(regHtml);  //符合的html定义一个数组
      let num = -1;
      text = text.replace(regHtml, '{~}'); //用一个特殊字符进行替换
      text = text.replace(new RegExp(keyword, 'g'), `<code>${keyword}</code>`);
      //把原来~代表的html标签，再替换回来
      text = text.replace(/{~}/g, function () {
        num++;
        return dealHtml[num];  //进行依次替换
      });
    }
  })
  return text
}