how to get proper content of a contenteditable div

Question

$('button').on('click', function(){
	let ht = $('#divstory').html();
	console.log(ht);
});

.divstory{
	background:#eee;
  min-height:54px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="divstory" id="divstory" contenteditable="true"></div>
<br>
<button>CLICK</button>

Write inside divstory the following:

323
525
727
979

And click on button.

The result is:

323<div>525</div><div>727</div><div>979</div><div><br></div>

Why 323 is without div tags?

And how to get new lines like this:

<div>323</div>    
<div>525</div>  
<div>727</div>  
<div>979</div>  

Answer 1

If you don't care about preserving line breaks, you can replace .html() with .text() to return just the text with no html.

If you want to preserve line breaks, but also not return any html, i.e. you'll need to replace the div and br html elements with the textual line breaks using the character /n. Here is a solution that works for both console or html output:

$('button').on('click', function(){
	let ht = $('#divstory').html().replace(/<div>/g,"\n").replace(/<\/div>/g,"").replace(/<br>/g,"\n");
	console.log(ht);
   $("#result").text(ht);
});

.divstory{
	background:#eee;
  min-height:54px;
}
#result{
            white-space:pre;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="divstory" id="divstory" contenteditable="true"></div>
<br>
<button>CLICK</button>
<br>
<div id="result"></div>