使用 RegEx 刪除空標簽

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 之后的 s，匹配“盡可能少”（又名“非貪婪匹配”）非空格字符（盡管 1 個或更多），而不是匹配“盡可能多”（又名“貪婪”）的裸+ s比賽”）。

完全避開正則表達式，為對方的回答建議，也是一個很好的主意，但我想指出的重要貪婪與非貪婪的區別，這將有助於你在一個巨大的各種情況下的正則表達式是必要的。

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

這是一個現代原生 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 中的一個集合，將匹配出現在其中的任何字符。 如果^是第一個元素，則集合變為否定- 它將匹配不在集合中的任何元素。 \\s表示空格 - 制表符、空格、換行符。 所以[^\\s]說的是“任何不是空白的字符”。

與之匹配，如果標簽不是自閉合的，並且其內容包含非空白字符，那么我們將其刪除。

---

當然，這比之前的 one-liner 更大，更不優雅。 但它基本上應該適用於每種情況。

Answer 7

這是貪婪正則表達式的問題。 嘗試這個：

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

或者

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

在您的正則表達式中， <[\\S]+?>匹配<i>italic</i>並且<\\/[\\S]+>匹配</p>

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/