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

Question

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

简而言之，我想获取任何 HTML 代码并将其处理为 JSON 对象。 我怎样才能做到这一点？

Answer 1

我会将 HTML 解析为 DOM（您可以在客户端或服务器端进行操作），然后将我关心的 DOM 的各个方面序列化为一个对象，然后我将在该对象上使用JSON.stringify （如果你真的想要 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>

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

Answer 2

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

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

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

Answer 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>

Answer 4

这只是 TJCrowder 已标记答案的副本，略有改动。 我已从 JSON 结果中删除了空字符串、空属性和子节点。 代码更改在代码中注释。

 function converter(dom) { if (dom.nodeType === Node.TEXT_NODE) { // add only if value is not empty if(dom.nodeValue && dom.nodeValue.trim() != '') return dom.nodeValue; } if (dom.nodeType === Node.DOCUMENT_NODE) { dom = dom.documentElement; } const obj = {}; // add only if value is not empty if(dom.nodeValue && dom.nodeValue.trim() != ''){ 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}); } // remove attributes if is empty if(obj.attributes.length == 0) delete obj.attributes; obj.children = []; for (let child = dom.firstChild;child;child = child.nextSibling) { // add only if value is not NULL var childVal = converter(child); if(childVal) obj.children.push(childVal); } // remove children if is empty if(obj.children.length == 0) delete obj.children; } else { // add only if value is not empty if(dom.nodeValue && dom.nodeValue.trim() != '') obj.nodeValue = dom.nodeValue; } if(obj && Object.keys(obj).length === 0 && Object.getPrototypeOf(obj) === Object.prototype){ // do nothing }else 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>

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

问题描述

4 个解决方案

解决方案1
7 已采纳 2020-02-29 18:49:57

解决方案2
0 2020-02-29 18:39:57

解决方案3
0

解决方案4
0 2022-06-11 08:29:36

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

问题描述

4 个解决方案

解决方案1 7 已采纳 2020-02-29 18:49:57

解决方案2 0 2020-02-29 18:39:57

解决方案3 0

解决方案4 0 2022-06-11 08:29:36

解决方案1
7 已采纳 2020-02-29 18:49:57

解决方案2
0 2020-02-29 18:39:57

解决方案3
0

解决方案4
0 2022-06-11 08:29:36