本文介绍如何在网页中实时预览 textarea 输入的纯文本，既保留真实换行效果，又正确处理 ` ` 等转义序列，避免被当作普通字符显示，并提供健壮、可立即运行的 javascript 实现方案。
在 Web 开发中，常需将 <textarea> 的用户输入实时渲染为“所见即所得”的纯文本预览。但直接使用 textContent 会将换行符 渲染为空格（因 HTML 忽略空白符），而盲目使用 innerHTML 又可能误将用户输入的 \n（即字面量反斜杠+字母 n）当作普通文本显示，而非执行换行。
✅ 正确做法是：
- 监听 input 事件（非 change），确保每次按键/粘贴都即时响应；
- 对输入值做转义序列清理：用正则 /\n/g 匹配所有字面量 并移除（注意双反斜杠在 JS 字符串中表示一个 ）；
- 用 innerHTML 渲染，并配合 CSS 控制空白处理，使真实换行生效；
- 初始化时触发一次更新，保证页面加载后预览区立即显示初始内容。
以下是完整可运行示例：
<!DOCTYPE html>
<html>
<head>
<style>
#previewer {
white-space: pre-wrap; /* 保留换行与空格，自动换行 */
font-family: monospace;
background: #f5f5f5;
padding: 12px;
border: 1px solid #ddd;
min-height: 80px;
}
</style>
</head>
<body>
<textarea id="editor" cols="50" rows="5">text with
newlines
and escape char
representing a newline</textarea>
<div id="previewer"></div>
<script>
const editor = document.getElementById('editor');
const previewer = document.getElementById('previewer');
editor.addEventListener('input', () => {
// 移除所有字面量 '
'（即用户键入的反斜杠+n），保留真实换行
const cleanText = editor.value.replace(/\n/g, '');
// 使用 innerHTML + white-space: pre-wrap 实现自然换行
previewer.innerHTML = cleanText.replace(/
/g, '<br>');
});
// 初始化预览
editor.dispatchEvent(new Event('input'));
</script>
</body>
</html>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 若需支持更多转义序列（如 、\），可扩展 .replace() 链，例如：.replace(/\n/g, '').replace(/\t/g, ' ')；
- 绝对不要将用户未过滤的内容直接赋给 innerHTML（存在 XSS 风险），本例因仅处理纯文本且无 <, > 等标签字符，风险可控；若输入可能含 HTML 标签，请改用 textContent + <pre> + white-space: pre-wrap 方案；
- white-space: pre-wrap 是关键 CSS 属性：它让元素像 <pre> 一样保留换行和空格，同时支持自动折行，比单纯 <pre> 更友好。
总结：精准控制文本渲染需兼顾 JavaScript 字符串处理与 CSS 白空间行为。本方案以最小侵入性达成“去转义、保换行、即时响应”三重目标，适用于代码片段预览、日志查看等典型场景。
