有没有一种使用JavaScript在网页上漂亮地打印JSON的方法？

Question

在我看来，漂亮打印JSON应该是一个非常简单的任务，JavaScript应该能够处理它。有没有人编写过（或遇到过）一个JavaScript函数来完成这个任务呢？

- Hot Licks

Answer 1

一个简单的方法是执行：

JSON.stringify(data, null, "  ");

其中data是您想要漂亮打印的JSON对象。

然而，并非所有浏览器都包含JSON。您可以通过包含由Douglas Crockford编写的json.js文件来添加全局JSON对象，以便在浏览器上原生不支持它的情况下使用。

- mgamer

---

JSON.stringify并不是非常美观，即使加上额外的空格也不行。我发现下面的vkbeautify链接是一个很好的解决方案。 - mm2001

这似乎是一个糟糕的解决方案，因为随后对pretty print JSON的调用可能会被破坏。 - Alexander Mills

Answer 2

我在浏览器上使用这个书签代码，使JSON段落易读。

javascript:(function(){document.body.firstChild.innerHTML = JSON.stringify(JSON.parse(document.body.firstChild.innerHTML), null, 4);})();

添加书签工具很容易 - 右键单击书签栏 - 添加/新建 - 提供名称并将JS粘贴到URL/位置框中。

由于现代浏览器在内部将JSON响应放在<pre>标签中，所以我使用body.firstChild。

- smk

Answer 3

看一下 vkbeautify.js 插件。

http://www.eslinstructor.net/vkbeautify/

它可以为 JSON 和 XML 文本提供漂亮的格式化输出。

使用普通的 JavaScript 编写，体积小且速度快。

- vadimk

---

我真的很喜欢这个解决方案。它在node上运行得非常好，我还看到他们也有一个浏览器版本。 - mm2001

免责声明：vkbeautify.json是JSON.stringify的包装器。 - Birla

Answer 4

我最终做的是安装Mozilla的JSONView插件。虽然不完美，但它完成了我需要完成的工作。

- Hot Licks

Answer 5

JavaScript数据格式化/美化打印机

- Amol Katdare

Answer 6

你可以试试这个，它会添加一些漂亮的CSS样式。

<pre style="font-family: Courier;background: #f4f4f4;border: solid 1px #e1e1e1;float: left;width: auto;">
    JSON.stringify(data, null,' ').replace('[', '').replace(']', '')
</pre>

- Rick

Answer 7

如果你想要这个（调试目的），你可以使用Greasemonkey： http://misc.slowchop.com/misc/wiki/HumanReadableJSONGreasemonkey

如果你想为用户输出： http://jsonformatter.curiousconcept.com/

- capdragon