最稳妥清除事件属性的方法是用 querySelectorAll 匹配所有 on* 属性元素，再逐个调用 removeAttribute('onclick') 等完整属性名移除；禁用 innerHTML 重赋值和全局正则替换，因其会丢失 addEventListener 监听器、触发重排、误伤 data 属性。
用 querySelectorAll + removeAttribute 清除事件属性最稳妥
直接删 onclick、onsubmit 这类属性，不能靠正则或重写 innerHTML。前者容易误杀 data-on-click 或注释里的伪代码，后者会清空已绑定的 addEventListener 监听器、触发重排、丢失焦点。
正确做法是匹配所有含事件属性的元素，再逐个调用 removeAttribute：
- 匹配范围要全：
document.querySelectorAll('[onclick], [onsubmit], [onchange], [onload], [onerror], [onfocus], [onblur], [onkeydown], [oninput], [onmousedown], [onmouseup]') - 移除时必须用完整属性名，比如
el.removeAttribute('onclick')，写成'click'无效 - 推荐一次性遍历清理：
['onclick','onsubmit','onchange',...].forEach(attr => el.removeAttribute(attr))
别碰 innerHTML = innerHTML 或全局正则替换
这两种方式看似快，但实际破坏性极强：
-
element.innerHTML = element.innerHTML会强制重新解析 HTML，已通过addEventListener绑定的监听器全部丢失，表单焦点也会被重置 - 正则如
/on\w+\s*=\s*["'][^"']*["']/gi在换行、CDATA、模板字符串场景下极易漏匹配或过匹配，Vue SSR 输出的data-v-xxx属性也可能被意外破坏 - 若 HTML 来自后端或富文本编辑器，这类“清洗”只是兜底，源头不控，前端永远在补漏
动态插入的内容必须单独处理
页面加载后 JS 插入的新元素（比如 insertAdjacentHTML、appendChild）不会自动继承你之前的清理逻辑。所以：
- 拼接模板字符串前就过滤：例如
str.replace(/on\w+\s*=\s*["'][^"']*["']/gi, '') - 对
innerHTML赋值前做一次清洗，比事后扫雷更可靠 - 如果用到第三方组件（如 Markdown 渲染器），确认它是否默认禁用内联事件；否则需 wrap 一层 sanitizer
彻底剥离脚本需要分两层：标签 + 属性
只清事件属性还不够，<script></script> 标签、javascript:void(0)、href="data:text/html,..." 等仍可能执行代码。安全闭环得组合处理：
- 删 DOM 中的
<script></script>和带事件属性的元素：document.querySelectorAll('script, [onclick], [onload], ...').forEach(el => el.remove()) - 但注意：这不会影响
addEventListener绑定的逻辑，也不会处理伪协议 href —— 它们不属于“行内脚本”的定义范畴 - 真正高危且难覆盖的是服务端返回的 HTML，此时应优先用
DOMPurify.sanitize()这类白名单库，而非手写清洗逻辑
最常被忽略的一点：清理不是一劳永逸的操作。只要存在运行时拼接 HTML 的路径，就必须在拼接前拦截，而不是等它进 DOM 再扫一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
