本文讲解如何使用 javascript 将 textarea 输入的纯文本（含真实换行）实时渲染到预览区域，同时自动过滤掉字符串中字面意义的 ` ` 转义序列，确保显示效果符合预期。
在 Web 开发中，常需实现“所见即所得”的文本预览功能，例如简易 Markdown 编辑器或代码片段展示区。但一个常见误区是：用户在 <textarea> 中输入 text without formatting 时， 是作为字面字符（即反斜杠 + 字母 n）存在的，而非真正的换行符；而真实的换行则由用户按 Enter 键产生（对应 或 换行符）。若直接用 textContent 渲染，所有换行都会被浏览器忽略（因 <div> 等元素默认不保留空白格式）；若用 innerHTML 又可能误将字面 解析为 HTML 标签或引发 XSS 风险。
✅ 正确做法是：
- 使用 input 事件（非 change），实现实时响应；
- 对 editor.value 进行预处理：用正则 /\n/g 移除字面 序列（注意双反斜杠在 JS 字符串中表示单个 ）；
- 将处理后的字符串赋给 previewer.innerHTML，并借助 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: #f5f5f5; 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.innerHTML = cleanText;
});
// 初始化预览（尤其当 textarea 有默认值时）
editor.dispatchEvent(new Event('input'));
</script>? 关键说明：
立即学习“前端免费学习笔记（深入）”；
- white-space: pre-wrap 是核心 CSS 属性：它让真实换行符（ ）生效，同时允许文本自动换行以适应容器宽度；
- 不推荐使用 <pre> 标签包裹 previewer 并直接设 textContent——这虽能保留换行，但无法过滤字面 ，且会破坏排版灵活性；
- 绝对避免直接将用户输入拼接进 innerHTML 且不做任何清洗（如未移除 <script> 标签），本方案因仅移除 字符、不涉及 HTML 解析，故无 XSS 风险；
- 若需进一步增强安全性（如支持有限 HTML 标签），应使用专用库如 DOMPurify，而非手动正则替换。
通过以上方式，你就能精准控制文本渲染行为：既忠实呈现用户输入的真实结构（Enter 换行），又干净剔除干扰性的转义序列，达成真正“无格式但可读”的预览效果。
