是否有一种方法可以使用JavaScript在web页面中漂亮地打印JSON ?

Seems to me that pretty-printing JSON is a simple enough task that JavaScript should be able to handle it. Has anyone ever written (or run across) a JavaScript function to do this?

在我看来，漂亮打印JSON是一项足够简单的任务，JavaScript应该能够处理它。有没有人编写过(或运行过)JavaScript函数来完成这个任务?

7 个解决方案

#1

An easy way to do this is to execute:

一个简单的方法是执行:

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

where data is the json object you want to print pretty.

数据就是要打印的json对象。

Not every browser contains JSON though. You can include json.js by Douglas Crockford which add global JSON object if it is not supported natively by the browser.

但并不是每个浏览器都包含JSON。可以包含json。由Douglas Crockford开发的js，如果浏览器不支持全局JSON对象，则添加全局JSON对象。

#2

take a look at vkbeautify.js plugin

看看vkbeautify。js插件

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

it provides pretty print for both JSON and XML text.

它为JSON和XML文本提供了漂亮的打印。

written in plain javascript, small and fast.

用简单的javascript编写的，又小又快。

#3

JavaScript data formatting/pretty printer

JavaScript数据格式/漂亮的打印机

#4

What I ended up doing is installing the JSONView add-on for Mozilla. Not perfect, but it gets done what I needed done.

最后我为Mozilla安装了JSONView附加组件。不完美，但它完成了我需要做的。

#5

I use this bookmarklet code on my browsers to make the JSON paragraph readable

我在浏览器上使用这个bookmarklet代码使JSON段落可读

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

Adding a bookmarklet is easy - right click on bookmarks bar - Add/New - provide a name and paste js in url / location box

添加书签很容易-右键单击书签栏-添加/新建-在url /位置框中提供名称和粘贴js

As current day browsers are putting the json response in a <pre> tag inside, i use body.firstChild

由于当前浏览器将json响应放在

标记中，所以我使用body.firstChild

#6

If you want this for yourself (debugging purposes) you can use Greasemonkey: http://misc.slowchop.com/misc/wiki/HumanReadableJSONGreasemonkey

如果您想自己使用这个(调试目的)，可以使用Greasemonkey: http://misc.slowchop.com/misc/wiki/HumanReadableJSONGreasemonkey

If you want the output for your users: http://jsonformatter.curiousconcept.com/

如果您希望为用户输出:http://jsonformatter.curiousconcept.com/

#7

You can give this a try it will add in some nice CSS.

您可以尝试一下，它会添加一些漂亮的CSS。

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

#1