使用 Node.js 解析和修改本地 HTML

Question

我有一个奇怪的问题，可能非常基本。 我对 web 开发和前端的东西很陌生。

前提首先，我唯一真正的 JS 经验是使用 node.js 制作 discord 机器人，以及使用 D3 制作一些基本的 GUI 东西。 我正在尝试为我玩的游戏制作 GitHub 页面 wiki。 在游戏中，有一些单位，我编码为 JSON 文件，以及一个图像文件夹。 我真正想要的是一个基本索引。html 页面，其中包含所有单元的 HTML 页面的链接。 但由于不断添加单位，我不断更新 JSON 所以我希望能够为单位生成 HTML 文件以及自动更新 index.html。

方法由于我真正知道的是 node.js，我一直在尝试使用它来制作 HTML 文件。 我现在要做的是使用 fs 读取 HTML 文件，然后使用 jsdom 将它们解析为我可以使用 jquery 进行编辑的东西。 之后我只想将 jsdom 序列化为字符串并使用 fs 写入文件。 现在我可以使用 jsdom 成功反序列化并使用 fs 将 html 序列化回来。 但我无法编辑实际的 HTML。

问题首先，我完全不知道这是否是完成我所描述的事情的好方法，我仍处于早期阶段，所以欢迎对其他库提出建议或完全重做项目。 我发现与我想做的最接近的事情是 10 年前的 GitHub 片段，不幸的是，我确信其中很多已经过时，我的微不足道的知识无法适应现代 js ： https://gist.github.com/clarkdave/959811 。 我想知道是否有人可以为我做这件事，或者提出一种更好的方法来做我想做的事情。 你可以在这里看到我目前正在尝试做的事情： https://github.com/aayu3/ATBotJSONDependencies

Answer 1

“为了能够生成 HTML 和基于配置、输入和/或数据的自动更新网页，您需要一个模板引擎。您可能不知道，但这就是您的构建已经存在的东西，好吧。你有正确的想法，使用fs来读取你的HTML ，但是你需要再走几步 go 。”

---

1. 读取 HTML 文件，并将读取的 HTML 作为字符串存储在 Node.js 代码库中。
   • “听起来你已经这样做了。”

2. 构建解析引擎
   • “您可以构建一个，或通过 Node.js 模块实现预构建的解析器，您可能会在NPM上找到一些不同的解析器。”

3. 创建一个处理字符串的库

   • “你需要实现一个库，它可以在 HTML 被读取后改变它。你可以实现一个简单的库，为单个网页定制，或者你可以构建一些在使用中更具动态性的东西，你可以为以后的目的重新实现，从语义上讲，它实际上更接近于 API，而不是库。”

4. 构建/实现编译器

   • “您需要实现的最后一件事是“编译器” 。它采用您已更改的 HTML（此时应采用字符串的形式）并将其编译回 HTML。就像解析器一样，您可以实现一个预构建的编译器，或者自己编写。”

---

“大多数人不构建自己的引擎，因为它在经济上不可行。要快速轻松地构建一些东西，使用预先构建的工具和许多已经具有模板引擎的工具效率更高内置于其中，由非常优秀的开源开发人员或有很多钱的公司构建（例如，React 是由 Facebook 构建的）。”

您拥有的选择真的不缺。

---

我列出了一些您可以在下面选择的替代选项：

“包括一个关于构建自己的模板引擎的教程，这被大多数人认为是困难的方式。虽然困难的方式并不总是最糟糕的方式。在这种情况下，选择困难的方式 - 构建自己的模板引擎— 深入了解当代 web 开发人员使用的流行工具的机制，”

---

1. 首先是明显的HTML 模板引擎。 现在Handlebars和 Pug 真的很受欢迎。 模板引擎本质上是一种渲染工具，它将 html 中使用的特殊变量语法转换为通常以 JSON 格式存储的数据，如果该数据是动态的，则页面中的变量将根据 Z9EDAZE2EA9312EF5876B你的数据。 起初听起来可能有点混乱，但我 promise 这很简单。 Bellow 是常用的语法。

// Your Data.

{
  animal: "My little dog, Sophie.",
  place: "Santa Rosa, Ca.",
}

---

// Your HTML template, or your input.
<h3>{{place}}</h3>
<p>{{animal}}</p>

---

// Your HTML output, that is compile and rendered by your template engine.

<h3>Santa Rosa, Ca.</h3>
<p>My little dog, Sophie.</p>

• 这是 Handlebars 构建的在线工具的链接，用于试验他们的模板引擎。 事实上，我使用该工具创建了上面的示例。

---

你有另外两个选择

2. 对于第二个选项，您可以使用完整的框架，例如React 或 Vue 。 就我个人而言，我从未使用过 React，但我曾在 Vue 上使用过一段时间。 Vue 实现了模板引擎使用的相同的双花括号语法（在上面的示例中进行了演示）。 Vue 更进一步，或者说 Vue 更进一步 5 千和 42 步可能更正确，这就是为什么有些人选择它而不是模板引擎，另一方面，这也是为什么很多人选择不要使用它（React 也是如此）。 我自己是一个香草 JS 人......

3. ...作为香草爱好者，您拥有的第三个选项就是我所做的。 为自己构建一个简单但非常强大的模板引擎。 虽然这听起来可能最荒谬和最耗时，但事实并非如此。 这些框架将花费您更多的时间来学习，并且为您自己构建一个模板引擎只需要几个功能，尽管实现上面选项#1 已经为您制作的功能会更快，但是； 构建自己的模板引擎可确保您了解在您的引擎盖下发生的事情，不仅如此，您还可以成为引擎盖下自己引擎的机械师。 您可以随意更换零件并进行调整。 Bellow 是一小段代码，看起来很简单，但其中包含很多内容。

var render = (template, data) => {
    return template.replace(/{{(.*?)}}/g, (match) => {
        return data[match.split(/{{|}}/).filter(Boolean)[0]]
    })
}

上面的代码片段由 ShadowTime2000 在 Hackernoon.com 上编写。

上面的代码片段是一个很好的示例，用于演示渲染 function，它是大多数 JavaScript 模板引擎的核心（为了正确起见，有例外，但这在这里无关紧要）。 上面的片段来自一个完整的指南，这是我建议阅读的一个很棒的免费资源。 链接如下。

Shadowtime2000 模板引擎教程

顺便说一句，我不知道影子时间，我也不想推销他的东西。 我真的很喜欢他的想法。 恕我直言，Shadowtime2000 写道，非常有用的教程/指南，我学得越多，就越难找到。

我希望上面的东西可以帮助你交配，干杯！