UI 中的漂亮打印 JSON答案

【问题标题】：PrettyPrinting JSON in UIUI 中的漂亮打印 JSON
【发布时间】：2017-11-03 21:01:45
【问题描述】：

我有一个这样的 JSON 字符串

{"menu":{"header":"SVG Viewer","items":[{"id":"Open"},
{"id":"OpenNew","label":"Open New"},null,{"id":"ZoomIn","label":"Zoom In"},
{"id":"ZoomOut","label":"Zoom Out"},{"id":"OriginalView","label":"Original 
View"},null,{"id":"Quality"},{"id":"Pause"},{"id":"Mute"},null,
{"id":"Find","label":"Find..."},{"id":"FindAgain","label":"Find Again"},
{"id":"Copy"},{"id":"CopyAgain","label":"Copy Again"},
{"id":"CopySVG","label":"Copy SVG"},{"id":"ViewSVG","label":"View SVG"},
{"id":"ViewSource","label":"View Source"},{"id":"SaveAs","label":"Save 
As"},null,{"id":"Help"},{"id":"About","label":"About Adobe CVG 
Viewer..."}]}}

我在里面显示上面的 JSON 字符串块

<pre><code></code></pre>

我的代码：

<!DOCTYPE html>
 <html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>

<link rel="stylesheet" href="SpecificToJSON/highlight/styles/default.css">
    <script src="SpecificToJSON/highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="container">
<pre class="json"><code>
 {"menu":{"header":"SVG Viewer","items":[{"id":"Open"},
 {"id":"OpenNew","label":"Open New"},null,{"id":"ZoomIn","label":"Zoom In"},
 {"id":"ZoomOut","label":"Zoom Out"},{"id":"OriginalView","label":"Original 
 View"},null,{"id":"Quality"},{"id":"Pause"},{"id":"Mute"},null,
 {"id":"Find","label":"Find..."},{"id":"FindAgain","label":"Find Again"},
 {"id":"Copy"},{"id":"CopyAgain","label":"Copy Again"},
 {"id":"CopySVG","label":"Copy SVG"},{"id":"ViewSVG","label":"View SVG"},
 {"id":"ViewSource","label":"View Source"},{"id":"SaveAs","label":"Save 
  As"},null,{"id":"Help"},{"id":"About","label":"About Adobe CVG 
  Viewer..."}]}}
 </code></pre>
 </div>
 </body>
  </html>

我得到了什么：

我需要什么：

如何做到这一点？提前致谢。

【问题讨论】：

那么问题/疑问是什么？与 highlightjs 无关。
虽然我可以用语法高亮代码，但我不能很好地打印它。代码仅显示在一行中，未格式化。
这里 - highlightjs.org/usage
好的，现在好多了。你如何输出/打印 JSON？
How can I pretty-print JSON using JavaScript?的可能重复

标签： javascript html css json pretty-print

【解决方案1】：

JSON.stringify() supports pretty printing.

var str = JSON.stringify(obj, null, 2);

您还可以使用highlight.js 突出显示您的json。

您需要做的就是将json 类添加到pre code 标记

<pre><code id="code" class="json"></code></pre>

并致电hljs.initHighlightingOnLoad();

它将突出显示 json 字符串。

片段

var obj = {"menu":{"header":"SVG Viewer","items":[{"id":"Open"},
{"id":"OpenNew","label":"Open New"},null,{"id":"ZoomIn","label":"Zoom In"},
{"id":"ZoomOut","label":"Zoom Out"},{"id":"OriginalView","label":"Original View"},null,{"id":"Quality"},{"id":"Pause"},{"id":"Mute"},null,
{"id":"Find","label":"Find..."},{"id":"FindAgain","label":"Find Again"},
{"id":"Copy"},{"id":"CopyAgain","label":"Copy Again"},
{"id":"CopySVG","label":"Copy SVG"},{"id":"ViewSVG","label":"View SVG"},
{"id":"ViewSource","label":"View Source"},{"id":"SaveAs","label":"Save As"},null,{"id":"Help"},{"id":"About","label":"About Adobe CVG Viewer..."}]}};

var str = JSON.stringify(obj, null, 2);

$('#code').text(str);
hljs.initHighlightingOnLoad();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<pre><code id="code" class="json"></code></pre>

【讨论】：

highlightjs.org

【解决方案2】：

如果是JavaScript对象，则等价于this；

var obj = {"menu":{"header":"SVG Viewer","items":[{"id":"Open"},
  {"id":"OpenNew","label":"Open New"},null,{"id":"ZoomIn","label":"Zoom In"},
  {"id":"ZoomOut","label":"Zoom Out"},{"id":"OriginalView","label":"Original View"},null,
  {"id":"Quality"},{"id":"Pause"},{"id":"Mute"},null,{"id":"Find","label":"Find..."},
  {"id":"FindAgain","label":"Find Again"},
  {"id":"Copy"},{"id":"CopyAgain","label":"Copy Again"},
  {"id":"CopySVG","label":"Copy SVG"},{"id":"ViewSVG","label":"View SVG"},
  {"id":"ViewSource","label":"View Source"},{"id":"SaveAs","label":"Save As"},null,{"id":"Help"},
  {"id":"About","label":"About Adobe CVG Viewer..."}]}}

然后你可以把它变成一个漂亮的字符串；

var objPrettyString = JSON.stringify(obj, null, '  ');
console.log(objPrettyString);

如果是类似这样的字符串；

    var objString = '{"menu":{"header":"SVG Viewer","items":[{"id":"Open"}, {"id":"OpenNew","label":"Open New"},null,{"id":"ZoomIn","label":"Zoom In"}, {"id":"ZoomOut","label":"Zoom Out"},{"id":"OriginalView","label":"Original View"},null, {"id":"Quality"},{"id":"Pause"},{"id":"Mute"},null,{"id":"Find","label":"Find..."}, {"id":"FindAgain","label":"Find Again"}, {"id":"Copy"},{"id":"CopyAgain","label":"Copy Again"}, {"id":"CopySVG","label":"Copy SVG"},{"id":"ViewSVG","label":"View SVG"}, {"id":"ViewSource","label":"View Source"},{"id":"SaveAs","label":"Save As"},null,{"id":"Help"}, {"id":"About","label":"About Adobe CVG Viewer..."}]}} ';

那就先解析一下；

var obj = JSON.parse(objString);
var objPrettyString = JSON.stringify(obj, null, '  ');
console.log(objPrettyString);

stringify 函数中的第三个参数决定了字符串的格式。您可以在此页面上阅读详细信息 - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

【讨论】：

感谢@Oliver Jenkins。此外，我必须相应地替换 的 innerHTML 以满足我的要求。