如何使用正则表达式选择可能具有多个空嵌套标签的空 HTML 标签？答案

【问题标题】：How to select empty HTML tags that may have multiple empty nested tags using regex?如何使用正则表达式选择可能具有多个空嵌套标签的空 HTML 标签？
【发布时间】：2015-07-22 23:25:35
【问题描述】：

我想选择所有独立的空标签都是嵌套的，而不是其他标签。例如，正则表达式应该匹配这个：

<p></p>
<p><strong><em></em></strong></p>
<p style="background: black;"><span></span></p>

但不是这个：

<p>text</p>
<p><strong><em>text</em></strong></p>
<p style="background: black;"><span>text</span></p>

在像some text &nbsp; 这样棘手的情况下，它应该匹配。

这是我目前使用的：<[^\/>][^>]*><\/[^>]+> 但是，它忽略了诸如 之类的情况，其中有多个嵌套标签。

谢谢！

【问题讨论】：

是正则表达式是一个要求还是你认为这是唯一的方法，所以你没有考虑其他可能性？我觉得真正的 html 解析器会更好地找到空节点，可能涉及到一些递归。

标签： php html regex tags regex-negation

【解决方案1】：

这个版本应该找到空段落和段落内的空嵌套标签。它适用于 3 个嵌套标签的级别。

function emptyNestedTags(str)
{
      var match = str.match(/<(\w+)(?:\s[^>]*)?>(?:<(\w+)(?:\s[^>]*)?>(?:<(\w+)(?:\s[^>]*)?><\/\3>)?<\/\2>)?<\/\1>/);
      if (match) return match[0]; else return "no empty tags found";
}

alert(emptyNestedTags("<p id=\"id\"></p>"));
alert(emptyNestedTags("<p id=\"id\">SOME TEXT</p>"));
alert(emptyNestedTags("<p><em id=\"id\"></em></p>"));
alert(emptyNestedTags("<p><em id=\"id\">SOME TEXT</em></p>"));
alert(emptyNestedTags("<p><em id=\"id\"></em>SOME TEXT </p>"));
alert(emptyNestedTags("<p><span style=\"background-color: red;\"><em></em></span></p>"));
alert(emptyNestedTags("<p><span style=\"background-color: red;\"><em>TEXT</em></span></p>"));
alert(emptyNestedTags("<p><span style=\"background-color: red;\"><em></em></span> TEXT</p>"));

如果您不想检查结束标签是否与开始标签匹配（为什么要检查，真的？）它更简单，不需要捕获组：

function emptyNestedTags(str)
{
      return str.match(/<\w+(?:\s[^>]*)?>(?:<\w+(?:\s[^>]*)?>(?:<\w+(?:\s[^>]*)?><\/\w+>)?<\/\w+>)?<\/\w+>/);
}

alert(emptyNestedTags("<p id=\"id\"></p>"));
alert(emptyNestedTags("<p id=\"id\">SOME TEXT</p>"));
alert(emptyNestedTags("<p><em id=\"id\"></em></p>"));
alert(emptyNestedTags("<p><em id=\"id\">SOME TEXT</em></p>"));
alert(emptyNestedTags("<p><em id=\"id\"></em>SOME TEXT </p>"));
alert(emptyNestedTags("<p><span style=\"background-color: red;\"><em></em></span></p>"));
alert(emptyNestedTags("<p><span style=\"background-color: red;\"><em>TEXT</em></span></p>"));
alert(emptyNestedTags("<p><span style=\"background-color: red;\"><em></em></span> TEXT</p>"));

【讨论】：

@MarkL 如果您无法控制输入的格式，您可能不得不偶尔添加\s* 以获得额外的空格。