不能直接遍历 element.attributes 删除 style，因为 attributes 是只读类数组对象，遍历时调用 removeattribute('style') 会动态改变集合长度，导致漏处理或越界；且粗暴删除不触发样式重计算，真正清洗需用 getattribute('style') 提取字符串，正则匹配白名单声明（如 /font-family\s:\s1+;/gi），再 setattribute 写回或为空时 removeattribute；批量处理应使用 document.queryselectorall('*[style]') 而非递归遍历。; ↩
为什么不能直接遍历 element.attributes 删除 style
因为 attributes 是只读类数组对象，遍历时调用 removeAttribute('style') 会动态改变集合长度，导致漏处理后续项或越界报错；更关键的是，这不叫“清洗”，是粗暴删除——浏览器不会重新解析剩余属性，也不会触发样式重计算。真正要保留部分声明（比如只留 font-family），必须把 style 值当字符串处理。
如何用 getAttribute('style') + 正则提取白名单样式
先用 getAttribute('style') 拿原始字符串（含空格、分号、引号），再用正则提取需要保留的声明：
-
/font-family\s*:\s*[^;]+;/gi匹配单个声明，注意末尾分号必须捕获，否则值被截断 - 多个属性拼成
/(font-family|color|text-align)\s*:\s*[^;]+;/gi，但要求它们在原始字符串中是独立声明（不能跨行、不能嵌套在括号里） - 提取后用
setAttribute('style', cleanedString)写回；别用element.style.fontFamily =，它不支持批量写入，且会丢失原始单位和引号 - 清洗后字符串为空，必须调用
removeAttribute('style')，设为空字符串仍会触发内联样式计算
批量处理用 document.querySelectorAll('*[style]') 而非递归检查
想覆盖整个页面所有带内联样式的元素，别写递归遍历 DOM 并查 el.attributes 是否含 style——效率低、易漏动态插入节点。直接用 CSS 选择器更可靠：
-
document.querySelectorAll('*[style]')一次拿到所有带style属性的元素（div、span、p等任意标签） - 该选择器不匹配 JS 动态设置但未反映在 HTML 属性中的元素（如
el.style.color = 'red'），这类需单独处理el.style.cssText - 对每个匹配元素，顺序执行：
getAttribute('style')→ 清洗 →setAttribute('style', ...)或removeAttribute('style')
VSCode 正则批量清理脚本与样式标签的实操要点
在编辑器里做全局清理时，优先用 VSCode 自带的正则查找替换（快捷键 Ctrl+Shift+F，开启 .* 模式），比运行时 JS 更彻底：
- 删
<script></script>：搜索<script>]*?)?>[\s\S]*?</script>，替换为空 - 删
<style></style>：搜索<style>]*?)?>[\s\S]*?</style>，替换为空 - 删所有标签（纯文本提取）：搜索
]*>，但慎用——会破坏语义结构，建议仅用于中间数据清洗阶段 - 务必提前
git commit备份，VSCode 的替换历史可回滚，但误操作仍可能跨文件污染
真正麻烦的不是匹配，而是白名单逻辑的边界：比如 font-family: "Times New Roman", serif; 中的双引号和逗号，正则得能吞下这些字符；又比如 color: rgba(0,0,0,0.5); 里的括号，[^;]+ 会提前截断。这种细节不试一遍根本不知道漏在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
