【无标题】

前端开发技巧：多关键字搜索结果高亮显示的解决方案

在前端开发中，实现多关键字搜索并正确高亮显示搜索结果是一个常见的需求。然而，当输入英文关键字时，往往会出现错误将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
}