JS开发邮件回复功能时预填输入框换行提交后丢失如何解决

开发JavaScript在线邮件应用时，回复邮件预填充功能出现格式异常：

• 点击邮件回复按钮触发reply_email函数，先调用compose_email加载写信模板，模板包含发件人（预填当前登录账号）、收件人、主题、正文四个输入区域
• 预填充规则：收件人设为原邮件发件人，发件人固定为当前登录用户，正文预留空行后拼接原邮件发送时间、发件人标识、原邮件正文
• 异常表现：写信页编辑态下，正文的空行、缩进、换行均可正常显示；提交邮件成功后，进入单邮件详情页时所有空行、换行、缩进格式全部丢失

function reply_email(email) {
  // 加载写信模板
  compose_email();

  // 填充回复收件人为原邮件发件人
  document.querySelector('#compose-recipients').value = email['sender'];
  
  // 原邮件主题无Re:前缀时自动添加，已有前缀则直接复用
  if (email['subject'].split(" ", 1)[0] != "Re:") {
    document.querySelector('#compose-subject').value = `Re: ${email['subject']}`;
  } else {
    document.querySelector('#compose-subject').value = email['subject'];
  }

  // 预填充回复正文：编辑态格式正常，提交后空行、换行全部丢失
  document.querySelector('#compose-body').value = `\n \n \n On ${email['timestamp']}, \n <${email['sender']}> wrote: \n      ${email['body']}`;
}

• 编辑态效果：
• 提交后详情页效果：

按数据流从提交到展示的顺序逐段排查即可：

1. 排查提交环节是否丢格式 #

打开浏览器开发者工具，在网络面板找到提交邮件的接口请求，检查请求载荷中的正文字段：

• 如果载荷里已经没有\n换行符，说明取值提交时逻辑有误：必须通过DOM元素的.value属性获取textarea输入内容，用innerText/textContent取值会丢失原生换行；另外检查提交前是否有多余的字符串过滤逻辑，误删了换行、空格字符。

2. 排查后端存储环节是否丢格式 #

如果请求载荷里换行符正常，检查后端逻辑：

• 打印后端接收到的正文参数，确认换行符是否正常传递
• 检查数据库字段读写逻辑，是否存在自动过滤特殊字符、去除首尾/连续空白的配置，导致换行符被剔除。

3. 排查前端渲染环节（最高概率触发点） #

如果接口返回的邮件正文中\n换行符完整存在，问题出在详情页渲染逻辑：HTML默认会将普通文本节点中的换行符、连续空格解析为单个空格，不会自动渲染为视觉上的换行，直接把正文插入div、p等普通容器就会出现格式全丢的问题。
两种修复方案选其一即可：

• 方案一：CSS适配（最简便）
  给正文渲染容器添加如下CSS属性，让浏览器自动识别文本中的换行符：

.email-content-body {
  /* 保留换行符，自动折行，合并多余前置空格，符合邮件展示习惯 */
  white-space: pre-line;
}

如果需要完全保留所有缩进、连续空格，将属性值改为pre-wrap即可。

• 方案二：渲染前转义替换

注意：未对用户输入做HTML转义直接通过innerHTML插入页面会引发XSS漏洞，必须先转义特殊字符再做格式替换。

拿到接口返回的正文内容后，先做HTML特殊字符转义防范XSS，再将换行符替换为HTML的<br>标签，最后插入页面容器：

// 处理正文格式
const formattedBody = email.body
  .replace(/&/g, '&')
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;')
  .replace(/\n/g, '<br>');
// 插入到详情页正文容器
document.querySelector('#email-detail-body').innerHTML = formattedBody;

额外代码优化点 #

现有主题前缀判断逻辑存在边界问题：如果原邮件主题是Re:xxx（Re:后无空格），通过split取第一个单词的判断会失效，重复添加Re:前缀，建议替换为更可靠的startsWith判断：

document.querySelector('#compose-subject').value = email['subject'].startsWith('Re:')
  ? email['subject']
  : `Re: ${email['subject']}`;

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