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

检查非空子节点的数量

＆＃13;

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)

＆＃13;

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

＆＃13;

或者只是使用 text() 和 $.trim() （或原生javascript String#trim 方法）获取修剪过的文字内容并查看它的长度。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用jQuery $.trim()从div或container删除空格，然后在.text()之后使用get text(s) inside container {1}} 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);
});

如何检查contenteditable div是否只包含空元素或仅包含空格的元素

2 个答案: