how to get multiline html of a contenteditable div

Question

write this inside ed

lorem  
ipsum

and click the button. Result:

lorem<p>ipsum</p>

how to get this:

<p>lorem</p>
<p>ipsum</p>

I'm on Chrome, last version

document.execCommand("defaultParagraphSeparator", false, "p");

$('button').on('click', () => {
    let a = $('#ed').html();
    $('#btex').val(a);
    console.log(a);
});

.ed{
min-height:25px;
background:gold;
outline:none;
}
.btex{
display:block;
width:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='ed' id='ed' contenteditable autofocus></div>
<br>
<textarea class='btex' id='btex'></textarea>

Answer 1

You can split the input at the space and then loop over the resulting array elements, wrapping each with paragraphs.

document.execCommand("defaultParagraphSeparator", false, "p");

$('button').on('click', () => {
    // Split the text of the div where there are spaces
    // and return the parts in an array
    let a = $('#ed').html().replace("</p>", "").split("<p>");
    
    // Loop through the array and add each item (wrapped in <p></p>) to a new array
    // Then, join that resulting array's elements with nothing to create a string.
    $('#btex').val(a.map(function(item){ return "<p>" + item + "</p>" }).join("\n"));
});

.ed{
min-height:25px;
background:gold;
outline:none;
}
.btex{
display:block;
width:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='ed' id='ed' contenteditable autofocus></div>
<br>
<textarea class='btex' id='btex'></textarea>