使用lunr.js及Lunr-languages实现静态HTML中文全文搜索-CSDN博客

本文链接：https://blog.csdn.net/weixin_52297807/article/details/142072182

静态HTML如何实现中文的全文搜索功能

文章目录

静态HTML如何实现中文的全文搜索功能
前言
一、Lunr.js和Lunr-language是什么？
二、踩坑过程
三、解决方案

前言

记录探索实现静态HTML中文的全文搜索历程
Github地址：https://github.com/MihaiValentin/lunr-languages

一、Lunr.js和Lunr-language是什么？

Lunr.js 是一个轻量级的 JavaScript 库，专门用于在浏览器中实现全文搜索功能。它允许你在前端创建一个搜索索引，使用户能够在网页内容中快速找到与关键词匹配的内容。Lunr.js 主要用于静态网站或单页应用中，以便在不依赖后端服务的情况下提供搜索功能

但是，Lunr.js 的核心库仅支持英文搜索，而 Lunr-language 是一系列插件或扩展库，用于添加对其他语言的支持。这些插件包括特定语言的分词、词干提取和其他自然语言处理功能，使 Lunr.js 能够处理非英语文本。

二、踩坑过程

Lunr-language中的lunr.zh.js是不能在静态网页直接用的

lunr.zh.js用到了nodejieba分词，需要使用node.js提供运行环境，不能在浏览器中直接运行，否则会报错

Uncaught TypeError: nodejieba.cut is not a function
at lunr.zh.tokenizer (lunr.zh.js:98:1)
at lunr.Builder.add (lunr.js:2479:1)
at lunr.Builder. (xxx)
at lunr (lunr.js:53:1)
at XMLHttpRequest. (xxx)

三、解决方案

在issue里有人针对这个问题给出了解决方案，使用Intl.Segmenter替代nodejieba，并提交了代码。在这里插入图片描述
代码分支链接：点击跳转github

对lunr.zh.js进行测试，测试代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../test/lunr/lunr-0.7.0.min.js"></script>
    <script src="../lunr.stemmer.support.js" charset="UTF-8"></script>
    <script src="../lunr.zh.js" charset="UTF-8"></script>
    <title>中文搜索</title>
</head>

<body>
    <p>测试中文搜索</p>
    <script>
        /* init lunr */
        var idx = lunr(function () {
            // use the language (zh)
            this.use(lunr.zh);
            // then, the normal lunr index initialization
            // this.field('title', { boost: 10 })
            this.field('text')

            /* add documents to index */
            this.add(
                {"type": 0, "text": "\u4f60\u5df2\u6dfb\u52a0\u4e86\u4f59\u9b45\uff0c\u73b0\u5728\u53ef\u4ee5\u5f00\u59cb\u804a\u5929\u4e86\u3002", "is_send": 0, "avatar_path": "", "timestamp": 1613707281, "is_chatroom": 0, "displayname": "", "id": 5986869003124430289, "token": "ad4747bac520e8b69b5259aa1612e06e"}
            );
            this.add({"type": 1, "sub_type": 0, "is_send": 0, "timestamp": 1613707318, "id": "1163201509197690610", "text": "\u5f00\u59cb\u73a9\u5fae\u4fe1\u4e86\uff1f", "avatar_path": 1, "token": "8959fef627b7b56e875c5b58edabe359"});
        });

        console.log('Search for `添加`: ', idx.search('添加'));
        console.log('Search for `微信`: ', idx.search('微信'));
        console.log('Search for `大哥`: ', idx.search('大哥'));
    </script>
</body>

</html>