textContent能安全转义HTML，因浏览器原样渲染字符串、不解析HTML实体；实操用临时div设textContent再取innerHTML即可，无需正则且无误转风险。
为什么直接用 textContent 就能安全转义 HTML？
因为浏览器会把字符串原样当文本渲染，不解析其中的 <、>、& 等字符。这是最轻量、最可靠的方式，不需要正则替换，也不存在漏转或误转风险。
常见错误是手写正则去替换，比如用 /&/g → &，但容易漏掉 < 和 >，或者在已有实体（如 ）里重复转义，变成 —— 这就坏了。
实操建议：
- 创建一个临时
div元素，设其textContent为原始字符串，再读取它的innerHTML，就是转义后的结果 - 不要对用户输入做“预清洗”，比如删掉
&再补，这会破坏原本想保留的纯文本意图 - 如果输入为空或只含空白符，
textContent依然有效，无需额外判空
反向解码：用 innerHTML + textContent 安全还原实体
用户粘贴 <div>hello</div> 想看它渲染成什么样子？不能直接 innerHTML = input，那会执行脚本、触发 XSS。正确做法是让浏览器“解析但不执行”。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 新建
div，设innerHTML = input，再取它的textContent—— 这样实体被解码，但所有标签、属性、事件都被剥离 - 避免用
DOMParser，它在某些老版本 Safari 中对孤立实体（如©）支持不稳定 - 注意：如果输入含非法实体（如
&xyz;），浏览器会原样保留，textContent也会照搬，这是预期行为，不用报错或过滤
textarea 输入框里换行和空格怎么保持原样？
textarea 默认会把多个空格、制表符、换行压缩显示，但用户需要看到“所见即所得”的原始格式。关键不是转义逻辑，而是 CSS 和属性控制。
实操建议：
- 给
textarea加style="white-space: pre-wrap;"，保留换行和空格，同时允许自动换行 - 不要用
pre标签替代textarea，那样无法编辑 - 如果用户复制粘贴带缩进的代码，
textarea的value属性天然保留全部空白符，无需额外处理 - 避免监听
input时反复调用value.trim()，会破坏缩进结构
要不要支持批量转义、JSON 字符串嵌套场景？
普通工具页面不需要。一旦加“JSON 模式”，就得区分字符串边界、引号类型、转义斜杠，立刻引入语法解析复杂度。95% 的使用场景只是粘贴一段 HTML 片段或属性值。
实操建议：
- 明确在界面上写：“仅处理纯文本内容，不解析 JSON / HTML 文档结构”
- 如果用户真要处理 JSON 中的字段值，教他先复制字段双引号内的内容，再粘贴到工具里 —— 这比写个 JSON tokenizer 更可靠
- 不提供“递归转义”选项，那会导致
&变成&，极易误操作
真正难的是边界情况：比如用户输入 a（Unicode 十六进制实体），浏览器默认会解码成 a；但如果你希望它“作为字符串被转义”，就得先把它当纯文本拦住——这意味着你得在转义前判断输入是否已是合法实体，而这几乎没法无损判断。所以干脆不碰，文档里注明“本工具不对已有实体做二次处理”。
