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。

您需要做的就是将课程json添加到pre code代码

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

并致电hljs.initHighlightingOnLoad();

它将突出显示json字符串。

<强>段

＆＃13;

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();

＆＃13;

<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>

＆＃13;

UI中的PrettyPrinting JSON

2 个答案: