JS encodeURIComponent 结果与 FORM 创建的结果不同答案

【问题标题】：JS encodeURIComponent result different from the one created by FORMJS encodeURIComponent 结果与 FORM 创建的结果不同
【发布时间】：2010-04-09 13:47:46
【问题描述】：

我认为表单中输入的值已被浏览器正确编码。

但是这个简单的测试文件“test_get_vs_encodeuri.html”表明它不是真的：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
   <title></title>
</head><body>

<form id="test" action="test_get_vs_encodeuri.html" method="GET" onsubmit="alert(encodeURIComponent(this.one.value));">
   <input name="one" type="text" value="Euro-€">
   <input type="submit" value="SUBMIT">
</form>

</body></html>

点击提交按钮时：

encodeURICompenent 将输入值编码为“Euro-%E2%82%AC”

浏览器进入 GET 查询时只写入一个简单的“Euro-%80”

谁能解释一下？
如何使用 Javascript 以与浏览器的 FORM (windows-1252) 相同的方式对所有内容进行编码？？？（转义功能不起作用，encodeURIComponent 也不起作用）？

或者 encodeURIComponent 是否进行了不必要的转换？

【问题讨论】：

标签： javascript urlencode url-encoding encodeuricomponent

【解决方案1】：

这是一个字符编码问题。您的文档使用字符集Windows-1252，其中€ 位于位置128，Windows-1252 编码为0x80。但encodeURICompenent 期望输入为 UTF-8，因此使用 Unicode 的字符集，其中€ 位于位置 8364 (PDF)，使用 UTF-8 0xE282AC 编码。

解决方案是也为您的文档使用 UTF-8。或者您编写一个映射来将 UTF-8 编码的字符串转换为 Windows-1252。

【讨论】：

@Gumbo：谢谢我现在明白了。但这让我想到了另一个我已经问过的问题，这个该死的 encodeURIComponent 有什么用？我的意思是即使我使用cp1252，FORM编码的值也不会错，那我为什么要使用这个该死的encodeURIComponent来编码URI，我不能只使用一个简单的JS转义函数来返回与编码相同的值通过表格。我知道这可能不太好，但最后我更喜欢像浏览器的 FORM 那样对东西进行编码。 stackoverflow.com/questions/2238515/…
@Marco Demaio：escape 具有不同的格式：escape("€")==="%u20AC"。至于encodeURIComponent 的目的：假设您要构建一个包含& 作为值的URI（如bar&baz）。 "…?foo=bar&baz" 将产生两个参数（foo 和 baz），因为 & 是一个特殊字符。但是"…?foo="+encodeURIComponent("bar&baz") 会做到的。
对不起，我没有解释清楚，而且我说的是垃圾，我知道我必须在 GET 组件中对字符 '&' 进行编码，但是我如何以与 FORM 相同的方式对所有内容进行编码cp1252用JS？使用转义不是方法，但使用 encodeURICompoenent 也不是方法，因为 € 的编码方式不同。 JS中是否有任何功能可以做到这一点？抱歉，我也更新了问题。
@Marco Demaio：encodeURICompoenent 期望字符串是 UTF-8 编码的，您需要编写自己的编码函数。

【解决方案2】：

我认为问题的根源在于字符编码。如果我在元标记中乱用字符集并使用不同的编码保存文件，我可以让页面在浏览器中呈现，如下所示：

_{（来源：boogdesign.com）}

â‚¬ 看起来很像您从 encodeURIComponent 获得的内容。但是，我找不到任何编码组合对 encodeURIComponent 返回的内容有任何影响。我可以改变 GET 查询返回的内容。 This is your original page，提交会给出如下 URL：

test-get-vs-encodeuri.html?one=Euro-%80

This is a UTF-8 version of the page，提交会给出一个如下所示的 URL（在 Firefox 中）：

http://www.boogdesign.com/examples/encode/test-get-vs-encodeuri-utf8.html?one=Euro-€

但如果我复制并粘贴它，我会得到：

http://www.boogdesign.com/examples/encode/test-get-vs-encodeuri-utf8.html?one=Euro-%E2%82%AC

所以看起来如果页面是 UTF-8 则 GET 和 encodeURIComponent 匹配。

【讨论】：

encodeURIComponent 始终采用 UTF-8。来自ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf：15.1.3.4 encodeURIComponent (uriComponent) encodeURIComponent 函数计算一个新版本的 URI，其中某些字符的每个实例都被一个、两个或三个表示字符的 UTF-8 编码的转义序列替换。