我有 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 进行搜索的方法？
最佳答案
我会使用 DOMParser以确保我们正在做一些“智能”搜索。假设您正在寻找有关“视口(viewport)”一词的文本；您不想要任何包含 <meta> 的 HTML 文件标记“视口(viewport)”以作为有效结果返回，你愿意吗？
第一步是将字符串解析为 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 htmlString = (
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The title</title>
</head>
<body>
Some text about an interesting thing.
</body>
</html>`);
const parseHTMLString = (() => {
const parser = new DOMParser();
return str => parser.parseFromString(str, "text/html");
})();
const getSearchStringForDoc = doc => {
return [
doc.title,
doc.body.innerText
].map(str => str.trim())
.join(" ");
};
const stringMatchesQuery = (str, query) => {
str = str.toLowerCase();
query = query.toLowerCase();
return query
.split(/\W+/)
.some(q => str.includes(q))
};
const htmlStringMatchesQuery = (str, query) => {
const htmlDoc = parseHTMLString(str);
const htmlSearchString = getSearchStringForDoc(htmlDoc);
return stringMatchesQuery(htmlSearchString, query);
};
console.log("Match 'viewport':", htmlStringMatchesQuery(htmlString, "viewport"));
console.log("Match 'Interesting':", htmlStringMatchesQuery(htmlString, "Interesting"));关于javascript - 如何使用 Javascript 在 html 文件中搜索字符串？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46816443/