将JSON显示为HTML [关闭]


178

关于如何将JSON格式设置为易于阅读的JSON格式的HTML页面上有任何建议吗?例如,当您在浏览器中查看XML时,大多数浏览器都会显示格式化的XML(缩进,正确的换行符等)。我想要JSON的相同最终结果。

颜色语法高亮将是一个加分项。

谢谢


tohtml.com/javaProperties对我来说效果很好;它使样式“内联”;简单复制粘贴到其他内容中非常有帮助。
安德鲁·巴克林

看看我的图书馆azimi.me/json-formatter-js
Mohsen

Answers:


147

您可以将JSON.stringify函数与未格式化的JSON一起使用。它以格式化的方式输出。

JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)

这变成

{ "foo": "sample", "bar": "sample" }

进入

 {
     "foo": "sample", 
     "bar": "sample" 
 }

现在,数据是可读的格式,您可以按照@A的建议使用Google Code Prettify脚本。征收颜色代码。

值得补充的是IE7和较旧的浏览器不支持JSON.stringify方法


4
对于不支持JSON.stringify的浏览器(让我们说出来,旧的IE),可以使用出色的polyfill来获取功能(json.org/js.html)。只需包括它,您到处都会被覆盖。
John Munsch 2012年

1
另一个技巧是,如果您输入<br>而不是缩进字段(4),则会得到漂亮的换行符
Jonathan

5
最佳答案,即可以完成工作,而无需包括第三方库。
BlaShadow14年

1
我将其用于必须在HTML <textarea>元素中显示人类格式的JSON的用例中效果很好。看起来做得很好。
CSSian 2014年

1
把它放在<pre。并且已设置为至少不能用于调试目的,而您不能使用console.log()
sparklos 2016年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.