正则批量删除空段落比JS更高效稳定，因其不依赖DOM加载、可处理SSR/邮件模板等字符串场景，且能精准匹配纯空、空白字符、 、br及空标签等四类情况。
直接用正则批量删空 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 或仅含空白的段落，比手写 JS 更快、更稳、不依赖运行时环境。
为什么不能只靠 JavaScript 的 remove()
很多人一上来就写 document.querySelectorAll('p') 然后遍历判断 textContent.trim() === '' 再调 remove()。这看似合理，但有硬伤：
- 必须等 DOM 加载完成才能执行，无法处理服务端生成的 HTML 字符串（比如 SSR 模板、邮件模板、导出 HTML）
- 若页面用了 Shadow DOM、
<template></template>或未挂载的 fragment，querySelectorAll根本查不到 - 遇到
<p> </p>、<p><br></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>、<p><span></span></p>这类“视觉为空但 DOM 不空”的情况，textContent.trim()会漏判 - 每次操作都触发重排（reflow），大量段落时卡顿明显
VSCode 正则精准匹配四类空段落
打开 VSCode，Ctrl + Shift + F，开启 .* 模式，按顺序执行以下替换（每条单独运行，避免误伤）：
- 纯空段落：
<p></p>→ 替换为空 - 仅空白字符（空格、换行、制表符）：
<p>\s*</p>→ 替换为空 - 含
<p>(\s| )*</p>→ 替换为空 - 含
<br>或空<span></span>等“伪空”结构：<p>(\s|<br>|<span>]*></span>)*</p>→ 替换为空
⚠️ 注意：先备份文件；勿在 <pre class="brush:php;toolbar:false;"></code>、<code><code></code>、<code><textarea></code> 区域内运行这些正则，它们的内容需保留原始空白。</p>
<H3>Node.js 脚本处理 HTML 字符串（CI/CD 可用）</H3>
<p>若需集成进构建流程，可用轻量脚本处理字符串而非 DOM：</p>
<pre class="brush:php;toolbar:false;">const fs = require('fs').promises;
const html = await fs.readFile('index.html', 'utf8');
// 删除四类空段落（同 VSCode 正则逻辑，但更严格）
const cleaned = html
.replace(/<p><\/p>/g, '')
.replace(/<p>\s*<\/p>/g, '')
.replace(/<p>(\s| )*<\/p>/g, '')
.replace(/<p>(\s|<br\s*\/?>|<span[^>]*><\/span>)*<\/p>/g, '');
await fs.writeFile('cleaned.html', cleaned);</pre>
<p>这个脚本不依赖浏览器环境，可塞进 <code>package.json 的 build 脚本里，每次打包自动清理。
别忽略 <div> 和 <code><section></section> 的同类问题
空段落只是表象，真正拖慢渲染、干扰 SEO 的是整套冗余容器。顺手清理时注意：
-
<div></div>、<section></section>同样适用上述正则逻辑（把p换成对应标签名） - 但带 class/id 的空容器（如
<div class="js-modal-backdrop"></div>）要人工确认——它可能被 JS 动态填充，删了功能就断 - 删除后务必检查 CSS 是否依赖这些空节点做布局占位（比如
flex: 1的兄弟元素突然错位）
最常被跳过的验证点：删完空段落后，用浏览器 Elements 面板右键「Delete element」临时删掉某个疑似冗余的父容器，看页面是否仍正常渲染——别信“看起来没变”，要动手试。
