解释 json 字符串中的反斜杠字符以获得漂亮的显示

Posted 2023-03-05

【中文标题】解释 json 字符串中的反斜杠字符以获得漂亮的显示

【英文标题】：Interpret backslash characters in json string for pretty display

【发布时间】：2016-11-01 18:14:21

【问题描述】：

我有一个这样的 json 字符串：

 "choice": "gogo", "parameter": "high", "result": "[  \"value_1\": 1.2, \"feature_1\": \"chicken\", \"prominent\": \"yes\" , ... 

json 字符串的结果部分包含反斜杠字符，来自 json 中的换行符。我正在尝试转义这些字符，以便我可以以漂亮的方式在 html 中显示 json。 javascript有没有办法解释字符串中的换行符，使其显示如下：

    "choice": "gogo",
    "parameter": "high",
    "result": "[  "value_1": 1.2, "feature_1": "chicken", "prominent": "yes"  ... and so on 

我试过了：

Json result to html (Newline)

JSON.stringify output to div in pretty print way

How can I beautify JSON programmatically?

但它们仍然输出带有换行符的 json。

也试过了：

var str = JSON.stringify(obj, null, 2);

但它仍然显示反斜杠。

还尝试在包含 json 字符串的 div 中使用 pre 标记：

<div id="show_json"><pre></pre></div>

【问题讨论】：

我认为它与this other question有关，请查看here

也试过了......但它仍然显示反斜杠

将white-space: pre; 放在要添加字符串的 HTML 上。或者使用<pre> 标签。

包含 json 的文本文件有换行符，而 json 对象没有。但这不是问题，只是不要尝试将其显示为字符串，创建一个循环打印 ` '"' + key + '" : "' + value + '",\\n' ` 为每个其中...

你确定反斜杠没有转义内引号吗？

【参考方案1】：

你可以replace所有的反斜杠：

var obj = 
  "choice": "gogo",
  "parameter": "high",
  "result": "[  \"value_1\": 1.2, \"feature_1\": \"chicken\", \"prominent\": \"yes\"  ]"
;
document.body.innerHTML = JSON.stringify(obj, null, 4).replace(/\\/g, "");

body  white-space: pre 

【讨论】：

就是这样。完美，谢谢！反斜杠消失了。现在我只需要缩进 json，而不是像一个长字符串一样。

@Cyber​​netic JSON.stringify 可以为你做缩进。我的 sn-p 里有这个。

是的，我不知道为什么我的不缩进。

虽然格式很好，但现在结果不正确。处理内部引用需要转义字符。

@JonSG 同意，但不一定不正确。漂亮的印刷是为了人类可读性，所以也许 OP 认为没有反斜杠它更具可读性。但希望没有任何东西会尝试解析它。