本文详解如何避免因 html 属性值未正确转义导致表单提交时字符串被截断的问题，推荐使用 dom 属性赋值而非字符串拼接 html 的方式，确保引号、反斜杠等特殊字符完整无损地传递至后端。
本文详解如何避免因 html 属性值未正确转义导致表单提交时字符串被截断的问题，推荐使用 dom 属性赋值而非字符串拼接 html 的方式，确保引号、反斜杠等特殊字符完整无损地传递至后端。
在 Web 开发中，当用户通过表单提交包含 JavaScript 代码、JSON 字符串或含双引号（"）、单引号（'）、尖括号（< >）等特殊字符的文本时，若直接将内容拼接到 HTML 字符串中（如 <input value="...">），极易因引号冲突或标签解析错误导致数据被截断——正如示例中 console.log("one big pizza, please"); 仅提交了 "console.log("。
根本原因在于：HTML 属性值必须严格遵循 HTML 语法规范。即使你用 JSON.stringify() 得到 "console.log(\"one big pizza, please\");"，将其插入 value="${code}" 仍会因双引号未被 HTML 实体编码（如 "）而提前终止属性解析，浏览器只识别第一个 " 后的内容为属性结束。
✅ 正确做法是：避免字符串拼接 HTML，改用 DOM API 直接设置元素属性值。该方式绕过 HTML 解析阶段，由浏览器内部安全处理 JavaScript 字符串到表单控件值的映射：
<!-- HTML 中预先定义 hidden input（无需初始 value） --> <form id="submit-form" method="POST"> <!-- 其他字段 --> <input type="hidden" name="code" /> <button type="submit">提交</button> </form>
document.querySelector("#submit-form")
.addEventListener("submit", this.handleSubmit.bind(this), false);
handleSubmit(event) {
const code = this.code; // 例如：'console.log("one big pizza, please");'
// ✅ 安全赋值：浏览器自动处理所有字符，无需手动转义
event.target.elements.code.value = code;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要使用 innerHTML += '<input ... value="' + code + '">' —— 这本质是 XSS 风险操作，且无法保证 HTML 安全性；
- JSON.stringify() 对表单提交非必需：<input> 的 value 属性接受任意 JS 字符串，DOM 会原样保留（包括换行、引号、Unicode）；
- 若需支持多行文本，建议改用 <textarea name="code"></textarea> 并同样通过 .value 赋值，语义更清晰且天然支持换行；
- 后端接收时，应以 application/x-www-form-urlencoded 或 multipart/form-data 方式解析（取决于 form 的 enctype），无需额外解码 —— 浏览器已按标准 URL 编码提交。
总结：表单数据完整性依赖于正确的 DOM 操作范式。坚持“先声明元素，后赋值内容”，既规避 HTML 注入风险，又确保特殊字符 100% 无损传输，是前端表单处理的黄金实践。
