如何通过HTML表单向后端发送含特殊字符的代码文本？

问题出在你用模板字符串拼接HTML时，代码里的双引号会提前闭合value属性的引号，导致提交内容被截断。比如你拼接出来的HTML会变成：

<input name="code" type="hidden" value="console.log("one big pizza, please");"/>

这里第二个双引号就结束了value，后面的内容变成无效属性，所以后端只能拿到console.log(。

给你三种可靠的解决方法：

方法一：用DOM API创建元素（推荐） #

直接通过createElement创建隐藏输入框，浏览器会自动处理特殊字符的转义，完全避免引号冲突：

handleSubmit(event) {
    const code = this.code;
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = 'code';
    hiddenInput.value = code;
    event.target.appendChild(hiddenInput);
}

方法二：手动转义HTML属性特殊字符 #

如果一定要用innerHTML拼接，需要手动把代码里的特殊字符转义成HTML实体，比如双引号转成"：

// 定义转义函数
function escapeHtmlAttr(str) {
    return str.replace(/&/g, '&')
              .replace(/"/g, '"')
              .replace(/'/g, ''')
              .replace(/</g, '&lt;')
              .replace(/>/g, '&gt;');
}

handleSubmit(event) {
    const code = this.code;
    const escapedCode = escapeHtmlAttr(code);
    event.target.innerHTML += `<input name="code" type="hidden" value="${escapedCode}">`;
}

这种方法需要自己维护转义逻辑，不如DOM API省心。

方法三：提前准备隐藏输入框并修改其值 #

在表单里预先放置隐藏输入框，提交时直接修改它的value，同样不需要处理转义：

<form id="submit-form">
    <input type="hidden" name="code" id="form-code">
    <!-- 其他表单元素 -->
    <button type="submit">提交</button>
</form>

handleSubmit(event) {
    const code = this.code;
    document.getElementById('form-code').value = code;
}

另外说下为什么JSON.stringify没用：它只是把代码转成JSON格式的字符串，里面依然包含双引号，拼到HTML里还是会触发引号闭合问题，除非再对JSON字符串做一次HTML转义，但这完全没必要，不如直接用上面的方法。

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