如何用JavaScript在浏览器中输出保留原格式的含嵌套引号文本？

问题原因 #

直接用<pre>包裹JSON字符串通过document.write输出时，JavaScript会自动解析字符串中的转义字符（比如\\变成\、\"变成"、\n被提前解析），导致原始JSON的转义结构丢失，换行符也无法正确在<pre>中生效。

解决方案 #

根据你的数据源类型，选择以下两种方法：

方法1：从JavaScript对象生成格式化JSON #

如果你的数据是JavaScript对象，直接用JSON.stringify生成带格式的JSON字符串，它会自动处理转义与换行：

// 原始数据对象
const data = {
  name: 'John "Doe"',
  path: 'C:\\Users\\John',
  bio: 'Hello\nWorld'
};

// 生成带缩进、换行的JSON字符串，自动处理转义
const formattedJson = JSON.stringify(data, null, 2);

// 输出到<pre>标签
document.write(`<pre>${formattedJson}</pre>`);

方法2：处理已存在的JSON字符串 #

如果你已经有一个原始的JSON字符串（比如从后端获取的），需要对其进行二次转义，避免JavaScript解析转义字符：

// 假设这是你拿到的原始JSON字符串
const rawJson = '{"name":"John \"Doe\"","path":"C:\\\\Users\\\\John","bio":"Hello\\nWorld"}';

// 用JSON.stringify将字符串转义为可安全输出的格式，再去掉首尾自动添加的双引号
const safeJson = JSON.stringify(rawJson).slice(1, -1);

// 输出到<pre>标签
document.write(`<pre>${safeJson}</pre>`);

效果说明 #

以上两种方法输出的内容会完全保留原始JSON的嵌套双引号、转义斜杠与换行符，和代码块的显示效果一致。

内容的提问来源于stack exchange，提问作者PKHunter