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。潤滅也可作為查詢相關教程的入口。