javascript - html 美化 json 忽略新行字符

Question

我需要在 html 页面上美化我的 json 输出，我正在使用以下代码执行此操作:

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

问题是在这个美化的 json 中新行字符无法识别，我得到这个:

字符串变得太长，表格单元格被拉伸(stretch)到离屏幕太远。我尝试应用一些自定义样式，如自动换行或断字，但没有帮助。欢迎提出任何修复方法的想法，谢谢。

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>