textContent是最省心的安全入口，因它不解析HTML、天然绕过实体解码与标签误判，可安全处理含&、、"、'等字符的动态内容，且保留中文、emoji、换行等所有原始字符。
直接拼接字符串到 innerHTML 或 alert() 里，只要内容含 &、、>、"、'，就大概率出错——不是显示异常，就是脚本提前截断，甚至被当成标签解析丢内容。
为什么 textContent 是最省心的安全入口
它不走 HTML 解析流程，只取纯文本，天然绕过所有实体解码、标签误判问题。动态内容不管来自表单输入、URL 参数还是 API 响应，只要塞进 textContent，再挂到 DOM 上，浏览器就老老实实当字符串渲染。
- 不用手动判断哪些字符要转、哪些不用——
textContent全包了 - 中文、emoji、空格、换行全保留，无编码副作用
- 比
innerText更可靠：innerText会受 CSSdisplay: none影响，读不到隐藏内容；textContent不吃这套 - 示例：想把用户输入的
score > 90 & status 安全显示在里，写document.getElementById('expr').textContent = userInput就完事
innerHTML 场景下必须手动转义的 5 个字符
如果你确实需要保留部分 HTML（比如允许 但禁掉 <script></script>），就不能依赖 textContent，得自己处理转义。此时只用管这 5 个字符：&、、>、"、'。其他 Unicode 字符（包括中文）一律不动。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
&必须最先替换，否则后续生成的&可能被二次识别为实体开头 - 顺序不能乱：先
&→&，再→，再>→>，然后引号 - 别用正则
/[&"']/g一把梭——它无法保证&优先，容易崩 - 轻量函数示例：
function escapeHtml(str) {<br> return String(str)<br> .replace(/&/g, '&')<br> .replace(/, ' .replace(/>/g, '>')<br> .replace(/"/g, '"')<br> .replace(/'/g, ''');<br>}
从 DOM 属性或 innerHTML 里读值时的陷阱
很多人以为 el.getAttribute('data-msg') 或 el.innerHTML 拿出来就是“原始值”，其实不然。如果 HTML 源码里写的是 data-msg="User & Admin"，浏览器解析后，JS 读到的已经是 User & Admin（中间多了一层实体解码），再传给 alert() 就显示成字面 User & Admin，而非预期的 User & Admin。
- 优先用
el.textContent提取——它跳过 HTML 解析，拿到的就是你写在标签里的原样字符串 - 如果必须从
data-属性读，且服务端没做预转义，就得在 JS 里再跑一遍escapeHtml() - 服务端模板（如 Jinja2、Twig）默认可能不转义，确认是否用了
|safe或|raw这类标记，那是危险信号 - JSON 嵌入 HTML 时更麻烦：
<script>var data = {{ json }}</script>中的必须破坏掉，比如写成，否则浏览器解析器会在第一个就终止脚本块
真正难的不是写转义函数，而是判断「该不该转」和「从哪取值」——同一段数据，从 textContent 取就安全，从 innerHTML 或未过滤的 dataset 取就可能已变形。这个决策点，比转义逻辑本身更容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
