关键词高亮:HTML字符串中匹配跨标签关键词
来源:木马啊 转载自:https://wintc.top/article/59 很久之前写过一个Vue组件,可以匹配文本内容中的关键词高亮,类似浏览器ctrl+f搜索结果。实现方案是,将文本字符串中的关键字搜索出来,然后使用特殊的标签(比如font标签)包裹关键词替换匹配内容,最后得到一个HTML字符串,渲染该字符串并在font标签上使用CSS样式即可实现高亮的效果。 当时的实现过于简单,没有支持接收HTML字符串作为内容进行关键词匹配。这两天有同学问到,就又思考了这个问题,发现并不是那么麻烦,写了几行代码解决一下。 一、匹配关键字:HTML字符串与文本字符串对比 1. 纯文本字符串的处理 对于纯文本字符串,如:“江畔何人初见月?江月何年初照人?”,假如我们想匹配“江月”这个关键字,则匹配结果可处理为: 江畔何人初见月? < font style = "background: #ff9632" > 江月 </ font > 何年初照人? 这样“江月”两个字被font标签包裹,在font标签上应用特殊的背景样式以达到关键字高亮的效果。 2. 对HTML字符串的处理 对于上述例子,如果内容字符串是一个HTML文本: 江畔何人初见 < b > 月 </ b > ?江 < b > 月 </ b > 何年初照人? 对于同样的关键词“江月”,怎样处理它呢?因为关键词中的字在不同的标签内