使用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 电子...
    阿啊阿吖丁阅读 4,212评论 0 2
  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 2,891评论 0 5
  • 揭开正则表达式的神秘面纱(转) 关闭高亮 [原创文章,转载请保留或注明出处:http://www.regexlab...
    螃蟹六步郎阅读 55评论 0 0
  • 舔狗们的爱情,那些诗句中的憧憬与失落。 爱情,是个永恒的话题,男男女女魂牵梦绕的梦中情人,见到他/她的一刹那,空气...
    连岛笑笑生阅读 84评论 0 0
  • 你为什么要买LV? 对于这个问题,每个女孩都会陷入沉思。 这不是在谈论购物欲,这是在思考,人生价值,尊严,追求。 ...
    糖小橙童鞋阅读 391评论 0 2