当前位置：文江博客话题详情

有没有一种方法可以使用 JavaScript 在网页中漂亮地打印 JSON？

发布于 2024-10-13 00:53:10 字数 85 浏览 3 评论 0原文

在我看来，漂亮打印 JSON 是一个足够简单的任务，JavaScript 应该能够处理它。有没有人编写过（或运行过）JavaScript 函数来执行此操作？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

末蓝 2024-10-20 00:53:10

执行此操作的一个简单方法是执行：

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

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

但并非每个浏览器都包含 JSON。您可以包含 Douglas Crockford 的 json.js，如果浏览器本身不支持，它会添加全局 JSON 对象。

An easy way to do this is to execute:

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

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

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.

回复收藏 0 原文

迷迭香的记忆 2024-10-20 00:53:10

我在浏览器上使用这个小书签代码来使 JSON 段落可读

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

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

由于当今的浏览器正在放置 json 响应在

 标签内，我使用 body.firstChild

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

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

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

回复收藏 0 原文

何以笙箫默 2024-10-20 00:53:10

看看 vkbeautify.js 插件

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

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

用纯 JavaScript 编写，小而快。

回复收藏 0 原文

落墨 2024-10-20 00:53:10

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

回复收藏 0 原文

她说她爱他 2024-10-20 00:53:10

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

为您的用户输出：
http://jsonformatter.curiousconcept.com/

回复收藏 0 原文

冬天旳寂寞 2024-10-20 00:53:10

我最终做的是安装 Mozilla 的 JSONView 插件。并不完美，但它完成了我需要完成的事情。

回复收藏 0 原文

神经暖 2024-10-20 00:53:10

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

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

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

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

回复收藏 0 原文

~没有更多了~