真正可靠的做法是走 DOM 遍历 + removeAttribute()，需用 querySelectorAll 匹配全部事件属性、小写精确移除、动态内容前置过滤，并注意 id/class 属性删除的语义边界与副作用。
如何安全批量删除 onclick 等事件属性
直接用正则全局替换或 innerHTML 重赋值，八成会出事。真正可靠的做法是走 DOM 遍历 + removeAttribute()。
常见错误现象包括：document.getElementById('modal')突然返回 null、表单提交逻辑消失、焦点丢失、第三方库（如 Prism.js）高亮失效。
- 匹配范围要全：用
document.querySelectorAll('[onclick], [onsubmit], [onchange], [onload], [onerror], [onfocus], [onblur], [onkeydown], [oninput]')覆盖主流事件属性 - 清除动作要准：对每个匹配元素执行
el.removeAttribute(attr)，attr必须是完整小写名（如'onclick'，不是'click'） - 动态内容要兜底：后续通过
insertAdjacentHTML()或模板字符串插入的 HTML，必须在拼接前就过滤掉事件属性，不能依赖“事后清理”
删 id 属性时为什么正则容易误伤 data-id
因为 id=["'][^"']*["'] 这类简单正则不识别语义边界，它会把 data-id="123" 中的 id="123" 当作独立属性吃掉，破坏自定义属性完整性。
真正可控的写法是加空格/换行锚点 + 否定字符集：
- 查找模式用：
\sid\s*=\s*["'][^"']*["']（开头带空白符，确保只匹配独立属性） - 必须启用正则的
s标志（或编辑器等效设置），否则.不匹配换行，导致跨标签捕获 - 删完后务必检查 JS 中所有
getElementById()、querySelector('#...')、CSS 锚点链接是否还能正常工作
class="" 和 class 属性彻底删除的区别
调用 el.classList.remove('foo') 清空最后一个类后，el.getAttribute('class') 返回空字符串 ""，但 el.hasAttribute('class') 仍为 true——这是 DOM 规范行为，不是 bug。
影响集中在少数场景：
- CSS 中
[class]选择器仍能匹配该元素，而[class=""]不匹配 - 某些 SSR 框架或静态分析工具可能把空
class属性当作冗余项告警 - 若需彻底移除，得手动
el.removeAttribute('class')，但多数情况下留着更安全（避免意外触发属性监听）
sanitize-html 里 allowedAttributesMap 的实际作用
它不是开关，而是白名单+通配符组合策略。配置 { '*': ['href', 'src', 'alt'], 'a': ['download'] } 表示：所有标签都允许 href/src/alt，但只有 标签额外放行 download。
容易被忽略的关键点：
-
allowedAttributesMap['*']优先级低于具体标签规则，比如'a': ['href']会覆盖'*': ['href', 'src']对的src放行 - 属性名校验严格：非法格式如
onmouseover或含 Unicode 控制符的属性名，会被VALID_HTML_ATTRIBUTE_NAME正则直接剔除，不进白名单判断流程 - URL 类属性（
href,src）还会额外过一遍 scheme 白名单，默认只允http/https/mailto/tel，javascript:直接被截断
真正难的不是写对一条 removeAttribute()，而是确认哪些属性该留、哪些该删、删完谁还在依赖它。每次清理前，先搜一遍项目里所有 getAttribute('id')、querySelector('[class]')、href="javascript: 这类耦合点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
