以漂亮的方式将JSON.stringify的输出放入DIV中

Question

以漂亮的方式将JSON.stringify的输出放入DIV中

277

我使用JSON.stringify将JSON对象转化为字符串

result = JSON.stringify(message, my_json, 2)

上面参数中的2表示对结果进行漂亮的打印输出。如果我像这样做：alert(result)，它会实现这个功能。然而，我想将其添加到一个

标签内以向用户输出。但是，当我这样做时，我只能看到一行文字。（我认为这不起作用是因为换行符和空格没有被解释为HTML？）

{ "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 }

有没有一种方法可以将JSON.stringify的结果以漂亮的方式输出到

中？

- Alexis

使用 pre 元素？使用 prettify 库？ - epascarello

使用PHP，以下链接对我很有帮助：https://dev59.com/dGw05IYBdhLWcg3wrDpS#13638998 - Ryan

这个回答解决了你的问题吗？在HTML中呈现字符串并保留空格和换行符 - mickmackusa

16个回答

43

请确保JSON输出位于<pre>标记中。

- Adam

28

如果您的<pre>标签显示一个单行JSON，那是因为字符串已经以这种方式提供(通过api或某些函数/页面超出您的控制)，您可以像这样重新格式化它:

HTML:

<pre id="json">{"some":"JSON string"}</pre>

JavaScript：

    (function() {
        var element = document.getElementById("json");
        var obj = JSON.parse(element.innerText);
        element.innerHTML = JSON.stringify(obj, undefined, 2);
    })();

或使用jQuery:

    $(formatJson);

    function formatJson() {
        var element = $("#json");
        var obj = JSON.parse(element.text());
        element.html(JSON.stringify(obj, undefined, 2));
    }

- thinkOfaNumber

干得好，@thinkOfaNumber。我使用了你上面JS的一行重写：JSON.stringify(JSON.parse(myJSON), undefined, 2)。 - Rounin

10

我的建议基于：

用 <br>替换每个'\n' (换行符)
用 替换每个空格

var x = { "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 };


document.querySelector('#newquote').innerHTML = JSON.stringify(x, null, 6)
     .replace(/\n( *)/g, function (match, p1) {
         return '<br>' + '&nbsp;'.repeat(p1.length);
     });

<div id="newquote"></div>

- gaetanoM

9

完全透明，我是这个包的作者，但另一种以可读方式输出JSON或JavaScript对象的方法，包括能够跳过部分、折叠它们等，是nodedump，https://github.com/ragamufin/nodedump

- ragamufin

6

很多人对这些问题做出了非常奇怪的反应，导致比必要的工作更多。

最简单的方法如下：

使用JSON.parse（value）解析JSON字符串
将解析后的字符串Stringify成漂亮的格式 - JSON.stringify（input，undefined，2）
将输出设置为步骤2的值。

在实际代码中，一个示例将是（将所有步骤组合在一起）：

    var input = document.getElementById("input").value;
    document.getElementById("output").value = JSON.stringify(JSON.parse(input),undefined,2);

output.value 将成为您想要显示格式化后的 JSON 的区域。

- pjkmgs

6

Consider your REST API returns:

{"Intent":{"Command":"search","SubIntent":null}}

然后，您可以按照以下步骤以漂亮的格式打印它：

<pre id="ciResponseText">Output will de displayed here.</pre>   

var ciResponseText = document.getElementById('ciResponseText');
var obj = JSON.parse(http.response);
ciResponseText.innerHTML = JSON.stringify(obj, undefined, 2);

- Siddarth Kanted

5

将其用 pre 标签包装

<pre> { JSON.stringify(todos, null, 4)}</pre>

输出结果将会是：

[
    {
        "id": "6cbc8fc4-a89e-4afa-abc1-f72f27b14271",
        "title": "shakil",
        "completed": false
    },
    {
        "id": "5ee68df8-e152-46ae-82e2-8eb49f477d6f",
        "title": "kobir",
        "completed": false
    }
]

- Shakil- The Coding monster

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - CPP_is_no_STANDARD

我尝试过那个，结果所有内容都在一行上，并且需要通过X轴滚动来查看。 - Sudhir Kaushik

3

使用JSX打印组件的状态

render() {
  return (
    <div>
      <h1>Adopt Me!</h1>
      <pre>
        <code>{JSON.stringify(this.state, null, 4)}</code>
      </pre>
    </div>
  );
}

stringify

- Bar Horing

1

使用样式white-space:pre，<pre>标签也会修改文本格式，这可能不是所期望的。

- user7986267

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Diode · Accepted Answer

697

请使用<pre>标签。

演示：http://jsfiddle.net/K83cK/

var data = {
  "data": {
    "x": "1",
    "y": "1",
    "url": "http://url.com"
  },
  "event": "start",
  "show": 1,
  "id": 50
}


document.getElementById("json").textContent = JSON.stringify(data, undefined, 2);

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

- Diode

51

pre 标签告诉浏览器引擎，内部的内容是预格式化的，可以直接显示而不做任何修改，因此浏览器不会移除空格、换行等。code 标签用于提高语义性，表示内部的内容是一段代码片段，与格式无关。建议使用以下方式： <pre><code> /* 在此输入您的代码 */ </code></pre> - Diode

3

为了避免长队排出其父容器，应向pre标签添加以下CSS规则：https://dev59.com/SnVC5IYBdhLWcg3wliKe#248013 - JoachimR

1

但是，如果我在上面的 JS Fiddle 中使用"data"中的"array": [1,2,3,4]，它会将数组拆分成多行。为什么？ - Learner

1

@iGod：这就是 stringify 的格式。您可以通过使用“替换器”函数来覆盖它，该函数是第二个参数，如下所示。

JSON.stringify({name: "Diode", details: {age: 123, place: "xyz"}, list: [1, 2, 3, 4, 5]},function(k,v){
   if(v instanceof Array)
      return JSON.stringify(v);
   return v;
},2);

- Diode

2

@Diode 我也想提一下最好使用.textContent而不是.innerHTML，因为它会转义可能在JSON中存在的危险HTML：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page - user3692823

显示剩余3条评论