搜索网站 HTML 文件的搜索栏答案

【问题标题】：Search bar that searches the site's HTML files搜索网站 HTML 文件的搜索栏
【发布时间】：2018-07-31 17:24:51
【问题描述】：

我目前正在使用 Neocities 构建我的网站。这样做的原因是因为它是我发现的少数几个没有有限网站构建器的网站之一，您可以自己编写网站代码，并且为您支付服务器费用。这样做的缺点是该站点故意不支持 PHP；我还没有得到明确的答案，但我离题了。

我想建立一个搜索栏来搜索我网站的 HTML 文件。我认为如果没有 PHP，这并不难。文件已经在那里，它只需要搜索它们。问题是，如果不是通过 PHP 完成，它是通过 Javascript 完成的，我不知道。我想知道是否有人可以指导我将其实施到我的网站中。我不想使用像谷歌自定义搜索这样的引擎，因为他们把水印放在栏中，看起来很不专业。

【问题讨论】：

您无法使用普通的 javascript 搜索文件。您必须为此手动编写一个 http 请求，否则您将使用某种 ajax 库
"文件已经存在"...在服务器上，但是 JavScript 在浏览器中运行并且只知道它所在的页面（它被下载到用户设备上的行程序，其中JavaScript 执行）。它对（现在是远程的）服务器上的页面一无所知，除非它向服务器发出 HTTP 请求（例如通过 ajax）以找出文件是什么，然后再请求下载并检查每个文件它想通过搜索。那将是非常缓慢低效的。为此，您需要一个服务器端脚本（例如 PHP 或 ASP.NET）。
JavaScript 是客户端，因此您要么需要一个导入的 json 对象，该对象具有对每个不同页面的引用，要么必须编写一个 PHP 页面来处理检查哪些页面可用。
我将如何处理 JSON 对象？
Ups，一个不应该出现的分号：{"title": "This is the title", "body": "this is the body-text", "url": "example .com/this-is-the-url-to-the-page.html"}。您需要一组对象（每页一个对象）。您希望使其可搜索的所有信息的键/值。

标签： javascript

【解决方案1】：

搜索通常在后端使用数据库完成。如果你真的需要搜索，你首先需要一个后端。另一种方法是在 JavaScript 文件中编写关键字->页面映射，但这不是很动态，并且不会匹配很多搜索词。

【讨论】：

【解决方案2】：

您至少有两个选择：Lunr 和 search-index。它们都可以在浏览器中运行。

我正在做一些关于搜索索引的工作，所以这是我最了解的，但我认为它们都适合您的用例。

正如其他人所说，您需要解决如何将所有页面的内容添加到一次搜索中。我想最简单的方法是，如果您可以将内容作为静态页面和提供给搜索引擎的 JSON 对象数组。然后，您可以将搜索索引存储在 leveldb (Chrome) 或 indexeddb (Firefox) 中，直到下次重复用户查看该网站。

如果您有该网站的链接并想尝试类似I'm in the process of making a library for it 的解决方案。

到目前为止，我已经掌握了爬虫运行的基础知识。这意味着您必须为脚本提供您想要抓取的所有 URL，但对于一个易于管理的小型站点。稍后我会让它找到并抓取 url。

const cheerio = require('cheerio')
url = 'https://example.com/a-page-to-crawl.html'
fetch(url)
  .then(function(response) {
    return response.text()
  })
  .then(function(html) {
    const $ = cheerio.load(html)
    var title = $('title').text()
    var body = $('body').text()
    var item = {url: url, title: title, body: body}
    console.log(item)
})

该文件需要使用 brfs 插件进行浏览：

browserify -t brfs main.js --debug -o bundle.js

【讨论】：