如何让enter、tab内容传入req.body，存入MongoDB后原样渲染textarea输入

前端提交校验 #

• 提交前打印textarea的原始值console.log(textareaDom.value)，确认值中已包含\n（换行）、\t（制表符），如果此处就没有对应字符，说明你在输入监听逻辑中错误做了trim、正则替换空白字符等处理。
• 确认提交逻辑中没有过滤特殊字符：
  • 用application/x-www-form-urlencoded格式提交时，不要开启空白字符精简配置，避免连续空白被替换为单个空格。
  • 用application/json格式提交时，确认请求拦截器中没有对字符串做全局trim操作，JSON序列化本身会保留换行、制表符。

后端接收配置 #

以Node.js + Express栈为例，其余技术栈逻辑同理：

• 配置body解析中间件时不要开启精简模式，也不要添加全局的请求体字段trim中间件：

// 正确配置示例
app.use(express.json({ limit: '10mb' }))
app.use(express.urlencoded({ extended: true, limit: '10mb' }))

• 接收到参数后直接打印req.body.对应字段名，确认此时已经包含\n和\t，说明接收环节正常。

存储与回显处理 #

• MongoDB本身完全支持存储带换行、制表符的普通字符串，不需要额外转义直接写入即可。
• 回显时根据场景处理：
  • 回显到textarea内：直接将原始字符串赋值给textarea的value属性，浏览器会自动解析特殊字符为对应格式。
  • 回显到普通HTML标签：先做XSS转义，再替换换行和制表符，示例代码：

  function renderToHtml(raw) {
    // 转义HTML特殊字符防注入
    const escaped = raw.replace(/[&<>"']/g, i => ({
      '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
    }[i]))
    // 替换换行、制表符为HTML可识别格式
    return escaped.replace(/\n/g, '<br>').replace(/\t/g, '&emsp;')
  }
  

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