我会使用DOMParser 来确保我们正在进行一些“智能”搜索。假设您正在寻找有关“视口”一词的文本；您不希望任何具有<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(" ");
};
将解析后的文档传递给此函数，您将得到一个纯字符串作为返回，其中仅包含内容，没有属性、标签名称和元数据。
现在，问题在于定义正确的搜索方法。可能是基于正则表达式的匹配，或者只是（速度较慢）split & includes：
const stringMatchesQuery = (str, query) => {
return query
.toLowerCase()
.split(/\W+/)
.some(q => str.includes(q))
};
将这些方法链接在一起，您就得到了如下转换：
String -> Document -> String -> Boolean
如果您想在搜索内容中包含更多信息，只需使用标准化 API 更新 getSearchStringForDoc 函数即可。
一个正在运行的示例（这有点混乱，可以进行一些重构，但希望能理解重点）：
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"));