本文介绍在html表单中正确提交含引号、反斜杠等特殊字符的文本（如代码片段）的方法，避免因html属性值未转义导致数据截断，并提供简洁可靠的javascript解决方案。
本文介绍在html表单中正确提交含引号、反斜杠等特殊字符的文本（如代码片段）的方法，避免因html属性值未转义导致数据截断，并提供简洁可靠的javascript解决方案。
在使用 HTML 表单提交用户输入的代码或富文本时，一个常见陷阱是直接将原始字符串拼接到 HTML 字符串中（例如通过 innerHTML += '<input value="...">'）。这种做法极易引发问题：当 value 属性中包含双引号（"）、单引号（'）、尖括号（<, >）或换行符等特殊字符时，浏览器会提前解析属性边界，导致表单字段值被意外截断——正如示例中 code: "console.log(" 所体现的那样。
根本原因在于：HTML 属性值必须经过 HTML 实体编码或严格引号配对才能安全嵌入。而 JSON.stringify() 生成的是 JavaScript 字符串字面量（如 "\"hello\""），并非合法的 HTML 属性值；直接插入会导致引号冲突，浏览器无法正确解析。
✅ 正确做法是：避免字符串拼接 HTML，改用 DOM API 安全设置值。
首先，在 HTML 中预先声明隐藏字段（无需初始 value）：
立即学习“前端免费学习笔记（深入）”；
<form id="submit-form" method="POST" action="/api/submit"> <!-- 其他表单字段 --> <input type="hidden" name="code" id="code-field"> <button type="submit">提交</button> </form>
然后在 JavaScript 中仅操作其 .value 属性（该属性接受任意字符串，自动处理转义）：
document.querySelector("#submit-form")
.addEventListener("submit", this.handleSubmit.bind(this), false);
handleSubmit(event) {
const code = this.code; // 例如：'console.log("one big pizza, please");'
console.log("待提交代码:", code);
// ✅ 安全赋值：DOM 自动处理所有特殊字符
event.target.elements.code.value = code;
// 或等价写法：
// document.getElementById("code-field").value = code;
}⚠️ 注意事项：
- 不要使用 innerHTML、outerHTML 或模板字符串拼接 <input value="..."> —— 这类操作需手动 HTML 编码（如 code.replace(/"/g, """)），易出错且不必要；
- .value 属性是纯文本接口，浏览器内部会确保其内容以 URL 编码形式随表单提交（application/x-www-form-urlencoded）或按 multipart/form-data 规则序列化，无需额外处理；
- 若后端接收 JSON，建议改用 fetch() + JSON.stringify() 发送（此时 JSON.stringify() 才真正生效），但本方案专注原生表单场景；
- 对于多行代码，确保 <textarea> 或 contenteditable 区域已正确获取换行符（\n），.value 同样能完整保留。
总结：表单数据提交的安全性不取决于字符串是否“看起来已转义”，而在于是否通过 DOM 属性而非 HTML 字符串注入来设置值。遵循“声明式 HTML + 命令式 JS 赋值”模式，即可零配置、零依赖地可靠传输任意文本内容。
