如何在 HTML 的 pre/code 标签中正确渲染字符串变量中的换行符

当从 http 接口获取含 `\n` 转义序列的代码字符串（如 `console.writeline("hello");\nconsole.writeline("world");`）并直接插入 `

` 或 `` 标签时，浏览器默认将其视为普通文本而非真实换行——需将字符串中字面量的 `"\\n"` 正确解析为实际换行符 `\n` 才能正常显示。
在 Web 开发中，常见误区是认为后端返回的 "console.WriteLine(\"Hello\");\\nconsole.WriteLine(\"World\");" 中的 \\n 会被前端自动识别为换行。实际上，这是 JavaScript 字符串中表示“反斜杠 + n”的字面量（即两个字符），而非真正的换行控制符（U+000A）。
 和  标签仅对真实的换行符（\n、\r\n）生效，对 HTML 实体或转义字符串（如 
 或 \\n）无反应。
✅ 正确做法：在前端接收响应后，对字符串执行转义还原。例如，在 JavaScript 中使用：
// 假设 response.data.code 是后端返回的字符串，其中 "\n" 是字面量 "\\n"
const rawString = response.data.code; // "console.WriteLine(\"Hello\");\\nconsole.WriteLine(\"World\");"

// 将字面量 "\\n" 替换为实际换行符 \n
const processedCode = rawString.replaceAll("\\n", "\n");

// 现在可安全插入 pre/code 标签
document.querySelector('pre').textContent = processedCode;
// 或在模板引擎中（如 Vue/React）绑定 processedCode

⚠️ 注意事项：

							

								
								

									大同搜索
									
多语言高质量的AI搜索
								
								下载 
							
						

replaceAll("\\n", "\n") 中第一个参数是双反斜杠 \\n（匹配字符串中两个字符：\ 和 n），第二个参数是单个换行符 \n；
若字符串中还包含 \\r\\n 或其他转义组合（如 \\t），需按需扩展处理，但代码片段通常只需处理 \n；
不要使用 .replace(/\\n/g, "\n") 的正则写法（除非确保字符串无其他干扰），因 replaceAll() 更语义清晰且避免正则特殊字符问题；
切勿在 
 内使用 innerHTML 插入未转义内容（存在 XSS 风险），推荐统一用 textContent 或框架的安全绑定机制（如 Vue 的 v-text、React 的 {value}）；


后端更优方案是直接返回已解析的原始换行符（即响应体中真实包含 \n 字节），而非 JSON 中转义后的 "\\n" —— 这需确保 API 返回的是标准 JSON，且前端通过 JSON.parse() 正确解析（现代 fetch().json() 默认处理良好）。

? 总结：核心在于区分「换行符字面量」与「换行符控制符」。前端拿到的字符串若含 "\\n"，必须显式还原；而 
 标签本身无需额外 CSS（如 white-space: pre 已是默认行为），只要内容含真实 \n，即可原样换行渲染。
立即学习“前端免费学习笔记（深入）”；