使用JS获取contenteditable的div内容插入textarea时换行失效如何解决

问题根因 #

contenteditable 可编辑div的换行逻辑和原生textarea完全不同：用户输入回车时，浏览器会自动插入<br>、<div>等块级标签实现换行效果，调用.text()方法只会提取纯文本内容，会完全忽略这些HTML标签的换行语义，提取结果里没有换行符，所以替换\n的逻辑完全不生效。

修正方案 #

直接获取可编辑div的HTML内容，对不同浏览器生成的换行标签做统一转换即可，修改后的JS代码如下：

$('#fake_textarea').keyup(function(){
  let content = $('#fake_textarea').html();
  // 兼容不同浏览器的换行标签格式，统一转为<br>+换行符
  content = content
    // 处理Chrome等浏览器生成的<div>包裹的行
    .replace(/<div>/g, '')
    .replace(/<\/div>/g, '<br>\n')
    // 统一处理不同写法的br标签
    .replace(/<br\s*\/?>/g, '<br>\n')
    // 可选：过滤掉除br外的其他HTML标签，避免粘贴带入多余样式
    .replace(/<(?!br\s*\/?)[^>]+>/gi, '');

  $('#second').val(content);
});

可选优化 #

如果需要限制用户只能输入纯文本，避免粘贴带入外部HTML格式，可以额外添加粘贴事件处理：

$('#fake_textarea').on('paste', function(e) {
  e.preventDefault();
  const plainText = (e.originalEvent || e).clipboardData.getData('text/plain');
  document.execCommand('insertText', false, plainText);
});

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