如何通过将HTML复制为另一个div中的文本来获得新行

Question

请将光标放在lorem ipsum
的位置，然后按回车-新行
然后写入-dolor
结果divb是-<div>lorem ipsum</div><div>dolor</div>
如何在divb中获得以下内容:

<div>lorem ipsum</div>
<div>dolor</div>  

$('#diva').on('input', function(){
let a = $(this).html();
$('#divb').text(a);
});

#diva, #divb{background:#ddd; padding:9px;}
#divb{white-space:pre-wrap;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='diva' contenteditable>
<div>lorem ipsum</div>
</div>
<br>
<div id='divb'></div>

Answer 1

contentitable中的每一行都用div进行换行。

您可以通过结束div标记分割HTML，然后用换行符重新连接:

$('#diva').on('input', function() {
let a = $(this).html();
$('#divb').text(a.split("</div>").join("</div>n"));
});

#diva,
#divb {
background: #ddd;
padding: 9px;
}
#divb {
white-space: pre-wrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='diva' contenteditable><div>lorem ipsum</div></div>
<br>
<div id='divb'></div>