通过form表单提交div内容时数据库丢失空格的问题如何解决？

核心原因 #

你遇到的空格丢失问题主要来自3个层面：

• 浏览器获取innerHTML时会默认合并所有连续空白字符（缩进、换行、多空格都会被合并为单个空格）
• 表单提交过程中未对特殊字符做编码，空白符会被二次处理
• 直接拼接SQL语句写入数据库，不仅存在SQL注入风险，也会导致特殊字符（含空格）被异常转义丢失

代码修改步骤 #

1. 调整JS提交逻辑 #

对div内容做URI编码后再赋值给隐藏输入框，保留所有原始空白字符：

let myForm = document.querySelector(".myform");

myForm.addEventListener("submit", function(x){
   x.preventDefault();
   let myInput = document.getElementById("myinput");
   let myDiv = document.getElementById("mydiv");
   // 编码保留所有空白符
   myInput.value = encodeURIComponent(myDiv.innerHTML);
   myForm.submit();
});

2. 调整PHP入库逻辑 #

先解码内容，再用预处理语句写入数据库，避免SQL注入同时保证内容完整性：

// 解码前端传来的编码内容
$info = rawurldecode($_POST['dataInput']);
// 用预处理语句写入，避免特殊字符异常处理
$stmt = $conn->prepare("INSERT INTO friends (friend) VALUES (?)");
$stmt->bind_param("s", $info);
$results = $stmt->execute();
$stmt->close();

3. 可选：前端展示保留空格 #

如果后续需要在HTML页面原样展示带空格的内容，输出时要么用<pre>标签包裹内容，要么给展示元素添加CSS样式white-space: pre-wrap;，即可避免HTML自动合并空白符。

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