removeformat无法真正清理内联样式，因其仅移除execcommand插入的标签，不处理style属性字符串；需用domparser隔离解析并removeattribute('style')，或正则提取白名单css声明重建。
为什么 removeFormat 不能真正清理内联样式
removeFormat 看似是“清除格式”的标准方案，但它在现代浏览器中对 style 属性完全无效。它只移除由 execCommand 自身插入的标签（如 <strong></strong>、<h2></h2>），而不会解析或修改 style="margin:10px;color:red" 这类字符串。Chrome 中偶有 style 消失，是因粘贴时生成的 <span style="..."></span> 被整块删除，并非清洗行为；Firefox 和 Safari 下基本无反应。
用 DOMParser 安全提取并清洗 style 字符串
直接操作当前页面 DOM 清洗 style 属性有风险：可能触发重排、污染全局样式、或在内容未插入前就误改节点。正确做法是先隔离解析：
- 用
new DOMParser().parseFromString(htmlStr, 'text/html')创建独立文档 - 调用
doc.querySelectorAll('*[style]')获取所有带style的元素（注意不是只查doc.body） - 对每个元素执行
el.removeAttribute('style')—— 不要用el.setAttribute('style', '')或el.style.cssText = ''，后者会丢失原始单位、引号格式，且无法处理 JS 动态设置但未写回 HTML 的样式
正则提取白名单 CSS 声明再重建 style
若需保留部分内联样式（如 color、text-align），不能靠 removeFormat，也不能硬删整个 style 属性。必须字符串级处理：
- 用
el.getAttribute('style')取出原始值，例如"margin:0;padding:8px;color:#333;font-weight:bold;" - 用正则匹配白名单属性：
/(color|text-align|font-family|font-size|line-height)\s*:\s*[^;]+;/gi - 清洗后若结果为空字符串，必须调用
el.removeAttribute('style')；设为空字符串（setAttribute('style', '')）会留下空属性，仍可能被 CSS 选择器意外命中
清理后最易忽略的验证点
“页面看起来没坏”不等于清洗安全。以下三点常被跳过：
- 检查 JS 是否通过
element.style.xxx读取或依赖某个内联样式值（比如根据style.width计算布局） - 确认无障碍工具（如屏幕阅读器）未因移除
aria-*相关的style（如position: absolute; clip: rect(1px, 1px, 1px, 1px)）而失效 - 验证 SSR 渲染结果与客户端 hydration 后是否一致——若服务端注入了带
style的 HTML，而客户端清洗逻辑未同步执行，会出现闪动或错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
