纯前端搜索：不依赖后端的站内检索

为什么需要纯前端搜索

静态博客没有服务器，也就没有现成的搜索接口。常见的方案是接入第三方搜索服务，但会有广告、依赖和隐私问题。对文章量不大的个人站，纯前端搜索是性价比最高的选择。

实现思路

核心思路只有三步：

构建时把所有文章的标题、标签、摘要写入 search-index.js；
搜索页加载这个索引文件；
输入关键词时在前端过滤并渲染结果。

索引文件长这样：

var SEARCH_INDEX = [
  {
    slug: "frontend-search",
    title: "纯前端搜索",
    tags: ["前端", "搜索"],
    summary: "不依赖后端的站内检索方案"
  }
];

过滤逻辑

过滤用 indexOf 就足够了，注意统一转成小写再比较：

function search(keyword) {
  keyword = keyword.trim().toLowerCase();
  if (!keyword) return [];
  return SEARCH_INDEX.filter(function (item) {
    return (
      item.title.toLowerCase().includes(keyword) ||
      item.summary.toLowerCase().includes(keyword) ||
      (item.tags || []).some(function (t) {
        return t.toLowerCase().includes(keyword);
      })
    );
  });
}

优点与局限

优点：零后端、零依赖、即时响应、可离线使用；
局限：无法做分词和模糊匹配，文章多了以后索引会变大。

对于几十篇到几百篇的博客，这套方案完全够用。本站的搜索页就是这样一个实现。