实现关键词高亮:在HTML字符串中匹配“跨标签关键词”
2020-11-23
很久之前(好像刚好是一年前)写过一个Vue组件,可以匹配文本内容中的关键字然后高亮,类似浏览器搜索结果。实现原理是,将文本字符串中的关键字搜索出来,然后使用特殊的标签(本文示例使用font标签)包裹关键词替换匹配内容,最后得到一个HTML字符串,渲染该字符串并在font标签上使用CSS样式即可实现高亮的效果。当时的实现过于简单,没有支持接收HTML字符串作为内容进行关键词匹配。这两天有同学问到,就又思考了这个问题,发现并不是那么麻烦,写了几行代码解决了一下。