编辑

Question

我想删除<label></label>，<font> </font>等空标记，以便：

<label></label><form></form>
<p>This is <span style="color: red;">red</span> 
<i>italic</i>
</p>

将被清除为：

<p>This is <span style="color: red;">red</span> 
<i>italic</i>
</p>

我在javascript中使用此RegEx，但它删除了空标记，但它也删除了这个："<i>italic</i></p>"

str=str.replace(/<[\S]+><\/[\S]+>/gim, "");

我缺少什么？

Answer 1

正则表达式不适用于HTML。无论如何，如果你使用JavaScript，我会被鼓励使用jQuery DOM处理。

类似的东西：

$('*:empty').remove();

可替换地：

$("*").filter(function() 
{ 
     return $.trim($(this).html()).length > 0; 
}).remove();

Answer 2

你的角色类有“不是空格”，这意味着“<i>italic</i></p>”会匹配。正则表达式的前半部分将匹配“<(i>italic</i)>”，后半部分将匹配“</(p)>”。（我使用括号来显示每个[\S]+匹配的内容。）

改变这个：

/<[\S]+><\/[\S]+>/

对此：

/<[^\/>][^>]*><\/[^>]+>/

总的来说，您应该使用正确的HTML处理器，但是如果您正在使用HTML汤，这应该就足够了：）

Answer 3

正则表达式的所有答案都只是验证

<label></label>

但是在

的情况下

<label> </label>
<label>    </label>
<label>
</label>

尝试这种模式以获得以上所有

<[^/>]+>[ \n\r\t]*</[^>]+>

Answer 4

您需要/<[\S]+?><\/[\S]+?>/ - 差异是?之后的+ s，以尽可能少地匹配（AKA“非贪婪匹配”）非空格字符（尽管是1或更多），而不是与“尽可能多”匹配的裸+（AKA“贪婪匹配”）。

正如另一个答案所建议的那样，完全避免使用正则表达式也是一个很好的主意，但我想指出一个重要的贪婪与非贪婪的区别，它将在很多种情况下很好地为你提供服务。 > 保证。

Answer 5

我喜欢MattMitchell的jQuery解决方案，但这是使用本机JavaScript的另一种选择。

function CleanChildren(elem)
{
    var children = elem.childNodes;
    var len = elem.childNodes.length;

    for (var i = 0; i < len; i++)
    {
        var child = children[i];

        if(child.hasChildNodes())
            CleanChildren(child);
        else
            elem.removeChildNode(child);

    }
}

Answer 6

这是贪婪的正则表达式的问题。试试这个：

str=str.replace(/<[\^>]+><\/[\S]+>/gim, "");

或

str=str.replace(/<[\S]+?><\/[\S]+>/gim, "");

在正则表达式中，<[\S]+?>匹配<i>italic</i>，<\/[\S]+>匹配</p>

Answer 7

这是现代的原生JavaScript解决方案；实际上，它与2010年的jQuery非常相似。我根据该答案将其改编为我正在从事的项目，并认为可以在此处共享。

document.querySelectorAll("*:empty").forEach((x)=>{x.remove()});

document.querySelectorAll返回NodeList；本质上是所有DOM节点的数组，这些节点与作为参数的CSS选择器相匹配。
- *:empty是一个选择器，用于选择所有空元素（*意味着）的所有元素（:empty表示“任何元素”）。
  
  如果您只想从页面的某个部分中删除任何空白元素（即仅删除某些div元素中的空白元素，则它将选择整个文档中的任何空白元素））;您可以向该元素添加一个ID，然后使用选择器#id *:empty，这意味着该元素内任何ID为id的空元素。
  
  这几乎肯定是您想要的。从技术上讲，一些重要的标签（例如<meta>标签，<br>标签，<img>标签等）是“空的” “;因此，如果不指定范围，最终将删除一些您可能会关心的标签。
forEach循环遍历结果NodeList中的每个元素，并在其上运行匿名函数(x)=>{x.remove()}。 x是列表中的当前元素，对其调用.remove()将从DOM中删除该元素。

希望这对某人有帮助。看到JavaScript在短短8年中取得了长足发展，真是太神奇了。从几乎总是需要一个库以简洁的方式编写像这样的复杂事物，到能够原生地做到这一点。

编辑

因此，上面详述的方法在大多数情况下都可以正常使用，但是存在两个问题：

像<div> </div>之类的元素不会被视为:empty（不是中间的空格）。 CSS Level 4选择器通过引入:blank选择器（它为空，但会忽略空格）来解决此问题，但是目前只有Firefox支持（以供应商前缀形式）。
自动关闭标签被:empty捕获-:blank仍然如此。

我写了一个稍大的函数来处理这两个用例：

document.querySelectorAll("*").forEach((x)=>{
    let tagName = "</" + x.tagName + ">";
    if (x.outerHTML.slice(tagName.length).toUpperCase() == tagName
        && /[^\s]/.test(x.innerHTML)) {
        x.remove();
    }
});

我们遍历页面上的每个元素。我们获取该元素的标签名称（例如，如果该元素是div，则为DIV，并使用它来构造一个结束标签-例如</DIV>。

该标签长6个字符。我们检查HTML元素的大写的最后6个字符是否匹配。如果是这样，我们继续。如果没有，则该元素没有结束标记，因此必须是自闭合的。这比列表更可取，因为这意味着如果将新的自动关闭标签添加到规范中，则无需更新任何内容。

然后，我们检查元素的内容是否包含任何空格。 /[^\s]/是RegEx。 []是RegEx中的一个集合，它将匹配其中出现的任何字符。如果^是第一个元素，则该集合变为取反-它会匹配集合中未存在的任何元素。 \s表示空格-制表符，空格和换行符。因此[^\s]所说的是“不是空格的任何字符”。

与此相对应，如果该标签不是自动关闭的，并且其内容包含非空白字符，则我们将其删除。

当然，这比以前的单缸纸更大，更不优雅。但这实际上适用于所有情况。

Answer 8

你可以使用这个 text = text.replace(/<[^/>][^>]>\s</[^>]+>/gim, "");

Answer 9

在代码笔上找到了这个： jQuery虽然可以，但是可以完成工作

$('element').each(function() {
  if ($(this).text() === '') {
    $(this).remove();
  }
});

您将需要更改元素以指向要删除空标签的位置。不要指向文档，因为它会导致我在Toastrackenigma中回答

Answer 10

使用cheerio will删除空标签并删除图像：

  $('*')
    .filter(function(index, el) {
      return (
        $(el)
          .text()
          .trim().length === 0
      )
    })
    .remove()

使用cheerio删除空标签，但同时保留图像：

  $('*')
    .filter(function(index, el) {
      return (
        el.tagName !== 'img' &&
        $(el).find(`img`).length === 0 &&
        $(el)
          .text()
          .trim().length === 0
      )
    })
    .remove()

Answer 11

<([^>]+)\s*>\s*<\/\1\s*>

<div>asdf</div>
<div></div> -- will match only this
<div></notdiv>
-- and this
<div  >  
    </div   >

试试自己https://regexr.com/

使用RegEx删除空标签

11 个答案:

编辑