如何获得内容可编辑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

 $('button').on('click', function(){ var html = $('#divstory').html(); var ht = remove_HtmlTags(html); console.log(ht); }); function remove_HtmlTags (html) { var tmp = document.createElement("DIV"); tmp.innerHTML = html; return tmp.textContent || tmp.innerText || ""; } 

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

Answer 2

It's becaouse contenteditable adds:

<div><br/></div>

into its content

Change code into:

$('button').on('click', function(){    
    var ht = $('#divstory').html();
    ht = ht.replace("<br>", '');
    console.log(ht);
});

Answer 3

when you give input to the content editable div it is stored in single textNode, after hitting enter the new text is assigned to divElement but first textNode is as it is, means it does not change. You can change it manually using following example.

 $('button').on('click', function(){ let ht = $('#divstory')[0].childNodes; for(let child of ht){ if(child.constructor.name === 'Text'){ let newChild = document.createElement('div'); newChild.textContent = child.textContent; $('#divstory')[0].replaceChild(newChild, child); } } console.log($('#divstory').html()); }); 

 .divstory{ background:#eee; min-height:54px; 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> 

Answer 4

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