Как проверить, содержит ли contenteditable div только пустые элементы или элементы только с пробелами

Question

Как проверить, содержит ли contenteditable div только пустые элементы или элементы с пробелами только как показано в html-коде ниже.

<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

Проверка количества непустых дочерних узлов

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>

---

Или просто с помощью text() и $.trim() (или родной яваскрипта String#trim) получить обрезанное текстовое содержимое и проверить его длину.

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

Использование jQuery$.trim() для удаления белых-пространства от div или container, а затем использовать .text() в get text(s) inside container, после того, как вы используете jQuery$.length() чтобы count сколько character(s) внутри each container, проверьте с console или alert или if else определите длину терки, затем ноль.
здесь маленький мир кода, чтобы проверить Пробельные (ы)

JQuery код:

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