如何在 JavaScript 中制作 HTML 解析器 [重复]答案

【问题标题】：How to make a HTML Parser in JavaScript [duplicate]如何在 JavaScript 中制作 HTML 解析器 [重复]
【发布时间】：2015-02-02 07:36:14
【问题描述】：

我对 JavaScript 非常陌生，我的工作任务是制作一个 HTML 解析器，它可以遍历 html 文件的行并找到一个 ID 标签，然后将其与 Excel 表（或 CSV）匹配，然后将 ID 与电子表格/CSV 文件中的值交换。

注意：我不是要你为我做这件事；只是我浏览了负载，但我只是不知道我需要正确的解析器。一个正确方向的点将非常感谢。

这是一个带有 ID 的 HTML 文档示例：（ID 以 #IDHERE# 为前缀，因为我不知道如何在没有解析器的情况下为 ID 添加前缀）

<html>
  <head>
    //Header Data Here
  </head>
  <body>
    <h1>#ID_MainTitle#</h1>
    <p>#ID_Para1#</p>
  </body>
</html>

这是一个表 (Lua)（可以是 excel 等，但仅作为示例）：

{
  ["ID_MainTitle"] = "Hello World",
  ["ID_Para1"] = "This is a test!",
}

这应该是最终结果：

<html>
  <head>
    //Header Data Here
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a test!</p>
  </body>
</html>

我知道这没有多大帮助，但我确实看过，但我发现的那些看起来都不像我需要的。

【问题讨论】：

我不会构建一个真正的解析器。也许你可以只创建一个DIV元素，将文档的innerHtml放入其中，然后遍历DOM找到元素。编写一个实际的解析器并不容易。
What have you tried 到目前为止？我同意@GolezTrol，你不需要编写解析器，你应该只处理 DOM 树。
我不确定你的意思？ HTML 文档将是一个母版页，然后 ID 将被交换为值，这将使用来自许多表的值吐出许多不同版本的母版，我只是从小处着手。
这被称为模板，它有无数的库，例如，看看 mustache。
@lexicore 我看过很多类型，尝试了任何我只是感到困惑的东西，老实说我不是 JavaScript 程序员，所以我正在尝试自学，我有基础知识，但这是一个超出我的范围，这就是我来这里的原因，我（老实说）不知道从哪里开始

标签： javascript html node.js parsing

【解决方案1】：

您的脚本会在浏览器中运行还是在服务器上运行？如果它在浏览器中运行，那么您需要解析相同的页面还是外部 HTML？如果是同一个页面，我不会做解析器，而是处理 DOM。 IE。用特定的 ID 将要替换的 DIV 或 SPAN 标记括起来，然后在 DOM 中查找它们并替换。

如果您的脚本应该处理外部 HTML，那么您仍然可以使用上述方法。在Parse a HTML String with JS有一个解决方案@

如果它在服务器上，则使用节点和 html-parser 模块。

【讨论】：

我要使用Node
那就看看这里的node模块：npmjs.org/package/html-parser
我看了这个，但这是我感到困惑的地方，我如何让它从 HTML 文件和 Excel 工作表中读取并将 ID 与 Excel 工作表的第一列匹配然后交换id 与第二列中的值，如果需要，使用 CSV 文件代替？我只是绝望
打开文件：fs = require('fs'); fs.readFile('/yourpath/your.html', 'utf8', function (err,data) { if (err) { return console.log(err); } console.log('Content: ' + data); }); 有一些模块可以处理 excel，例如npmjs.org/package/excel-parser 但我宁愿使用 CSV，因为它更易于处理。别忘了，谷歌是你的朋友 :)
好的，谢谢，会调查的！

【解决方案2】：

你可以这样做：

(function(){
    for ( var i = 0; i < YourData.length - 1; i++ ) {
        document.getElementById(YourData[i].ID).innerHtml = YourData[i].Content;
    }

})();

显然，要使上述方法起作用，您的数据需要驻留在一个数组中，其中每个元素都有必要的值（上例中的ID 和Content）。

这适用于简单的 HTML 标记，但您会遇到（例如）嵌套 DIV 的问题。无论如何，它可以让您了解如何在 javascript 中执行此操作。

【讨论】：

【解决方案3】：

正如一位评论者所说，您重新发明了 HTML 模板的概念。人们已经编写了数十个甚至数百个模板引擎。

为此，您无需“解析 HTML”。您本质上将 HTML 视为带有魔术占位符的大字符串（在您的情况下，# 之间的东西），并且模板引擎本质上是一种执行字符串替换的宏处理器。您可以对生成的内插 HTML 执行任何操作：将其保存到文件中，或将其发送到浏览器，或者如果您已经在浏览器中，请将其粘贴到 DOM 中。

这样写你的模板（假设这是一个名为templateSource的字符串）：

<html>
  <head>
    //Header Data Here
  </head>
  <body>
    <h1>{{ID_MainTitle}}</h1>
    <p>{{ID_Para1}}</p>
  </body>
</html>

定义插值的值：

data = {
  ID_MainTitle: "Hello World",
  ID_Para1: "This is a test!"
};

然后编译模板并运行它：

var template = Handlebars.compile(templateSource);
var result = template(data);

生成的内插 HTML 将位于 result。

根据您是要在节点等服务器上还是在浏览器上执行此操作，存在细微差别。

如今，JS 程序员做的“编程”越来越少，而更多地调用 API。一项关键技能是找到已经编写好的东西并弄清楚如何使用它并将其与其他组件粘合在一起。

【讨论】：