在JavaScript中根据需要解析HTML模板

我花了几个小时在一个基本的网页配置上，但我仍然无法使它工作。我的目标是在将html模板导入JavaScript文件时对其执行解析。这看起来像是一个常见的用例，但在我的网页配置或我的理解中应该有一些奇怪的地方

我寻找了

html加载器

，

html网页包插件

，

posthtml

以及

pug

的配置，我已经阅读了他们的所有文档，但没有一个有效

根据：

PostHTML是一个使用JS插件转换HTML/XML的工具。PostHTML本身非常小。它只包括一个HTML解析器、一个HTML节点树API和一个节点树字符串生成器

因此，由于这是最有希望的，我报告了我对posthtml的尝试：

   rules: [
      {
        test: /.html$/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: true,
              interpolation: false
            }
          },
          {
            loader: "posthtml-loader"
          }
        ]
      }
    ]

它没有返回任何错误，但看起来完全忽略了

posthtml加载程序

，因为执行了

import template from'src/test.html'

我将模板作为字符串获取（应该如何单独执行

html加载程序

）

在我的理解中，加载程序应该编译/转换不同格式的文件，并使其可用于JavaScript，而且由于

html

是前端项目中最常见的类型，我认为这很容易，但我在互联网上找不到与此相关的任何内容

我期望的是有一个DOM树对象，或者，无论如何，JavaScript可以使用的东西

有人能帮我吗

---

编辑：我的问题是关于启动网页包配置并使其正常工作。我知道许多解析HTML字符串的解决方案，但它们在这里不适用。好吧，将字符串转换为HTML很容易。因此，如果您得到了模板的字符串恢复，您可以将其转换为如下所示的DOM结构

/**创建一个未连接的DOM元素。这件事毫无意义。你好，戴夫*/
var dave=document.createElement（“div”）；
/**给dave一个带有我们从“某处”收到的HTML字符串的正文*/
dave.innerHTML=“”；
/**
*戴夫现在
*/
dave.querySelector（'input'）.value=“对不起，dave，恐怕我做不到”；
/** ======================================================================
*现在渲染我们渲染Dave，这不是真的需要，但无论如何都可以。
*我们不需要我们创建的“包装”浮动div，这样我们就可以得到Dave的所有孩子
*让戴夫在永恒的深渊中被遗忘。
*/
var content=dave.children；
var main=document.getElementById（'main'）；
对于（变量i=0；i

.foo{
背景色：红色；
}
.foo输入{
背景色：黑色；
颜色：白色；
}

---

在我看来，

posthtml加载程序主要是一个在构建过程中帮助“准备”HTML的工具。它的解析器选项允许您进入
string->postHTMLAST树
步骤，它的插件选项允许您修改树。然后，它将字符串化回HTML

我在webpack插件中找不到返回临时树格式的选项


您可以编写一个小型自定义加载程序，将HTML字符串解析为DOM对象：

// custom-loader.js
module.exports = function(content) {
  return `module.exports = (function() {
    const parser = new DOMParser();
    const doc = parser.parseFromString("${content}", "text/html");
    return doc.body.children; 
  }())`;
};

然后，在
webpack.config.js
中，您可以告诉webpack使
.html
文件通过此加载程序：

// webpack.config.js
module.exports = {
  mode: 'development',
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  devtool: "eval-source-map",
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [ './custom-loader' ]
      }
    ]
  }
};

现在，每当您键入类似于
consttemplate=require（'./template.html'）您将获得一个实例，而不仅仅是一个字符串


请注意，此加载程序向
DOMParser
添加了一个依赖项，该依赖项仅在浏览器中可用。如果你想在非浏览器环境中运行，你可以用类似于
jsdom
的东西来代替它。
信不信由你，这不是一个常见的用例，将html文件导入JavaScript并显示它们听起来像是一种解决方法或一种中间端口攻击。JavaScript库用于在浏览器中动态生成html以响应用户输入。如果这是您想要的，您应该使用React、Vue、Angular、jQuery或类似工具

正如其他人提到的，解决问题的方法不是寻找将HTML转换为DOM节点的加载程序，而是由您自己完成。在浏览器中执行代码之前，DOM不存在，它不是编译时转换。这是一个运行时转换。

import template from 'src/test.html'

const html = document.createElement('div')
html.innerHTML = template


装载机根本不能满足您的要求。浏览器负责解析HTML并基于其平台和特定于供应商的实现构建DOM树
querySelector
或
createElement
是我们访问此浏览器功能的API方法。但是我们的代码中没有DOM节点。它们是由平台为我们创建的。我们的JavaScript只是在使用它

有一些解决方案，例如
DOMParser
和
jsDOM
，可以在服务器上实现这一点。但是，它们是浏览器DOM的不完整实现，不应该将它们引入打算发送到浏览器的前端代码中。它们用于无头测试、网络爬网和其他形式的网页机器消费

如果您可以呈现一个特定的场景，在浏览器中无法解析HTML字符串和其他代码，并且在JavaScript使用之前，请务必向我们展示，我们将提供一个解决方案。但很可能您误解了JavaScript、Webpack和HTML的角色以及它们之间的关系

TLDR：HTML是通过HTTP发送到浏览器的字符串，浏览器根据其特定于供应商的实现决定如何构建DOM树。在前端代码中，除了让浏览器使用您提供的字符串为您构建DOM树，然后使用c