Vue关键词搜索高亮-技术圈

Vue关键词搜索高亮

web前端开发

共 1296字，需浏览 3分钟

· 2020-11-25

来源 | 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-highlight

2、引入
vue-search-highlight本身是一个组件，在需要搜索高亮的页面里引入后，像正常的组件一样使用即可。

import SearchHighlight from 'vue-search-highlight'// 注册为子组件components: {  'search-highlight': SearchHighlight},

1）、props

2)、events
组件有两个重要的数据，即搜索匹配数量和当前关键词索引，会通过$emit弹射出来，如果需要展示搜索索引和匹配总数（比如 3 / 16），你可以监听组件的这两个事件：

3）、methods
你可以通过ref引用组件，直接调用组件内部的一些方法：

使用示例：

  class="search-highlight"  ref="search"  @current-change="currentChange"  @mactch-count-change="matchCountChange"  :content="content"  :keyword="keyword">

三、组件代码实现

vue-search-highlight组件代码如下：

本文完~