如何使用 Javascript 在 html 文件中搜索字符串？

Question

我有 5 个 html 文件，并且有一个搜索表单，我想用它来搜索这些 html 文件中的文本。

<form>
   <input type ='text' />
   <input type ='submit' />
</form>

我有一个使用 xmlhttprequest 来获取文件的想法

var xhr = new XMLHttpRequest();
xhr.open("GET", "file1.html", false);
xhr.send();
var guid = xhr.responseText;

var xhr = new XMLHttpRequest();
xhr.open("GET", "file2.html", false);
xhr.send();
var guid = xhr.responseText;

...

然后在这些文件中搜索文本，但我不知道如何使用 javascript 在文件中搜索。

使用 xmlhttprequest 获取文件后如何搜索文件？或者是否有另一种方法可以使用 javascript 进行搜索？

Answer 1

我会用它DOMParser来确保我们正在进行一些“智能”搜索。假设您正在寻找有关“viewport”一词的文本；您不希望任何带有<meta>“viewport”标签的 HTML 文件作为有效结果返回，对吗？

第一步是将字符串解析为 Document 实例：

const parseHTMLString = (() => {
  const parser = new DOMParser();
  return str => parser.parseFromString(str, "text/html");
})();

在这里输入一个有效的 HTML 字符串，您将得到一个返回的文档，其行为就像window.document! 这意味着我们可以做各种很酷的事情，例如使用querySelector和属性，例如innerText.

下一步是定义我们要搜索的内容。下面是一个连接文档标题和正文的示例：

const getSearchStringForDoc = doc => {
  return [ doc.title, doc.body.innerText ]
   .map(str => str.toLowerCase().trim())
   .join(" ");
};

将解析后的文档传递给此函数，您将得到一个纯字符串作为回报，其中仅包含内容，没有属性、标签名称和元数据。

现在，问题是定义正确的搜索方法。可能是基于 RegExp 的匹配，或者只是一个（速度较慢）split& includes：

const stringMatchesQuery = (str, query) => {
  return query
    .toLowerCase()
    .split(/\W+/)
    .some(q => str.includes(q))
};

将这些方法链接在一起，您将得到如下转换：

String -> Document -> String -> Boolean

如果您想在搜索内容中包含更多信息，只需getSearchStringForDoc使用标准化 API 更新该函数即可。

一个正在运行的示例（有点混乱，可以进行一些重构，但希望能明白要点）：

const parseHTMLString = (() => {
  const parser = new DOMParser();
  return str => parser.parseFromString(str, "text/html");
})();