使用 `textcontent` 会将 ` ` 当作普通字符显示，而用 `innerhtml` 结合正则替换可真实渲染换行并清除多余的转义序列 ` `。
在 Web 开发中，若希望用户在 <textarea> 中输入的内容（如含字面量 字符串）以“所见即所得”的方式呈现于预览区——即：保留真实的换行（回车），但移除表示换行的转义序列 字符本身——需注意 DOM 属性与文本解析的差异。
关键点在于：
- textContent 安全但“字面化”：它将所有内容（包括 ）视为纯文本，不会解析换行，也不会执行任何转义处理；
- innerHTML 可解析 HTML 结构，但需手动处理换行符：浏览器默认忽略连续空白和换行，需配合 CSS 或换行转换才能显示为多行。
✅ 推荐方案（兼顾实时性与语义清晰）：
const editor = document.getElementById('editor');
const previewer = document.getElementById('previewer');
editor.addEventListener('input', () => {
// 1. 移除所有字面量 '
'（反斜杠 + n），避免被误认为换行指令
// 2. 将真实的换行符
替换为 <br>，使 HTML 正确换行
const cleaned = editor.value
.replace(/\n/g, '') // 删除转义序列 '
'
.replace(/
/g, '<br>'); // 将真实换行转为 <br>
previewer.innerHTML = cleaned;
});
// 初始化预览（尤其当 textarea 含默认值时）
editor.dispatchEvent(new Event('input'));对应 HTML 示例：
立即学习“前端免费学习笔记（深入）”；
<textarea id="editor" cols="50" rows="5">Hello World This is a real newline Another line</textarea> <div id="previewer"></div>
⚠️ 注意事项：
- 不要使用已废弃的 <plaintext> 标签（不被现代标准支持，且行为不可控）；
- <pre> 标签虽能保留空白和换行，但会原样输出 字符（即显示为文字 ），不符合“去除转义字符”的需求；
- 使用 'input' 事件而非 'change'，确保每次按键（包括粘贴、删除）都即时更新预览；
- 若需进一步增强安全性（如防止 XSS），应在设置 innerHTML 前对内容做 HTML 实体转义（例如用 DOMPurify.sanitize() 或自定义转义函数）；
- 如需保留缩进或空格，可为 #previewer 添加 CSS：white-space: pre-wrap;，此时也可改用 textContent + 换行符转 <br> 的组合，但逻辑需同步调整。
总结：纯文本展示 ≠ 纯字符输出。根据需求选择 textContent（绝对安全、无格式）或 innerHTML（可控格式、需清洗），并明确区分“真实换行符”与“字面量 字符”——这是实现精准文本预览的核心前提。
