前端开发技巧：多关键字搜索结果高亮显示的解决方案
# 前端开发技巧：多关键字搜索结果高亮显示的解决方案
在前端开发中，实现多关键字搜索并正确高亮显示搜索结果是一个常见的需求。然而，当输入英文关键字时，往往会出现错误将HTML标签也渲染成高亮的问题。为了解决这个问题，我们可以采取以下的优化方案。
首先，我们需要将搜索的关键词转换为一个数组，用于逐个匹配和比对文本信息。当发现关键词在文本中存在时，我们需要对其进行高亮显示。但如果之前已经对该文本中的其他关键词进行过高亮处理，并且已经使用了HTML标签进行渲染，此时我们需要将HTML标签转换为特殊的符号，以便后续处理。我们可以将这些特殊符号及其代表内容存储在一个数组中。
接下来，我们可以针对搜索到的关键词进行高亮渲染，使用<code>标签将关键词包裹起来，以实现高亮显示效果。在渲染完成后，我们需要将之前替换成特殊符号的HTML标签再进行替换，逐个还原回原来的HTML标签内容，以保持文本的完整性和正确性。
## 解决代码
```javascript
/**
* 高亮函数
* @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
}
```