如何在 HTML 中原样显示纯文本（保留换行但去除转义字符）

本文介绍如何在网页中实时预览 textarea 输入的纯文本内容，既保留实际换行符（n）的视觉效果，又正确处理并移除字符串中表示换行的转义序列（如 `n`），避免将其显示为字面字符，并通过 `innerhtml` 与正则替换实现精准控制。

在 Web 开发中，常需将用户在 中输入的文本“所见即所得”地展示在预览区域（如 </p> <div>）。但需注意： </p> <ul> <li>用户输入的真实换行符（按 Enter 键产生）在 value 中是原始 n 字符，应渲染为换行； </li> <li>而字符串字面量中的 \n（即两个反斜杠 + n）是 <a href="https://seo.sqjnqi.com/tag/java/"><b>java</b></a>Script 转义序列表示，在 <a href="https://seo.sqjnqi.com/tag/html/"><b>html</b></a> 中若不处理，会直接显示为 n 或空格，造成语义混淆。</li> </ul> <p>✅ 正确做法是： </p> <ol> <li>使用 ‘<a href="https://seo.sqjnqi.com/tag/input/"><b>input</b></a>’ <a href="https://seo.sqjnqi.com/tag/%e4%ba%8b%e4%bb%b6/"><b>事件</b></a>替代 ‘change’，实现实时响应（包括按键、粘贴、删除等所有输入行为）； </li> <li>对 editor.value 执行 .replace(/\n/g, ”) —— 注意正则中 \n 匹配的是字面量 n（即用户手动输入的反斜杠+字母n），而非真正的换行符； </li> <li>将处理后的字符串赋给 previewer.<a href="https://seo.sqjnqi.com/tag/innerhtml/"><b>innerHTML</b></a>，使其中的 <strong>真实 n 自动被<a >浏览器</a>解析为 <br /> 效果</strong>（因 <div> 默认不保留空白，但 innerHTML 渲染时会将换行符视为文本节点间的空白，结合 <a href="https://seo.sqjnqi.com/tag/css/"><b>css</b></a> 可控）； </p> <li>若需严格保持所有空白（含空格、制表符、换行），推荐配合 <pre><code class='language-default'>标签或 CSS： </li></ol><pre><div style="white-space: pre-wrap; font-family: monospace;"></div></code></pre> <p>完整示例代码：</p> <pre><code class='language-default'><textarea cols="50" rows="5">text with newlines and escape char n representing a newline

⚠️ 注意事项：

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

• 避免直接使用 innerHTML = ... 处理用户输入（存在 XSS 风险），除非已做严格过滤；此处推荐 textContent + white-space: pre-wrap 组合，既安全又准确；
• textContent 本身不会解析 HTML，但配合 white-space: pre-wrap 可完美保留换行、空格和自动折行；
• 若必须支持粗体/链接等有限格式，再考虑 innerHTML + domPurify 等库净化；
• 不要使用已废弃的 aintext>，也不建议仅依赖

  （它会强制等宽字体且不自动换行长行）。

总结：纯文本预览的核心在于「区分真实换行符与字面转义序列」，通过正则清洗 + CSS 白空间控制 + 安全 DOM 属性赋值，即可实现简洁、健壮、符合语义的呈现效果。