时间戳

首页 > 解决方案 > 如何通过将html复制为另一个div中的文本来获取新行

javascript - 如何通过将html复制为另一个div中的文本来获取新行

问题描述

请将光标放在lorem ipsum
然后按 Enter - 换行
然后写入 -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>

标签： javascripthtmljquerycss

解决方案

contenteditable 中的每一行都包含在一个div.

您可以通过结束标记拆分 HTML div，然后用换行符加入：

$('#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>

推荐阅读