html prettified json忽略换行符

Question

我需要在html页面上美化我的json输出，并通过以下代码来做到这一点：

$.each($('td.pretty_json'), function(key, value){      
      $(this).html('<pre>' + JSON.stringify(JSON.parse($(value).text()), null, 2) + '</pre>');   
 });

问题是在这个经过修饰的json中，新行字符无法识别，我得到了：

字符串变得太长，表格单元格离屏幕太远。我尝试应用一些自定义样式，例如自动换行或自动换行，但没有帮助。谢谢您提出任何解决方法，

Answer 1

在JSON中破坏字符串文字是不正确的，因为实际上会使JSON无效。

相反，请使用其他解决方案来解决您的最初问题（表变得太宽）。一种解决方案是向具有此类JSON的单元格添加水平滚动条。

小样：

$.each($('td.pretty_json'), function(key, value){    
    $(this).html('<pre>' + JSON.stringify(JSON.parse($(value).text()), null, 2) + '</pre>');   
});

table { border-collapse: collapse; }
table, th, td { border: 1px solid black; }

td.pretty_json {
    max-width: 100px;
    overflow-x: scroll;
    display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><td class="pretty_json">{ "property": "this is a test\nnext line" }</td><td class="pretty_json">{ "property": "this is a test\nnext line" }</td></tr>
<tr><td class="pretty_json">{ "property": "this is a test\nnext line" }</td><td class="pretty_json">{ "property": "this is a test\nnext line" }</td></tr>
</table>