将 HTML 编码为有效的 JSON

Posted 2023-03-05

【中文标题】将 HTML 编码为有效的 JSON

【英文标题】：Encode HTML to valid JSON

【发布时间】：2021-12-01 11:24:01

【问题描述】：

给定任何有效的 html，如何对其进行编码使其成为有效的 JSON？然后对其进行解码，以便您返回相同的初始 HTML。

JSON.stringify 用于编码和JSON.parse 在我的测试中似乎运行良好，但在研究这个时我找不到明确的答案。我遇到了诸如 base64 之类的选项（对于任何考虑它的人来说都不是一个好选择，utf8 字符是其中一个问题）和encodeURIComponent。

这似乎是一项常见的任务，我希望找到“这是一种‘正确/最佳’的方法”。

至于我为什么要这样做：GraphQL 正在迅速成为事物的方式。它以 JSON 进行通信。任何基于 GraphQL API 的应用程序，例如，希望允许用户在 html 中说写评论或帖子......都需要在 json 中传递 html。

注意：不要假设我们是从 DOM 获取 HTML。我们可能从任何地方的数据库、API 请求、富文本编辑器（我们当前的用例）中获取它。所以假设我们有一些 HTML，例如<p>This is <b>bold</b> text</p> 但它可以是任何有效的 HTML——各种标签、字符集等。

【问题讨论】：

This seems like such a common task...不是真的。为什么需要将 HTML 编码为 JSON？ HTML 实际上已经是一种数据格式。您期望的确切格式是什么？它们不会自动很好地相互映射。

HTML 是一个字符串，所以答案和“你如何在 JSON 中编码一个字符串？”是一样的

或者只是JSON.stringify(htmlString)。无需进一步编码。它将处理可以在 javascript 字符串中表示的任何内容。

我刚刚解释了为什么...它是文本，就像任何其他文本一样。由你来证明一个特定的问题，你试图做一些涉及它的事情，但它没有按你的意愿工作。 FWIW我没有投反对票，但是到目前为止，您的问题似乎有些投机性，并试图解决您尚未明确定义和/或实际上没有经历过的问题。它甚至可能是一个 XY 问题，但我们需要看到一个问题的具体示例，这样我们才能解释如何解决它。

这个问题正在meta讨论。

【参考方案1】：

如果你正在处理元素，你可以简单地通过获取它的outerHTML property来序列化它：

function serialize(element)
  return html: element.outerHTML;


function parse(html)
  var temp = document.createElement('div');
  temp.innerHTML = html.html;
  return temp.firstChild;


const serialized = serialize(div)

console.log('serialized:', serialized)

const parsed = parse(serialized)

console.log('parsed:', parsed)

<div id="div">Hello World!</div>

如果有问题的元素是作为字符串传递的，可以先解析一下：

function serialize(element)
  return html: element.outerHTML ? element.outerHTML : parse(html: element).outerHTML;


function parse(html)
  var temp = document.createElement('div');
  temp.innerHTML = html.html;
  return temp.firstChild;


const serialized = serialize("<p>This is <b>bold</b> text</p>")

console.log('serialized:', serialized)

const parsed = parse(serialized)

console.log('parsed:', parsed)