textarea换行在html中失效，需通过转义后替换\n为或用white-space:pre-line/pre-wrap css属性渲染。

textarea 本身能正确显示换行，但把它的值直接放进 div、p 等普通标签里时，换行会消失——因为 HTML 默认忽略换行符 \n。要让前端展示时保留富文本式的换行效果，关键不是“怎么存”，而是“怎么转、怎么渲染”。

textarea 的换行本质是 \n，不是

用户在 textarea 中按回车，浏览器实际存入的是 \n（Unix/macOS）或 \r\n（Windows）。这个字符在纯文本环境里有效，但在 HTML 渲染中不生效。直接 innerHTML = textarea.value，换行就变成空格或完全丢失。

安全转换 \n →
是最常用方案

适合内容可信或已过滤的场景，需先做 HTML 转义防 XSS，再替换：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 用正则将 & 替换为 &， 替换为 >
• 再把 \n（或统一处理后的 \n）替换成
  
• 最后用 innerHTML 插入，浏览器就能按行渲染

CSS white-space 属性更适合原始格式还原

如果希望保留缩进、多空格、换行等原始排版，且内容不含 HTML 标签，推荐用 CSS 控制：

• white-space: pre-line —— 合并多余空格，但保留 \n 换行（最常用，兼顾可读与简洁）
• white-space: pre-wrap —— 既保留 \n 和空格，又允许长文本自动折行
• 用法：
  ${textarea.value}

避免用

 标签直接包裹用户输入

 会原样显示所有空白，包括意外缩进和制表符，且默认字体等宽、无样式控制。若未清洗输入，还可能暴露恶意 HTML 或破坏布局。它适合代码块、日志等结构化纯文本，不适合通用富文本展示。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！