如何将可编辑div的HTML以文本形式复制到另一div时保留换行

问题原因 #

你从#diva获取到的innerHTML内容中，两个平级<div>标签是直接拼接的字符串，没有包含换行符，就算给#divb设置了white-space: pre-wrap也无法识别换行位置，所以会显示为一整行。

解决方法 #

只需要在把内容赋值给#divb之前，对获取到的HTML字符串做替换处理，在相邻的div标签之间插入换行符即可，CSS和HTML代码无需修改，调整后的JavaScript代码如下：

$('#diva').on('input', function(){
  let a = $(this).html();
  // 在相邻的div标签之间插入换行符
  let formatHtml = a.replace(/<\/div><div>/g, '</div>\n<div>');
  $('#divb').text(formatHtml);
});

内容的提问来源于stack exchange，提问作者qadenza