vue实现点击高亮效果_Vue关键词搜索高亮

来源 | https://wintc.top/article/18有时候给页面内容添加一个关键词搜索功能，如果搜索结果能够像浏览器搜索一样高亮显示，那找起来就会很明显体验会好很多。本文就介绍一下关键词搜索高亮的实现方案。实现效果大概如下：

可在线预览：http://wintc.top/laboratory/#/search-highlight。

一、实现原理

实现原理很简单：
使用正则匹配出文本内容中的所有关键词，在关键词外包一层内联标签，比如span或者font，通过innerHtml渲染文本。使用CSS控制插入的内联元素样式，并且记录下当前搜索到的结果是第几个，使用不同的样式来展示。 比如文本内容是“江畔何人初见月？江月何年初照人？”，而关键词是“月”，那替换后的字符串可能变为：

江畔何人初见<font style="background: #ff9632">月font>？江<font style="background: #ffff00">月font>何年初照人？

其中匹配的“月”被替换成了月，并且设置font标签的背景色，使得搜索到的第一个“月”(当前关键词)背景变为橘黄色，而第二个“月”背景变为黄色。 本文基于Vue实现了一个组件，并且将组件发布到了npm上，如果你不想自己写组件，可以直接安装使用：vue-search-highlight。
接下来会介绍一下组件vue-search-highlight的使用，然后给出Vue中的搜索高亮的代码实现。

二、vue-search-highlight组件使用

组件需要传入文本content以及关键词keyword，组件会渲染出一个包含content并且关键词被font元素替换的div元素。
组件功能如下：

• 关键词高亮

• 关键词匹配总数以及当前关键词的索引(即是第几个搜索结果)

• 查找上一个、下一个功能，调用相应函数即可跳到上一个或者下一个

使用方法： 1、安装组件，使用npm或者yarn

// 如果使用yarnyarn add vue-search-highlight// 如果使用npmnpm install vue-search-highl