如何将 HTML 代码转换为 JSON 对象?
Posted
技术标签:
【中文标题】如何将 HTML 代码转换为 JSON 对象?【英文标题】:How can I convert HTML code into a JSON object? 【发布时间】:2020-06-13 12:57:49 【问题描述】:我正在构建一个 Angular 7 应用程序。 在这个应用程序中,我让用户编辑 html,然后我想将其转换为 JSON 以便以有意义的方式存储它。
简而言之,我想获取任何 HTML 代码并将其处理为 JSON 对象。我该怎么做?
【问题讨论】:
你可以使用mckamey/jsonml之类的东西来进行JSON和HTML/XML之间的转换。 JSON 和 HTML 是完全不同的结构。你如何设想这种工作方式?你能举个例子,一个基本的html和预期的输出吗?你用什么键?标签,样式/脚本/元素?你如何维护订单?老实说,将整个 html 存储为字符串要容易得多。这就是所有网站建设者的工作方式 afaik @sinanspd - 嗯,它们都能够成为树结构,并且 JSON 具有用于排序的数组,所以... 【参考方案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 ^^以上是关于如何将 HTML 代码转换为 JSON 对象?的主要内容,如果未能解决你的问题,请参考以下文章