jquery - 如何检查 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() (或原生 javascript 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>