check that contenteditable div is empty or not

Question

I have a content-editable div that works as Textarea.

<div id="divThatYouCanWriteStuffIn" contenteditable="true" class="ibox-content col-lg-12">
</div>

Now I want check whether this div is empty or not, for validations.

What I used is as below.

 if ($('#divThatYouCanWriteStuffIn')[0].innerText == "") {
        alert("Please update your wall, then post.")
        return false;
  }

But it's not working if user just clicked enter in div. Same way I have used

 if ($('#divThatYouCanWriteStuffIn')[0].innerText.length <= 1) {
        alert("Please update your wall, then post.")
        return false;
    }

$('#divThatYouCanWriteStuffIn').html()

But it also has break tags inside div, as it takes blank as break

So, is there any way to check that editable div is not empty and has some proper text?

Answer 1

You can use the text() method to get the relevant content(content without html tags)

  if ($('#divThatYouCanWriteStuffIn').text().trim().length == 0) {
    alert("empty");
  }

.trim() function removes all the white spaces and newline characters from the beginning and end of the content.

Fiddle

Answer 2

Incase your contenteditable div contains html. I used this method below

divHtml = $('div#divThatYouCanWriteStuffIn').html();
checkEmpty = divHtml.replace(' ', '').replace('<br>', '');
if(checkEmpty.length == 0){
    alert('empty');
}

Replace all space with nothing and all line breaks <br> with nothing also