Wie überprüft man, ob contenteditable div nur leere Elemente oder Elemente mit nur Leerzeichen enthält

Question

Wie überprüfe ich, ob ein contenteditable div nur leere Elemente oder Elemente mit whitespaces nur wie im HTML-Code unten gezeigt enthält.

<div contenteditable='true'> 
    <!--All these elements below would be invisible to the human eye--> 
    <p></p> 
    <p> &nbsp </p> 
    <p><br></p> 
    <p>   </p> 
</div> 

Answer 1

Überprüfen Sie die Anzahl der nicht leeren Kinderknoten

console.log(
 
    $('div[contenteditable]') // get contenteditable div 
 
    .contents() // get child nodes 
 
    .filter(function() { // filter nodes 
 
    return this.nodeType !== 8 && // avoid comment node 
 
     this.textContent.trim().length // check content length 
 
    }).length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div contenteditable='true'> 
 
    <!--All these elements below would be invisible to the human eye--> 
 
    <p></p> 
 
    <p>&nbsp;</p> 
 
    <p> 
 
    <br> 
 
    </p> 
 
    <p></p> 
 
</div>

---

Oder einfach mit text() und $.trim() (oder native Javascript String#trim Methode) den beschnittenen Textinhalt abrufen und die Länge überprüfen.

console.log(
 
    $.trim($('div[contenteditable]') // get contenteditable div 
 
    .text()).length 
 
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div contenteditable='true'> 
 
    <!--All these elements below would be invisible to the human eye--> 
 
    <p></p> 
 
    <p>&nbsp;</p> 
 
    <p> 
 
    <br> 
 
    </p> 
 
    <p></p> 
 
</div>

Answer 2

Verwenden jQuery$.trim() weiß Räume von div oder container zu entfernen, dann .text()-get text(s) inside container verwenden, nachdem Sie verwenden jQuery$.length()-count wie viel character(s) innen each container, überprüfen Sie mit console oder alert oder if else Bedingung die Länge Reibe dann Null.
hier ist klein Frieden Code white-space (e)

jQuery-Code zu überprüfen:

$('div[contenteditable]>p').each(function(){ 
    var lengthCheck = $(this).text().trim().length; 
    alert(lengthCheck); 
});