JSFIDDLE DEMO

Question

我想要在网页中显示一些json。但是，pre标签是否正在剥离并尊重输出中的中断？

如何显示一些json，并保留所有文本？

注意：我无法控制语法。这就是进入我服务的内容，所以我只是将它带入html并将其注入预先。

<div>
    <pre>
        {
        "text:" "testing line breaks<br/>new line"
        }
    </pre>
</div>

输出：

{
 "text:" "testing line breaks
new line"
}

预期产出：

{
 "text:" "testing line breaks<br/>new line"
}

Answer 1

查看此FIDDLE

var data = {
  "text": "testing line breaks<br/>new line"
};

document.getElementsByTagName("pre")[0].innerText = JSON.stringify(data, null, 2);

这里有两个重要的事情。

element.innerText不会遵循HTML br标记
JSON.stringify的第三个参数需要在相当打印时使用的空格数

Answer 2

你基本上需要做的是逃避HTML。您可以使用您正在使用的任何语言来输出字符串，但这里是使用本机JavaScript和jQuery的示例：

var data = { data: 'This is not a <br /> new line' }
// Doesn't escape HTML
$('#1').html(JSON.stringify(data) );
// Escapes
$('#2').text(JSON.stringify(data) );
// Escapes
document.getElementById("3").innerText = JSON.stringify(data);
// Doesn't escape
document.getElementById("4").innerHTML = JSON.stringify(data);
// Escapes
document.getElementById("5").innerHTML = JSON.stringify(data).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');

注意：如果您无法访问此HTML生成方式，您仍然可以使用一些小的Javascript片段进行修复：

// If you can't decode the HTML but you can add a little snippet
var el = document.getElementById("6"); el.innerText = el.innerHTML;

// Using jQuery
var $el = $('#7'); $el.text( $el.html() );

jsFiddle

Answer 3

开始使用jsonlint

问题是json看起来像这样的语法

    { "text": "testing line breaks<br\/>new line" }

Answer 4

只需将“＆lt;”转义为<

<div>
    <pre>
        {
        "text": "testing line breaks &lt;br/> new line"
        }
    </pre>
</div>

如何通过格式化的json在pre标签中显示中断？

4 个答案:

JSFIDDLE DEMO