【JS】前端关键字高亮，避免破坏HTML结构

近期在更新模板消息群发模块，打算做个素材搜索功能，并且支持关键字高亮。

起初想了下，原理很简单，给相应的关键字加上 再定义个样式即可，

但是在实际测试过程中，发现被搜索的内容是包含 HTML 代码的，盲目的根据关键字搜索可能会破坏原有的HTML结构，一番搜索下，发现如下简便方法，可有效查找纯文本内容然后进行替换：

// 通过正则将 html 标签部分查找出来，并以此为分隔符，分割文本
let templateArray = templateBody.split(/(<[^>]+>)/g);
// 靠正则来分割使结果中包含分隔块
templateArray.forEach((item, index) => {
    // 过滤掉含有 < 符号的（即是html标签的，此处可以优化，用正则来判断）
    if (item.search('<') > -1) {
        return;
    }
    // 对纯文本内容进行替换 添加 span 标签及样式
    templateArray[index] = item.replace(new RegExp(`(${this.keyword})`,'ig'), `$1`);
})
// 最终还原代码段
templateBody = templateArray.join('');

来张效果图

具体原理：

可参照：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/split

靠正则来分割使结果中包含分隔块

如果 separator 包含捕获括号（capturing parentheses），则其匹配结果将会包含在返回的数组中。

var myString = "Hello 1 word. Sentence number 2.";
var splits = myString.split(/(\d)/);

console.log(splits);

上例输出：

[ "Hello ", "1", " word. Sentence number ", "2", "." ]