当前位置：首页 > article >正文

纯前端全文检索的两种实现方案：ElasticLunr.js 和 libsearch

article 2025/3/13 20:55:39

纯前端全文检索的两种实现方案：ElasticLunr.js 和 libsearch

在前端开发中，实现全文检索功能可以显著提升用户体验，尤其是在处理大量文本数据时。本文将介绍两种流行的纯前端全文检索方案：ElasticLunr.js 和 libsearch。这两种方案各有特点，适用于不同的场景。

1. 使用 ElasticLunr.js 实现纯前端全文检索

方案特点

基于 Lunr.js 的扩展：支持字段搜索、查询时加权和类似 Elasticsearch 的评分机制。
高性能和灵活性：适合需要高性能和灵活搜索功能的场景。
支持中文分词：结合中文分词库（如 nodejieba）可以实现对中文的支持。

实现步骤

1.1 引入 ElasticLunr.js

在 HTML 文件中引入 ElasticLunr.js：

<script src="https://cdn.jsdelivr.net/npm/elasticlunr@latest/elasticlunr.min.js"></script>

注意：如果链接无法访问，请检查链接的合法性或尝试其他 CDN。

1.2 创建索引并添加文档

const index = elasticlunr(function () {
    this.addField('title'); // 添加需要搜索的字段
    this.addField('body');
    this.setRef('id'); // 设置唯一标识字段
});

const documents = [
    { id: '1', title: 'JavaScript 全文搜索引擎', body: 'ElasticLunr.js 是一个轻量级的 JavaScript 全文搜索引擎……' },
    // 更多文档
];

documents.forEach(doc => index.addDoc(doc)); // 将文档添加到索引中

1.3 执行搜索

const results = index.search('搜索关键词');
console.log(results); // 输出搜索结果

1.4 优化搜索结果

可以通过设置字段权重来优化搜索结果：

index.addFields({
    title: { boost: 10 }, // 提高标题字段的权重
    body: { boost: 1 }
});

1.5 支持中文分词

如果需要支持中文，可以结合 nodejieba 等中文分词库进行预处理：

// 示例：使用 nodejieba 进行中文分词
const jieba = require('nodejieba');
const text = "这是一个示例文本";
const words = jieba.cut(text);
console.log(words); // 分词结果

2. 使用 libsearch 实现纯前端全文检索

方案特点

简单易用：无需预建索引，适合轻量级和简单需求的项目。
支持多种搜索模式：包括全词匹配、前缀匹配和自动补全。
无需额外依赖：直接引入即可使用。

实现步骤

2.1 引入 libsearch

在 HTML 文件中引入 libsearch：

<script src="https://cdn.jsdelivr.net/npm/libsearch@latest/libsearch.min.js"></script>

注意：如果链接无法访问，请检查链接的合法性或尝试其他 CDN。

2.2 准备文档数据

const documents = [
    { title: 'JavaScript 全文搜索引擎', body: 'libsearch 是一个轻量级的 JavaScript 全文搜索引擎……' },
    // 更多文档
];

2.3 执行搜索

const results = libsearch.search(documents, '搜索关键词', doc => doc.title + ' ' + doc.body);
console.log(results); // 输出搜索结果

2.4 配置搜索选项

可以通过配置选项来调整搜索行为：

const results = libsearch.search(documents, '搜索关键词', doc => doc.title + ' ' + doc.body, {
    mode: 'autocomplete', // 支持自动补全
    caseSensitive: false  // 不区分大小写
});

2.5 优化用户体验

可以结合输入框实现实时搜索，提升用户体验：

<input type="text" id="search-input" placeholder="搜索关键词">
<div id="search-results"></div>

<script>
    document.getElementById('search-input').addEventListener('input', function () {
        const keyword = this.value;
        const results = libsearch.search(documents, keyword, doc => doc.title + ' ' + doc.body);
        const resultsDiv = document.getElementById('search-results');
        resultsDiv.innerHTML = results.map(result => `<div>${result.title}</div>`).join('');
    });
</script>