textarea与pre标签换行问题：如何保持文本格式一致？

这个问题我之前也碰到过！核心原因是textarea里的换行是换行符(\n)，但如果数据在提交、存储或渲染的某个环节被意外处理了，pre标签就没法正确识别这些换行。下面给你一步步解决的方案：

1. 确保前端提交时保留原始换行 #

textarea的value属性本身就会包含用户输入的换行符(\n)，所以提交时直接获取值即可，不要做额外的替换处理。比如：

// 正确获取textarea内容，保留所有换行
const inputContent = document.getElementById('your-textarea-id').value;

不管是用form表单提交还是AJAX发送，直接把这个值传给后端就行，别手动把\n换成
或者其他字符。

2. 后端存储时不要修改换行符 #

后端接收数据后，不要将\n替换为
或者删除，直接用参数化查询存入数据库（避免SQL注入的同时，完整保留原始内容）。比如用Node.js/Express的示例：

app.post('/save-content', (req, res) => {
  const userContent = req.body.content;
  // 用参数化查询存储，确保换行符完整保留
  db.query('INSERT INTO info_table (content) VALUES (?)', [userContent], (err) => {
    if (!err) res.json({ success: true });
  });
});

3. 前端渲染pre标签时的关键处理 #

渲染到pre标签时，一定要用textContent而不是innerHTML插入内容——这样既会保留所有换行和空格，还能避免XSS攻击。另外给pre标签设置合适的CSS，让换行更友好：

<!-- 页面上的pre容器 -->
<pre id="info-display"></pre>

// 从后端获取存储的内容后渲染
fetch('/get-content')
  .then(res => res.json())
  .then(data => {
    const preElement = document.getElementById('info-display');
    // 用textContent插入，完美保留换行
    preElement.textContent = data.content;
    // 设置white-space: pre-wrap，让超出宽度的内容自动换行，同时保留手动换行
    preElement.style.whiteSpace = 'pre-wrap';
  });

常见坑点避坑 #

• 不要给pre标签设置white-space: normal，这个属性会合并所有换行和空格，直接破坏格式；
• 如果后端用模板引擎（比如EJS、PHP）输出内容，要确保转义HTML特殊字符的同时保留换行。比如PHP里用htmlspecialchars($content, ENT_QUOTES, 'UTF-8')，既转义<>&等字符，又保留\n；
• 如果发现后端返回的内容里\n被换成了
  ，可以在前端用content.replace(/<br\s*\/?>/gi, '\n')把
  转回换行符，再插入pre标签。

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