本文详解如何在不破坏 html 结构的前提下，将含引号、反斜杠等特殊字符的用户输入（如 javascript 代码）完整、可靠地通过 html 表单提交至后端，避免因属性值未正确转义导致的数据截断。
本文详解如何在不破坏 html 结构的前提下，将含引号、反斜杠等特殊字符的用户输入（如 javascript 代码）完整、可靠地通过 html 表单提交至后端，避免因属性值未正确转义导致的数据截断。
在 Web 开发中，常需通过 <form> 提交用户编写的代码片段（例如 console.log("one big pizza, please");）。若直接使用字符串拼接方式动态插入 <input> 元素，极易引发 HTML 解析错误——尤其当 value 属性值中包含双引号（"）、单引号（'）、尖括号（<, >）等特殊字符时，浏览器会将第一个未转义的 " 视为 value 属性的结束符，导致后续内容被截断或 DOM 解析异常。
根本问题在于：
event.target.innerHTML += `<input name="code" type="hidden" value="${code}">`;该写法将原始字符串直接嵌入 HTML 字符串模板中，未对 code 做 HTML 实体编码。即使 JSON.stringify(code) 在 JS 中生成了合法的 JSON 字符串（如 "console.log(\"...\")"），它仍不是有效的 HTML 属性值——HTML 不识别 \ 转义序列，仅支持 "、' 等实体编码。
✅ 推荐解决方案：不操作 innerHTML，改用 DOM API 安全赋值
立即学习“前端免费学习笔记（深入）”；
-
静态声明隐藏字段（推荐）
在 HTML 中预先定义好隐藏输入框，避免运行时拼接 HTML：<form id="submit-form" method="POST" action="/api/submit"> <!-- 其他表单字段 --> <input type="hidden" name="code" id="code-input"> <button type="submit">提交</button> </form>
-
在提交事件中仅设置 .value 属性
利用 DOM 的 value 属性天然支持任意字符串（包括引号、换行、Unicode），无需手动转义：document.querySelector("#submit-form") .addEventListener("submit", this.handleSubmit.bind(this)); handleSubmit(event) { const code = this.code; // 如：'console.log("one big pizza, please");' document.getElementById("code-input").value = code; // 或更简洁地：event.target.elements.code.value = code; }
⚠️ 关键注意事项：
- ✅ input.value = str 是安全的：浏览器内部自动处理所有字符，不会触发 HTML 解析；
- ❌ 避免 innerHTML += ... 或 insertAdjacentHTML() 动态注入带用户数据的标签；
- ? 若必须动态创建 <input>，请使用 document.createElement() + el.setAttribute('value', str)，而非字符串拼接；
- ? 后端接收时，确保以 application/x-www-form-urlencoded 或 multipart/form-data 正确解析（现代框架默认支持）；
- ? 对于超长代码或富文本，建议搭配 encodeURIComponent() + 自定义 AJAX 提交，但普通表单场景 DOM 赋值已完全足够。
此方法简洁、兼容性好（支持所有现代浏览器及 IE11+），且从根本上规避了 XSS 风险与数据截断问题，是生产环境中提交用户生成文本的最佳实践。
