【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", "." ]

类似文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注