本文介绍如何在网页中实时预览 textarea 输入的纯文本内容，既保留实际换行符（ ）的视觉效果，又正确处理并移除字符串中表示换行的转义序列（如 ` `），避免将其显示为字面字符，并通过 `innerhtml` 与正则替换实现精准控制。
在 Web 开发中，常需将用户在 <textarea> 中输入的文本“所见即所得”地展示在预览区域（如 <div>）。但需注意：
- 用户输入的真实换行符（按 Enter 键产生）在 value 中是原始 字符，应渲染为换行；
- 而字符串字面量中的 \n（即两个反斜杠 + n）是 JavaScript 转义序列表示，在 HTML 中若不处理，会直接显示为 n 或空格，造成语义混淆。
✅ 正确做法是：
- 使用 'input' 事件替代 'change'，实现实时响应（包括按键、粘贴、删除等所有输入行为）；
- 对 editor.value 执行 .replace(/\n/g, '') —— 注意正则中 \n 匹配的是字面量 （即用户手动输入的反斜杠+字母n），而非真正的换行符；
- 将处理后的字符串赋给 previewer.innerHTML，使其中的 真实 自动被浏览器解析为 <br> 效果（因 <div> 默认不保留空白，但 innerHTML 渲染时会将换行符视为文本节点间的空白，结合 CSS 可控）；
- 若需严格保持所有空白（含空格、制表符、换行），推荐配合 <pre> 标签或 CSS：
<div id="previewer" style="white-space: pre-wrap; font-family: monospace;"></div>
完整示例代码：
<textarea id="editor" cols="50" rows="5">text with
newlines
and escape char
representing a newline</textarea>
<div id="previewer" style="white-space: pre-wrap; font-family: monospace; margin-top: 12px; padding: 8px; background: #f9f9f9; border-radius: 4px;"></div>
<script>
const editor = document.getElementById('editor');
const previewer = document.getElementById('previewer');
editor.addEventListener('input', () => {
// 移除用户手动输入的字面 '
'（即反斜杠+n），保留真实换行
const cleanText = editor.value.replace(/\n/g, '');
previewer.textContent = cleanText; // ✅ 更安全：避免 XSS，且 white-space: pre-wrap 已保障换行
});
// 初始化预览
editor.dispatchEvent(new Event('input'));
</script>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免直接使用 innerHTML = ... 处理用户输入（存在 XSS 风险），除非已做严格过滤；此处推荐 textContent + white-space: pre-wrap 组合，既安全又准确；
- textContent 本身不会解析 HTML，但配合 white-space: pre-wrap 可完美保留换行、空格和自动折行；
- 若必须支持粗体/链接等有限格式，再考虑 innerHTML + DOMPurify 等库净化；
- 不要使用已废弃的 <plaintext>，也不建议仅依赖 <pre>（它会强制等宽字体且不自动换行长行）。
总结：纯文本预览的核心在于「区分真实换行符与字面转义序列」，通过正则清洗 + CSS 白空间控制 + 安全 DOM 属性赋值，即可实现简洁、健壮、符合语义的呈现效果。
