前端页面文本搜索及高亮

[Dream4ever]

需求描述

同事之前做的电子书实现了文本搜索的功能，自己能不能实现得更优雅一些呢？之前的搜索方案，是获取后端数据库的查询结果，这样许多人同时搜索的话，服务器的压力就会很大。

自己想了想，这个搜索功能和其它业务没有耦合，那么就完全可以做成纯前端的搜索。

方案调研

两大搜索方向：官方文档 + 实例教程

关键字清单

• full text search
• 全文搜索
• 前端 全文搜索
• js 文本 搜索 高亮
• js search highlight -> mark.js
• 全文搜索引擎 Elasticsearch 入门教程
• 小型静态站（包含中文内容）全文搜索方案研究

入选方案

mark.js

• GitHub 主页：https://github.com/julmot/mark.js
• 方案概况：高亮显示所搜索的文本。

排除方案

• 2018-05-17：又看了一下之前研究的几个方向，中文不需要分词，否则一旦分词的结果和搜索的关键字刚好错位那就麻烦了。那么 lunr.js 和结巴分词就都不考虑了。

• 2018-05-15：又看了一下 Algolia 的 收费方案，如果要上架一批电子书的话，显然很容易就会超出免费版的用量，那看来还是得找能够架设在自己服务器上的免费方案。

• search-index：不支持中文搜索，demo 也很潦草，不好用。

• lunr.js：中文分词没有很好的插件。

• 结巴分词：纯前端搜索，无需分词。

• Algolia：免费版的功能有限，无法实际应用。

应用过程

要点总结