UI 中的 PrettyPrinting JSON

Question

我有一个 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>

我得到了什么：

我需要什么：

如何实现？提前致谢。

Answer 1

如果是JavaScript对象，相当于这个；

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

Answer 2

JSON.stringify() supports pretty printing.

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

此外，您可以使用 highlight.js 突出显示您的 json。

您需要做的就是将 class 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>

UI 中的 PrettyPrinting JSON

PrettyPrinting JSON in UI

javascript

html

css

json

pretty-print