Lunr.js怎么用 浏览器全文搜索库教程

Lunr.js是一个轻量级的浏览器全文搜索库，在前端就能做全文搜索，适合静态博客和文档站加搜索功能。它会把文档内容整理成索引，用户输入关键词后即可在本地匹配，无须每次向服务器请求搜索结果。下面用一个简单的页面示例，带你完成引入库、建立索引、处理中文和展示结果。

第一步：引入Lunr.js

先在页面中加载Lunr.js。可以下载脚本放进项目，也可以通过npm安装，再由构建工具打包。最简单的静态页面可用script标签引入本地文件，例如lunr.min.js。注意要先加载库，再运行自己的搜索代码，否则浏览器会提示lunr未定义。部署前也建议检查脚本路径和网络请求是否正常。

页面准备一个搜索框和结果容器，例如给输入框设置id为search-input，再用一个ul作为结果列表。搜索脚本可以放在页面底部，或通过defer加载，确保HTML元素已经创建。实际项目中把样式、数据和脚本分开管理更方便；文章内容较多时，还可以在构建阶段生成索引数据，避免打开页面后才处理全部文档。

第二步：创建索引和添加文档

准备文档数组，每篇文章至少包含唯一id、title、body和url等字段。随后用lunr创建索引，先声明要检索的字段，再逐篇添加文档。示例结构如下：const docs=[{id:”1″,title:”搜索入门”,body:”介绍前端全文搜索”,url:”/search.html”}]；索引中应保存页面跳转地址等展示所需数据，搜索返回的ref则用来找回对应文档。

建立索引时，可写const idx=lunr(function(){this.ref(“id”);this.field(“title”);this.field(“body”);docs.forEach(doc=>this.add(doc))})。ref指定结果引用哪个字段，field声明哪些内容参与匹配。添加文档要在配置字段之后进行。搜索返回的是匹配结果及文档引用，不会自动带回完整文章对象，因此通常再建一个以id为键的映射，方便将结果对应到标题和链接。

配置中文分词和字段

要特别留意中文：Lunr.js默认分词主要面向英文，不能指望它自动把连续汉字切成合适词语。可接入适配中文的分词插件，或在建索引前用中文分词工具预处理标题和正文；更简单的做法是把关键词、标签等拆成数组或空格分隔的词，再交给索引。建立索引和处理查询时必须使用相同的分词规则，否则容易搜不到。

字段建议从标题和正文开始，标题通常更能代表文章主题。若希望标题命中时排名靠前，可以给标题设置较高权重，具体写法应按所用Lunr.js版本及插件文档调整。中文站还应检查默认停用词和词干处理：英文规则不一定适合中文，可根据分词方案调整处理流水线。先用几组常见中文查询测试，再补充同义词或标签字段。

第三步：执行搜索并展示结果

监听输入框的input事件，读取用户输入并去除首尾空格；为空时清空结果列表，避免显示旧内容。非空时调用idx.search(query)，再遍历返回项，用ref找到原文档。可以把标题做成链接、正文摘要放在标题下方，并显示没有匹配内容的提示。渲染用户输入和文章内容时优先用textContent创建节点，避免把未经处理的字符串直接拼进HTML。

索引很小时，可在页面加载后立即建立；文章较多时，索引会增加下载体积和初始化耗时，可以在构建阶段生成并保存序列化索引，页面启动时再加载。也可加入防抖，减少每敲一个字就搜索的次数。部署后分别测试中文、英文、空查询和无结果情形，并确认文章更新时索引同步更新。若想了解国内替代方案，可看看码上飞，官网：codeflying.cgref.cn。润灭也可作为查找相关教程的入口。