可编辑div换行丢失问题：POST提交时换行符缺失解决方案咨询

这个问题我之前也碰到过！contenteditable div的换行处理确实有点坑——浏览器会把用户输入的换行转换成HTML标签（比如<br>或者分段的<div>），而不是直接的\n换行符，所以直接提交的话后端自然看不到换行。给你几个靠谱的解决办法：

方法一：纯文本场景（推荐） #

如果只需要保留纯文本和换行，不需要HTML格式，直接用textContent获取内容就好——它会自动把所有HTML换行相关的标签转换成\n换行符，完美适配各种浏览器：

// 获取div内容
const content = document.getElementById('content').textContent;

// 用AJAX提交的例子
fetch('/save', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: `content=${encodeURIComponent(content)}`
});

如果是用表单提交，可以把内容放到隐藏input里：

<form id="saveForm" method="POST" action="/save">
  <div id="content" contenteditable="true"></div>
  <input type="hidden" id="hiddenContent" name="content">
  <button type="submit">保存</button>
</form>

<script>
document.getElementById('saveForm').addEventListener('submit', function(e) {
  const content = document.getElementById('content').textContent;
  document.getElementById('hiddenContent').value = content;
});
</script>

方法二：需要保留HTML格式的场景 #

如果要保留用户输入的HTML格式（比如加粗、斜体），那得先把HTML里的换行标签转换成\n，或者直接提交HTML内容，后端存储后再原样渲染：

const contentDiv = document.getElementById('content');
let content = contentDiv.innerHTML;

// 把<br>标签替换成换行符
content = content.replace(/<br\s*\/?>/gi, '\n');
// 处理分段的<div>标签（Chrome按回车会生成这个）
content = content.replace(/<div>/gi, '\n').replace(/<\/div>/gi, '');
// 处理<p>标签（如果有的话）
content = content.replace(/<p>/gi, '\n').replace(/<\/p>/gi, '');
// 去除首尾多余的换行
content = content.trim();

// 提交时记得编码
const encodedContent = encodeURIComponent(content);
// 后续提交逻辑...

后端注意事项 #

后端接收参数时，只要确保没有把\n过滤掉就行。比如在PHP里，$_POST['content']会直接保留换行符；如果要在网页上显示，记得把\n转换成<br>（或者用<pre>标签保留原始格式）。

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