个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 14:59:05 24 4
gpt4 key购买 nike

我有 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/

24 4 0
文章推荐： C# List removeall 在谓词中接受两个参数？
文章推荐： c - C 中二维数组中一行的平均值？
文章推荐： c# - Excel 自动化 Windows 服务
文章推荐： C 读取通过管道传入的文件内容
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com