正则匹配html-用正则表达式实现搜索高亮功能

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

场景

有这样一个场景，页面上有一个表格，表格的内容是根据前端的数据渲染出来的，表格的后面有输入表单元素正则匹配html，列表的内容是通过触发输入风暴实时搜索，列表重新渲染。

一切都运行得那么和谐，但是突然三天，产品过来了，说要实现搜索的高亮功能，就是根据搜索框的内容，在页面上高亮搜索到的东西。

乍一看，这个要求很简单。 可以直接使用JavaScript的String.prototype.replace来实现，例如：

function formatSearch(origin: string, search: string) {
    return origin.replace(new RegExp(search, 'ig'), function($1) {
        return `${$1}`;
    });
}

上面的代码可以给字符串添加一个HTML标签，然后自定义.light的样式。

但是如果要处理的字符串是 HTML 字符串怎么办？

计划

HTML字符串和普通字符串的区别在于它上面有一些特殊字符，比如，？正则匹配html，/，所以我们在做正则匹配的时候，需要排除这样的情况，如何排除呢？

这给我们带来了两个正则表达式：(?