如何将 HTML 代码转换为 JSON 对象？答案

【问题标题】：How can I convert HTML code into a JSON object?如何将 HTML 代码转换为 JSON 对象？
【发布时间】：2020-06-13 12:57:49
【问题描述】：

我正在构建一个 Angular 7 应用程序。在这个应用程序中，我让用户编辑 HTML，然后我想将其转换为 JSON 以便以有意义的方式存储它。

简而言之，我想获取任何 HTML 代码并将其处理为 JSON 对象。我该怎么做？

【问题讨论】：

你可以使用mckamey/jsonml之类的东西来进行JSON和HTML/XML之间的转换。
JSON 和 HTML 是完全不同的结构。你如何设想这种工作方式？你能举个例子，一个基本的html和预期的输出吗？你用什么键？标签，样式/脚本/元素？你如何维护订单？老实说，将整个 html 存储为字符串要容易得多。这就是所有网站建设者的工作方式 afaik
@sinanspd - 嗯，它们都能够成为树结构，并且 JSON 具有用于排序的数组，所以...

标签： javascript html json angular

【解决方案1】：

如果您只想将其添加到 json 请求中以将其发送到外部服务器，您可以执行以下操作：

{
    "html": "<html>...</html>"
}

并将其发送到服务器进行进一步处理。

【讨论】：

【解决方案2】：

我会将 HTML 解析为 DOM（您可以在客户端或服务器端进行），然后将我关心的 DOM 的各个方面序列化为一个对象，然后我将使用 JSON.stringify on（如果你真的想要 JSON）。

例如：

function converter(dom) {
    if (dom.nodeType === Node.TEXT_NODE) {
        return dom.nodeValue;
    }
    if (dom.nodeType === Node.DOCUMENT_NODE) {
        dom = dom.documentElement;
    }
    const obj = {};
    obj.nodeType = dom.nodeType;
    if (dom.nodeType === Node.ELEMENT_NODE) {
        obj.tagName = dom.tagName;
        obj.attributes = []; // Array.from(obj.attributes) gives us a lot of things we don't want
        for (let i = 0, len = dom.attributes.length; i < len; ++i) {
            const attr = dom.attributes[i];
            obj.attributes.push({name: attr.name, value: attr.value});
        }
        obj.children = [];
        for (let child = dom.firstChild; child; child = child.nextSibling) {
            obj.children.push(converter(child));
        }
    } else {
        obj.nodeValue = dom.nodeValue;
    }
    return obj;
}
const json = JSON.stringify(converter(document.getElementById("example")), null, 4);
console.log(json);

.as-console-wrapper {
    max-height: 100% !important;
}

<div id="example" class="ex">
  <span>Span 1</span>
  <span>Span 2</span>
  <!-- comment -->
  <span>
    Span 3
    <span>Inner span</span>
  </span>
</div>

显然，这只是一个粗略的草图，而不是一个完全成熟的解决方案。

【讨论】：

【解决方案3】：

function converter(dom) {
    if (dom.nodeType === Node.TEXT_NODE) {
        return dom.nodeValue;
    }
    if (dom.nodeType === Node.DOCUMENT_NODE) {
        dom = dom.documentElement;
    }
    const obj = {};
    obj.nodeType = dom.nodeType;
    if (dom.nodeType === Node.ELEMENT_NODE) {
        obj.tagName = dom.tagName;
        obj.attributes = []; // Array.from(obj.attributes) gives us a lot of things we don't want
        for (let i = 0, len = dom.attributes.length; i < len; ++i) {
            const attr = dom.attributes[i];
            obj.attributes.push({name: attr.name, value: attr.value});
        }
        obj.children = [];
        for (let child = dom.firstChild; child; child = child.nextSibling) {
            obj.children.push(converter(child));
        }
    } else {
        obj.nodeValue = dom.nodeValue;
    }
    return obj;
}
const json = JSON.stringify(converter(document.getElementById("example")), null, 4);
console.log(json);

.as-console-wrapper {
    max-height: 100% !important;
}

<div id="example" class="ex">
  <span>Span 1</span>
  <span>Span 2</span>
  <!-- comment -->
  <span>
    Span 3
    <span>Inner span</span>
  </span>
</div>

【讨论】：

请始终在回答中描述您在做什么。它应该被更新或删除。在提供更多答案之前阅读How to answer ^^