迹忆客 专注技术分享

本文介绍如何将 HTML 代码转换为 JSON。

使用 JavaScript JSON.stringify() 方法将 HTML 转换为 JSON

JSON 类似于 JavaScript 对象，不同的是 key 在 JSON 中被写成一个字符串。 JSON 不依赖于语言，用于在应用程序或计算机之间交换数据。

JSON 字符串的示例如下所示。

'{
    "name":"John",
    "age":30,
    "car":null
}'

我们可以使用 JSON.stringify() 方法以这种表示形式转换 HTML 文档。 该方法将 JavaScript 对象转换为 JSON 字符串。

例如，我们将以下 HTML 文档转换为 JSON。

代码 - HTML：

<div id='para'>
  <p>
    Paragraph 1
  </p>
  <p>
    Paragraph 2
  </p>
</div>

我们需要获取要转换为 JSON 的文档。 在 HTML 中，要转换的容器的 id 是 para。

使用 document.getElementById() 方法返回带有 para id 的文档。 para 变量存储整个 HTML 文档。

var para = document.getElementById('para');

接下来，使用 outerHTML 属性返回 para 变量的序列化 HTML 内容。 html 变量包含字符串格式的整个文档。

var html = para.outerHTML;

然后，将 html 字符串存储为 JavaScript 对象。 将对象的键命名为 html。

var obj = { html: html };

最后，使用 JSON.stringify() 方法转换对象。

var json = JSON.stringify(obj);

完整的源代码——JavaScript + Node.js：

var para = document.getElementById('para');
var html = para.outerHTML;
var obj = { html: html };
var json = JSON.stringify(obj);
console.log(json)

输出:

"{'html':'<div id=\'para\'>\n  <p>\n    Paragraph 1\n  </p>\n  <p>\n    Paragraph 2\n  </p>\n</div>'}"

这样，我们可以将任何选定的 HTML 转换为 JSON。