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

问题背景：

网上搜索关于搜索结果高亮显示，基本上都是单一关键字搜索，或者多关键字搜索，但是没有解决
输入英文字符时，把html标签渲染出来的问题，比如在进行多关键字搜索时，可能会进行a;s的搜索，
就可能把span标签进行解析再高亮显示，这样就会出现数据渲染时带出html的高亮。

报错如图所示:

解决思路

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

解决方法

通过搜索归纳，我们可以使用如下的方法解决多关键字搜索结果高亮的问题。

<div id="content">
    aaaaassssaaassddddwwwssaaa
</div>

<script>
    function hightLight() {
        let textEle = document.getElementById('content');  //获取文本内容；
        var text = textEle.innerHTML
        let searchKeywords = 's;a;w';  //为了方便演示，这里关键词直接写死
        searchKeywords = searchKeywords.replace(/;|；/g, ',');
        let searchArray = [];
        searchArray = searchKeywords.split(',');//把关键词列为一个数组

        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'), `<span style="color:#1890FF;">${keyword}</span>`);
                //把原来~代表的html标签，再替换回来
                text = text.replace(/{~}/g, function () {
                    num++;
                    return dealHtml[num];  //进行依次替换
                });
            }
        })

        textEle.innerHTML = text;

    }
    hightLight();
</script>

效果图

可以看到把所有的英文都高亮的出来，并且没有显示html.