textarea.value中换行符统一为\n（现代浏览器），旧IE或特殊场景可能含\r\n，安全处理应匹配[\r\n]+；显示换行需white-space:pre-wrap；后端丢失换行先查前端是否误删\n。
直接说结论：textarea 本身按回车就换行，但“换行”只存在于 value 字符串里；真正显示成多行，得靠 CSS；提交后换行消失或变空格，大概率是后端没正确接收 \n 或 \r\n。
textarea.value 里的换行符到底是 \n 还是 \r\n？
现代浏览器（Chrome/Firefox/Safari）在 textarea.value 中统一返回 \n，不管用户用的是 Windows、macOS 还是 Linux。但有例外：
- 旧版 IE（
IE11及更早）可能返回\r\n，尤其在表单 submit 时 - 某些移动端 WebView（如部分安卓定制内核）仍会透传系统原生换行符
- 粘贴内容时，若来源是 Word 或邮件客户端，可能混入
\r\n或孤立\r
所以安全做法是：统一用正则处理 /[\r\n]+/g，而不是只匹配 \n。
前端渲染时让换行“看得见”的 CSS 必须项
textarea 内容本身带换行符，但把它塞进 <div> 或 <p> 后不换行，是因为 HTML 渲染器忽略 \n。解决方法不是加 <br>，而是控制空白符解析行为：
立即学习“前端免费学习笔记（深入）”；
- 必须设
white-space: pre-wrap：保留换行符和空格，同时允许自动折行（应对长单词） - 禁用
white-space: normal（默认值，吃掉换行）或pre（不折行，横向溢出） - 补一句
overflow-wrap: break-word，防英文/数字串撑爆容器 - 别信
wrap="hard"—— 它只影响表单提交时是否在每行末尾插入<br>，对显示无效
后端收不到换行？先确认前端发了什么
别急着改 PHP 或 Node.js 代码，先在浏览器控制台运行：
console.log(JSON.stringify(document.getElementById('myTextarea').value))
看输出里是 "line1\nline2" 还是 "line1line2"。如果连 \n 都没了，问题在前端：
- 检查是否用了
innerText赋值（它会抹掉换行）→ 改用textContent或直接读.value - 是否在 JS 中误用了
.replace(/\s+/g, ' ')→\s包含\n和\r，会一并干掉 - Vue/React 框架中用了
v-html或dangerouslySetInnerHTML却没转义换行 → 应先.replace(/\n/g, '<br>')再注入
如果前端确认发了 \n，但后端 $_POST 或 req.body 里没了，再查服务端配置 —— 比如 Nginx 的 underscores_in_headers on 干扰、PHP 的 magic_quotes（已废弃但老环境仍有）、或 Express 的 urlencoded 中 extended: false 会截断深层结构。
用 replace 处理换行时最常踩的坑
写 .replace(/\n/g, '<br>') 看似简单，但实际容易翻车：
- 没处理
\r\n→ 结果变成<br><br>，多出空行 - 没做 HTML 转义就直接插进
innerHTML→ 用户输<script>就 XSS - 对空值没 guard →
null.replace(...)直接报错 - 在 Vue/React 中反复调用该函数却没缓存结果 → 每次 render 都重算，性能白耗
推荐最小可用写法：
function nl2br(str) {<br> if (!str || typeof str !== 'string') return '';<br> return str.replace(/[\r\n]+/g, '<br>').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');<br>}
注意：这个函数只解决「显示」，不解决「存储」——原始换行符仍应保留在数据库里，否则导出纯文本或做全文搜索时会丢格式。
