VSCode原生“Trim Trailing Whitespace”仅删行尾空格，不处理class=""等空属性或空标签；需用正则批量替换：class\s=\s"'、style\s=\s"'删空属性，]*?/?>匹配自闭合空标签，]*?>[\s\S]*?]*?>匹配成对空容器，并避开script等语义敏感区域。
VSCode 里用正则批量删空属性和空标签
编辑器自带的“Trim Trailing Whitespace”只清行尾空格，对 class=""、、<div></div> 这类冗余内容完全无效。必须打开全局搜索替换（Ctrl+Shift+F），点亮右上角 .* 按钮启用正则模式：
- 删空属性：
class\s*=\s*["']["']或style\s*=\s*["']["']，替换成空 - 删空标签：
]*?\/?>配合]*?>[\s\S]*?]*?>分两步处理，前者抓自闭合空标签（如<img src="" alt="使用HTML编辑器一键清除多余空格和空行的方法" >），后者抓成对空容器（如<div></div>） - 跳过
<pre class="brush:php;toolbar:false;"></code>、<code><script></code>、<code><style></code>、<code><textarea></code> 区域——这些标签里的换行是语义必需的，正则无差别扫描会破坏代码逻辑</li></ul><H3>清理 HTML 注释不能只靠单行正则</H3><p>老项目里常有跨多行的注释块，比如：</p><pre class="brush:php;toolbar:false;"><!-- TODO: 重构 header @author zhang --></pre><p>用 <code><!--.*?-->只能匹配单行注释，遇到换行就断。必须用<!--[\s\S]*?-->——其中[\s\S]表示“任意字符（含换行）”，*?是非贪婪匹配，避免吞掉两个注释之间的正常 HTML。命令行下可用：
perl -0777 -i -pe 's/<!--.*?-->//gs' index.html，但注意：这个正则仍会误杀<style></style>内的/* */注释，这类内容得交给 PostCSS 或专门的 CSS 压缩工具处理。立即学习“前端免费学习笔记（深入）”；
DOM 层面清理文本节点空白必须用 childNodes
想清掉
#left容器里所有子文本节点的首尾换行和中间多个空格？别用children，它只返回元素节点，会漏掉\n\t这类纯文本节点。正确做法是遍历childNodes，并加语义判断：- 只处理
nodeType === Node.TEXT_NODE（即3） - 先用
/\S/.test(text)过滤——跳过纯空白节点（比如仅含制表符或换行的缩进） - 清洗时分两步：
text.trim().replace(/\s+/g, ' ')，\s比
jQuery 的
.text()会把整个子树文本合并成字符串再返回，无法控制清洗粒度；.html()返回的是序列化后的字符串，改了也刷不到 DOM 上。inline-block 和行内元素间的空隙不是“空格”而是渲染行为
写成这样：
<span>A</span>\n<span>B</span>，浏览器渲染出的间隙不是源码里那个换行符本身，而是行内格式化上下文（IFC）把换行当空格处理的结果。所以删源码换行只是治标。真正可控的解法是 CSS 层面干预：
- 父容器设
font-size: 0，子元素再设回正常字号——简单直接，但要注意继承影响 - 改显示模式：
display: flex或display: grid，彻底绕开 IFC 的空白处理逻辑 - 用 HTML 注释“缝合”：
<span>A</span><!-- --><span>B</span>，比删换行更易读，也不影响可维护性
最常被忽略的一点：这些空隙在移动端可能因字体渲染差异放大，调试时别只盯着源码看，得开 DevTools 的 Layout 面板确认是 margin/padding 还是 IFC 空隙。
- 只处理
