如何用JavaScript制作HTML解析器_Javascript_Html_Node.js_Parsing

如何用JavaScript制作HTML解析器

javascript html node.js parsing

如何用JavaScript制作HTML解析器,javascript,html,node.js,parsing,Javascript,Html,Node.js,Parsing,我对JavaScript非常陌生，我的任务是制作一个HTML解析器，它可以遍历HTML文件的行，找到（比如）ID标记，然后将其与excel工作表（或CSV）匹配，然后用电子表格/CSV文件中的值交换ID 注：我不是要求你为我做这件事；只是我已经查看了加载，但我不知道我需要什么样的解析器。如果方向正确，那就太好了，谢谢下面是一个带有ID的HTML文档示例：（ID的前缀是#IDHERE#，因为我还不知道如何在没有解析器的情况下为ID添加前缀）这将是最终结果： <html> <

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

注：我不是要求你为我做这件事；只是我已经查看了加载，但我不知道我需要什么样的解析器。如果方向正确，那就太好了，谢谢

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

这将是最终结果：

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


//标题数据在这里
你好，世界
这是一个考验

我知道这没有多大帮助，但我确实看了一下，但我找到的那些都与我需要的不一样。

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

如果您的脚本应该处理外部HTML，那么您仍然可以使用上述方法。目前有一个解决方案

如果在服务器上，则使用节点和html解析器模块。

您可以执行以下操作：

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

})();

（函数（）{
对于（var i=0；i


显然，要使上述方法发挥作用，您的数据需要驻留在一个数组中，其中每个元素都有必要的值（ID
和Content
）
这将适用于简单的HTML标记，但您将遇到（例如）嵌套DIV的问题。无论如何，它可能会让您了解如何用javascript实现这一点。
正如一位评论者所说，您已经发明了HTML模板的概念。人们已经编写了几十个甚至数百个模板引擎
要做到这一点，您不需要“解析HTML”。基本上，您将HTML视为一个带有神奇占位符的大字符串（在您的例子中，介于#
之间），而模板引擎本质上是一种宏处理器，用于替换字符串。您可以对生成的插值HTML执行任何操作：将其保存到文件中，或将其发送到浏览器，或者如果您已经在浏览器中，则将其粘贴到DOM中
这样编写模板（假设这是一个名为templateSource
的字符串）：
然后编译模板并运行它：
var template = Handlebars.compile(templateSource);
var result = template(data);

生成的插值HTML将显示在result
中
根据您是希望在类似服务器的节点中执行此操作，还是在浏览器中执行此操作，会有一些细微的差异
现在，JS程序员做的“编程”越来越少，而更多地调用API。一项关键技能是找到已经编写好的东西，找出如何使用它，并将它与其他组件粘合在一起。
我不会构建实际的解析器。也许您可以创建一个DIV元素，将文档的innerHtml放入其中，然后遍历DOM来查找元素。编写一个真正的解析器并不容易。目前为止使用@GolezTrol，您不需要编写解析器，只需处理DOM树即可。我不确定您的意思是什么？HTML文档将是一个母版页，然后ID将被交换为值，这将使用许多表中的值生成许多不同版本的母版，我只是尝试从一个小的角度开始。这称为模板化，它有无数的库，比如mustache。@lexicore我看过很多类型，尝试任何东西我只是感到困惑，老实说我不是一个JavaScript程序员，所以我试着自学，我有一些基础知识，但这有点超出我的能力，这就是为什么我来到这里，我（老实说）不知道从哪里开始我将要使用节点。请看一下这里的节点模块：我看了这个，但这是我感到困惑的地方，如何让它从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的模块，例如，但我宁愿使用CSV，因为它更易于处理。别忘了，谷歌是你的朋友：）好的，谢谢，我们会调查的！
(function(){
    for ( var i = 0; i < YourData.length - 1; i++ ) {
        document.getElementById(YourData[i].ID).innerHtml = YourData[i].Content;
    }

})();

<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);