使用fuse.js进行搜索

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

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

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

代码待整理

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,187评论 0 3
  • JavaScript语言精粹 前言 约定:=> 表示参考相关文章或书籍; JS是JavaScript的缩写。 本书...
    微笑的AK47阅读 3,728评论 0 3
  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 10,050评论 0 5
  • 揭开正则表达式的神秘面纱(转) 关闭高亮 [原创文章,转载请保留或注明出处:http://www.regexlab...
    螃蟹六步郎阅读 2,755评论 0 0
  • 舔狗们的爱情,那些诗句中的憧憬与失落。 爱情,是个永恒的话题,男男女女魂牵梦绕的梦中情人,见到他/她的一刹那,空气...
    连岛笑笑生阅读 2,865评论 0 0

友情链接更多精彩内容