如何编写正则表达式匹配所有标签均为空的HTML（含嵌套、带属性）

你需要的是一个能判断整段HTML所有标签均为空的正则——允许标签带属性、允许嵌套，但不能存在任何非空白文本内容。

原正则的问题 #

你当前的正则 /<[^/>][^>]*><\/[^>]+>/ 只能匹配孤立的空标签或相邻空标签，无法处理嵌套结构，更关键的是它没有限制匹配范围为整个字符串，所以只要内容里存在任意空标签，test就会返回true，导致误判。

解决方案正则 #

使用以下正则可以满足需求：

const emptyHtmlTagRegex = /^(<([a-z][a-z0-9]*)\b[^>]*>(?:\s*<\/\2>|\s*(?1)\s*))*\s*$/i;

正则解释 #

• ^ 和 $：强制匹配整个字符串，避免部分匹配导致的误判
• <([a-z][a-z0-9]*)\b[^>]*>：匹配开始标签，捕获标签名到分组2；\b避免属性名和标签名混淆；[^>]*匹配任意合法属性
• (?:\s*<\/\2>|\s*(?1)\s*)：非捕获组处理两种情况：
  • \s*<\/\2>：匹配对应标签的结束标签（\2引用分组2的标签名），允许标签间有空白字符
  • \s*(?1)\s*：递归匹配分组1的结构，处理嵌套空标签
• *：允许任意数量的空标签/嵌套空标签结构
• \s*：允许字符串首尾存在空白字符
• /i：忽略大小写，兼容HTML标签的大小写写法（如<P></P>）

测试验证 #

匹配成功的场景

• 嵌套带属性的空标签：

  <ul><li class="class-name"></li></ul>
  

• 单个空标签：

  <p></p>
  

不匹配的场景

• 包含非空标签的内容：

  <p>nomatch</p><ul><li></li><ul><p></p>
  

使用示例 #

if (emptyHtmlTagRegex.test(this.htmlContent)) {
  // 输出占位符逻辑
};

注意事项 #

这个正则针对常规的空标签嵌套场景设计，若需要处理HTML自闭合标签、注释、CDATA等复杂语法，正则并非最优选择，但完全覆盖你给出的测试场景。

内容的提问来源于stack exchange，提问作者dotmartin