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へのアクセス権を持っている場合、代わりにinnerHTMLを取得し、そのようにパースのHTMLとしてそれを実行するためにはるかに良いと思います。

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

あなたは空の段落を削除したい場合は、1要素が削除されるたびに、それは全体のボールゲームが変更されるためそれはあなたが文字通りするつもり何であれば最大限の注意を払う必要があります。これは、最終的には私のために働いていたものです：

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--; 
     } 
    } 

live code

あなたがオフにスローされますと、空の段落が削除されないことがあります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"; 
     } 
    } 

live code

なお、ここでより鮮やかな例では、我々はhere