API 返回的 JSON 里带换行符，JSON.parse 报错怎么办？

问题根因

JSON 规范中，字符串值内的换行符必须转义为 \n，否则解析器会直接报错。你遇到的情况大概率是后端返回的 JSON 字符串里，某个字段的值直接包含原始换行符（比如多行文本、日志、地址等），而没有做转义处理。

解决方案分层处理

### 1. 后端根治（最推荐）

让后端在序列化时对字符串字段做转义。以 Node.js 为例，使用 JSON.stringify 会自动处理换行符，但如果后端是手动拼接字符串或使用旧版库，就容易出问题。建议后端统一用标准 JSON 序列化库，并确保 Content-Type: application/json 响应头正确设置。

### 2. 前端容错（紧急兜底）

如果后端暂时无法修改，前端可以在解析前先做一次预处理。核心思路是：将未转义的换行符替换为 \n，但要注意不能破坏 JSON 中已存在的转义序列。

function safeParse(jsonStr) {
  // 先替换真正的换行符为转义形式
  const sanitized = jsonStr
    .replace(/\r\n/g, '\\n')
    .replace(/\n/g, '\\n')
    .replace(/\r/g, '\\n');
  return JSON.parse(sanitized);
}

注意：这个方案有个隐患——如果 JSON 字符串里本身包含 \\n（双反斜杠加n），替换后会被错误处理。更严谨的做法是使用正则匹配非转义状态的换行符：

function safeParse(jsonStr) {
  // 匹配不在反斜杠后面的换行符
  const sanitized = jsonStr.replace(/(?<!\\)\n/g, '\\n');
  return JSON.parse(sanitized);
}

但 (? 是 ES2018 的 lookbehind 断言，老旧浏览器不支持。稳妥起见，可以用简单循环处理。

### 3. 异常捕获与友好提示

无论采用哪种方案，都建议用 try-catch 包裹解析逻辑，并提供用户友好的错误信息：

try {
  const data = JSON.parse(responseText);
  // 正常处理数据
} catch (e) {
  console.error('JSON 解析失败，原始内容：', responseText);
  // 可以尝试前面提到的 safeParse 再解析一次
  // 或者直接提示用户数据异常
}

调试技巧

当遇到这种问题时，可以在浏览器控制台打印原始响应字符串，查看换行符的实际情况：

console.log(JSON.stringify(responseText));

这会显示字符串内部的转义情况，如果看到 \n 是实际换行符（而不是文本 \n），就能确认问题所在。

预防建议

前端在发送请求时，也可以考虑设置 Accept: application/json 头部，并明确要求后端返回标准 JSON。如果项目使用 fetch，可以这样配置：

fetch(url, {
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
})
.then(response => response.text()) // 先获取文本，方便调试
.then(text => {
  const data = JSON.parse(text);
  // ...
});

长期优化

如果是团队项目，建议在前端请求拦截器里统一添加 JSON 预处理逻辑，避免每个接口都重复写容错代码。同时推动后端建立 JSON 序列化规范，从源头杜绝这类问题。