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 中，新行字符无法识别，我得到了这个：

字符串变得太长，表格单元格被拉离屏幕太远。我尝试应用一些自定义样式，如自动换行或分词，但没有帮助。欢迎任何想法如何解决它，谢谢。

标签： javascriptjquerycss

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>