使用fuse.js进行搜索

项目使用了react+gatsby进行生产静态html文件,而gatsby官方推荐的elasticlunr搜索插件对中文并不友好,
并且在对比后发现虽然是可以在gatsby-config文件中配置,但与配置fuse.js差距不大

fuse.js
之所以能匹配中文其实是通过设置模糊搜索实现的,相对的会导致英文搜索结果特别多,因为出现相同的字符都会视为匹配
模糊搜索程度通过threshold大小决定
includeMatches会使搜索结果出现匹配字段的下标,通过这个可以设置高亮
shouldSort使搜索结果按匹配程度排序,但在同一篇文章中的匹配下标依然是按顺序输出,所以需要做处理

设置高亮具体流程为:
首先,文章的搜索结果需要截取一段存在高亮部分,而不是显示全部,
同一篇文章fuse.js的搜索结果没有排序,截取的一段最终定为一篇文章中匹配长度最长的字段,
并截取这个字段往前的10个字符(除往前不足10个字符),再往前就不需要
把文章切割成数组,通过循环设置高亮

代码待整理

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 6,255评论 0 2
  • JavaScript语言精粹 前言 约定:=> 表示参考相关文章或书籍; JS是JavaScript的缩写。 本书...
    微笑的AK47阅读 428评论 0 3
  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 3,668评论 0 5
  • 揭开正则表达式的神秘面纱(转) 关闭高亮 [原创文章,转载请保留或注明出处:http://www.regexlab...
    螃蟹六步郎阅读 149评论 0 0
  • 舔狗们的爱情,那些诗句中的憧憬与失落。 爱情,是个永恒的话题,男男女女魂牵梦绕的梦中情人,见到他/她的一刹那,空气...
    连岛笑笑生阅读 192评论 0 0
  • 你为什么要买LV? 对于这个问题,每个女孩都会陷入沉思。 这不是在谈论购物欲,这是在思考,人生价值,尊严,追求。 ...
    糖小橙童鞋阅读 521评论 0 2
  • 参考代码 概述 数据库是用来长久储存数据的。 发送请求 form 表单提交 缺点:刷新页面 + 用户后退 + 用户...
    bowen_wu阅读 174评论 0 0
  • 有一句话是这样说的,人类的每一个想法,语言和行为都是基于这样或者那样的一种感情,爱或者恐惧。 这一段时间,我一直在...
    寻梦人one阅读 285评论 0 3
  • (这章主宜嘉所以宜嘉来镇楼咯) 有时候,王嘉尔会想,为什么一定非段宜恩不可。 王菲的一首歌大概最能代表段宜恩...
    sonniebaby_阅读 116评论 0 0