直接粘贴HTML源码到textarea会出错，因浏览器会解析<、>和&等符号导致结构破坏或乱码；正确做法是先转义再赋值value，还原时需谨慎防XSS。
直接保存 HTML 源码到 textarea 里不是“复制粘贴”就能用的——源码里的 、<code>>、& 会立刻被浏览器解析或破坏结构，必须转义。
为什么直接粘贴HTML源码到textarea会出错
当你把一段像 <div class="box">Hello</div> 的 HTML 源码直接塞进 textarea 的内容里（比如写在标签之间或用 JS 赋值），浏览器会尝试解析其中的尖括号和实体符号。结果可能是：
-
<和>被当成标签起始/结束，导致textarea提前闭合或内容截断 -
&后跟字母（如 - 换行符在部分旧环境里丢失（尤其 Windows 行尾
\r\n未被统一处理）
正确保存HTML源码到textarea的三步操作
核心是：**先转义，再放入，最后可选还原**。适用于手动编辑、表单提交、代码预览等场景。
- 用 JavaScript 对原始 HTML 字符串执行转义：
str.replace(/&/g, '&').replace(/, '<').replace(/>/g, '>')（注意顺序，&必须最先处理） - 将转义后字符串赋给
textarea.value，或写在<textarea>...</textarea>标签内部（此时不解析 HTML） - 如果后续要还原成可执行 HTML（比如预览），需用
innerHTML或DOMParser，但务必确认来源可信，避免 XSS
textarea中保留换行与缩进的细节
textarea 原生支持换行，但要注意：
立即学习“前端免费学习笔记（深入）”；
- HTML 源码中的换行符（
\n）直接赋值给value就能保留；但若从服务器返回 JSON 或 innerHTML 提取，可能被压缩成单行 - 缩进空格会被保留，但浏览器默认不显示多个连续空格——如需可视化缩进，配合 CSS：
white-space: pre-wrap - 不要用
innerText读取textarea内容来获取源码，它会把<等自动解码；应始终用value
常见坑：用innerHTML直接塞HTML源码进textarea
这是最典型的错误写法：document.querySelector('textarea').innerHTML = '<div>test</div>'。后果是：
- IE 和部分老浏览器会忽略
innerHTML对textarea的设置，静默失败 - 现代浏览器虽不报错，但实际写入的是解码后的文本（
<div>test</div>），再读value时已丢失转义 - 正确写法永远是：
el.value = escapedHtmlString
真正麻烦的从来不是“怎么放进去”，而是“放进去之后要不要还原”“谁有权还原”——只要涉及用户输入的 HTML 源码，转义是保命线，漏掉任何一个 & 都可能打开 XSS 缝隙。
