带有换行符的 HTML 中的 JSON答案

【问题标题】：JSON in HTML with line breaks带有换行符的 HTML 中的 JSON
【发布时间】：2013-05-06 04:10:08
【问题描述】：

我的页面上有一些 Javascript，可以进行 ajax 调用，返回一些 JSON 数据。

结果我这样做了：

results = JSON.stringify(data, undefined, 2);
console.log(results);
$('.box').append(results);

.box 只是一个空的 div。

console.log(results) 给我一个带有换行符的缩进结果，但 .box 中的数据都在一行中。

如何确保.box 中的结果也出现在多行并缩进？

【问题讨论】：

标签： javascript html json

【解决方案1】：

.box 只是一个空的 div。

改为空<pre>：

<pre class="box"></pre>

【讨论】：

pre标签最大的问题是没有滚动条。
@cn123h 这不是真的。尝试使用溢出设置元素的 css：auto。在最新版本的 Chrome 上为我工作。

【解决方案2】：

我同意使用<pre>，但另一个选项是将所有\n 替换为<br> 元素，并将空格替换为&nbsp;。这可能真的没必要（因为<pre> 保留了空格）。你可以试试：

var data = {key1: "value1", key2: "value2", key3: {key4: "value4"}},
    results = JSON.stringify(data, undefined, 2),
    results2 = results.replace(/\n/g, "<br>").replace(/[ ]/g, "&nbsp;");
console.log(results);
$(".box").append(results2);

演示： http://jsfiddle.net/Yk5Pb/3/

【讨论】：