Javascript-從HTML字符串中刪除空的段落

Question

在Javascript對象中，我有一個HTML字符串（ node.innerHTML ），我需要從該字符串中刪除空的段落，然后返回該字符串。 空段包括<p></p> ， <p> </p>和<p>&nbsp;</p> 。 理想情況下，我認為應該將字符串解析為HTML代碼進行處理，而不是使用正則表達式。 我嘗試了各種方法，但似乎無法使其正常工作。

這是我嘗試過的代碼，但是它返回的對象只包含prevObject數據，而且它似乎沒有刪除空的段落。

function strip_empty_p (node) {     
    var html = $(node.innerHTML);
    html = html.filter($('p'),function () {
        return this.innerHTML == "" ||
        this.innerHTML == " " ||
        this.innerHTML == " "
        }).remove();    
    node.innerHTML = html.innerHTML;
    return node.innerHTML;
}

Answer 1

如果您有權訪問node ，最好將其作為HTML運行而不是獲取innerHTML並以這種方式進行解析。

 const parent = document.querySelector('div'); parent.childNodes.forEach(child => child.nodeType === document.ELEMENT_NODE && !child.innerText.trim() && parent.removeChild(child)); 

 <div> <p></p> <p> </p> <p>Not empty</p> <p>&nbsp;</p> <p>Also not empty</p> <p></p> </div> 

該方法比試圖像將其解析為文本一樣，將無限可靠和快捷。

如果您從某處將其加載為文本，則如果格式正確，請首先將其轉換為HTML節點。

如果HTML格式不正確，則生活會變得更加困難，並且您將不得不執行一些棘手且容易出錯的字符串解析。

Answer 2

您可以通過jQuery完成此操作。 您可以檢查段落的.text()或innerHTML() 。 這是jsfiddle上的一個示例： https ://jsfiddle.net/akvap5mg/

$(document).ready(function(){
  $("p").each(function(){
    var $this = $(this);
    if($this.text().trim() === '') {
            $this.remove();
    }
  });
});

Answer 3

如果您希望刪除空白的段落，那么您就應該格外小心，因為這實際上是您打算要做的，因為每次刪除一個元素都會改變整個球類。 這最終對我有用：

    var d = document.getElementsByTagName("div")[0];


  for (i=0, max=4; i <= max; i++) {
     if ( d.children[i].textContent.trim() == ""){
                  d.removeChild(d.children[i]);
                    max--;
                    i--;
       }
  }

現場代碼

如果您不調整變量max和i，那么檢測DOM元素就會被拋出，並且一個空的段落可能不會被刪除。

或者，以下代碼以圖形方式刪除了空的段落，因此無需調整變量max和i：

var d = document.getElementsByTagName("div")[0];


  for (i=0, max=4; i <= max; i++) {
     if ( d.children[i].textContent.trim() == ""){
            d.children[i].style.display="None";
       }
  }

現場代碼

順便說一下，這里有一個更生動的例子在這里