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

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

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

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

使用xmlhttprequest获取文件后如何搜索？或者是否有其他方法使用javascript进行搜索

首先，改变：

<input type ='text' />

---

我会使用

DOMParser

来确保我们正在进行一些“智能”搜索。假设您正在查找关于单词“viewport”的文本；您不希望任何带有

标记“viewport”的HTML文件作为有效结果返回，是吗

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

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的匹配，也可以是（速度较慢的）

拆分

&

包含

：

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

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

String -> Document -> String -> Boolean

如果希望在搜索内容中包含更多信息，只需使用标准化API更新

getSearchStringForDoc

函数即可

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

const htmlString=(
`
标题
一些关于一件有趣事情的文字。
`);
const parseHTMLString=（（）=>{
const parser=new DOMParser（）；
return str=>parser.parseFromString（str，“text/html”）；
})();
const getSearchStringForDoc=doc=>{
返回[
博士头衔，
doc.body.innerText
].map（str=>str.trim（））
.加入（“”）；
};
常量stringMatchesQuery=（str，query）=>{
str=str.toLowerCase（）；
query=query.toLowerCase（）；
返回查询
.split（/\W+/）
.一些（q=>str.includes（q））
};
常量htmlStringMatchesQuery=（str，query）=>{
常量htmlDoc=parseHTMLString（str）；
const htmlSearchString=getSearchStringForDoc（htmlDoc）；
返回stringMatchesQuery（htmlSearchString，查询）；
};
log（“匹配‘视口’：”，htmlStringMatchesQuery（htmlString，“视口”）；
log（“匹配‘有趣’：”，htmlStringMatchesQuery（htmlString，“有趣”）正则表达式可以工作，或者indexOf（）。。。但您需要等待请求完成，然后再尝试处理内容。Google XmlHttpRequest events获取更多信息。@theGleep，如果您有示例或资源获取我想要的内容，请告诉我，但我不理解所有代码，因此我想问您一些事情，如果您不介意的话，输入文本中将插入文本，例如，使用javascript在单击输入提交时生成一个函数，以获取输入文本值，然后搜索所有5个html文件，并查找其中一个html文件中是否存在插入的文本，然后加载包含此文本的文件，例如，从文本输入中获取搜索查询，将侦听器附加到
change
事件并使用
元素.value
。一旦有了匹配的HTML代码段，就可以使用thanks加载它，但是在哪里可以使用包含插入搜索输入的文本的变量呢？如果我想加载包含与插入搜索输入内容匹配的文本的文件，该怎么办？@tommy我已经更新了答案，从文本输入字段获取文本，并将每个文件的内容放入每个对象的“contents”属性中。你可以在那里访问它。
const getSearchStringForDoc = doc => {
  return [ doc.title, doc.body.innerText ]
   .map(str => str.toLowerCase().trim())
   .join(" ");
};

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

String -> Document -> String -> Boolean