HTML textarea换行应存原始换行符、读时按场景转换：存储时直接提交.value值，禁用trim和自动转义；网页显示用white-space:pre-line或替换为；回填textarea直接赋值.value。

HTML文本域（textarea）里的换行，在数据库中能存，也能读，但关键在于“怎么存”和“怎么读”——不是自动对齐的，得明确各环节的处理逻辑。核心原则是：**存原始换行符，读时按场景转换**。

存储阶段：保持原始换行符，别动它

用户在 textarea 中按回车，浏览器实际写入的是 （Unix/Linux/macOS）或 （Windows）。JavaScript 用 .value 取值时，默认就包含这些字符，无需额外添加或转义。

• ✅ 正确做法：直接取 document.querySelector('textarea').value，原样提交给后端
• ❌ 常见错误：
  • 调用 .trim() —— 会删掉末尾换行，也可能误伤开头
  • 用 .replace(/s+/g, ' ') 或类似正则清理空白 —— 属于 s，会被替换成空格
  • 用 innerText 或 textContent 取值 —— 它们把换行转为空格，彻底丢失结构
• 后端接收后，应禁用自动 trim、自动 HTML 转义、自动净化等中间处理；数据库字段用 TEXT 类型，以原生字节方式存储 或

读取后显示在网页上：两种主流方案选其一

从数据库读出带 的字符串，直接塞进 <div> 里不会换行——因为 HTML 默认忽略换行符。必须显式处理： <ul> <li> <strong>方案一：用 CSS 控制空白行为（推荐）</strong><br>给容器加样式 <code>white-space: pre-line，它会：

• 保留 的换行语义
• 合并连续空格和制表符
• 不强制保持缩进，更贴近自然阅读体验

示例：<div style="white-space: pre-line;">第一行 第二行</div>

方案二：用 JavaScript 替换为 <br>
适合需要完全控制渲染、或内容需支持富文本混合的场景：

• str.replace(/ | | /g, '<br>')（兼容所有换行变体）
• 再用 innerHTML 渲染（注意确保内容可信，避免 XSS）

读取后回填到 textarea：不用转换，直接赋值

如果要把数据库内容重新放进另一个 textarea（比如编辑页），不需要做任何替换——textarea 原生识别 和 ，直接 el.value = dbText 即可正确显示换行。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

立即学习“前端免费学习笔记（深入）”；

• ⚠️ 注意：不要用 innerHTML 或 textContent 设置 textarea 内容，那会破坏换行；必须用 .value
• 如果后端返回的是 JSON，且换行符被双重转义成 \n，前端需先修复：JSON.parse(JSON.stringify(dbText).replace(/\\n/g, '\n')) 或由后端修正序列化逻辑

额外提醒：避开“ 字面量”陷阱

有时你在数据库管理工具里看到 明明写着，但页面就是不换行——很可能存进去的不是真实换行符，而是四个字符： + r + + n。这通常源于：

• 前端多次 JSON.stringify() 或后端多次 addslashes()
• ORM 自动转义未关闭
• 日志或调试时误把转义显示当真实内容

验证方法：用 console.log(JSON.stringify(text)) 看引号内是否真有 ；若有 \n，说明已被转义，需在展示前用正则还原：text.replace(/\r\n|\r|\n/g, ' ')。