JavaScript中解决ASP/PHP urlencode编码的decodeURIComponent方法

JavaScript解决ASP/PHP urlencode编码问题

当动态语言如ASP（使用Server.UrlEncode）或PHP（使用urlencode()）直接写入包含中文字符的Cookie时，或者在服务器端进行编码处理后，前端JavaScript读取这些数据时会遇到编码不一致的问题。最终获取的字符串通常已被urlencode编码，此时需要在前端客户端通过JavaScript进行读取和解码。

本文将简要介绍如何利用JavaScript系统内置的函数来解决上述编码与解码的兼容性问题。

许多开发者在遇到此类问题时，网络上常流行使用自定义的JS函数进行处理，例如vbscript中的URLDecode()或javascript中的UrlDecode()。然而，这些自定义函数往往无法与ASP的Server.UrlEncode或PHP的urlencode()实现良好的互通性。

关于vbscript的URLDecode()函数和javascript的UrlDecode()函数的具体实现，本文末尾将予以转载参考。

本文的核心解决方案是JavaScript内置的decodeURIComponent()函数。该函数名称较为常见，但由于JavaScript系统函数众多，容易被开发者忽略。在偶然发现该函数后，这一困扰得以解决。

核心函数：encodeURIComponent与decodeURIComponent

编码函数：encodeURIComponent()

解码函数：decodeURIComponent()

decodeURIComponent()语法

 
decodeURIComponent(URIstring)
参数：(URIstring）必需。这是一个字符串，包含需要解码的URI组件或其他待解码的文本。
返回值：返回URIstring的副本，其中的十六进制转义序列将被替换为它们所代表的实际字符。

decodeURIComponent语法与实例

实例：

 
<script type="text/javascript">
var test1="烦恼";
var test2="%E7%83%A6%E6%81%BC";
document.write("编码（原="+test1+"）："+encodeURIComponent(test1)+ "<br />");
document.write("解码（原="+test2+"）："+decodeURIComponent(test2));
</script>

结果：

 
编码（原=烦恼）：%E7%83%A6%E6%81%BC
解码（原=%E7%83%A6%E6%81%BC）：烦恼

注意：本文仅在UTF-8编码环境下进行测试。由于不同编码环境下，ASP的Server.UrlEncode编译后的代码可能存在差异，因此具体兼容性仍有待进一步测试验证。

自定义函数与编码差异分析

附转载：

vbscript（function URLDecode()）

 
<script type="text/VBscript">
<!-- 
Function URLDecode(enStr)
dim deStr,strSpecial
dim c,i,v
deStr=""
strSpecial="!""#$%&'()*+,.-_/:;<=>?@[\]^`{|}~%"
for i=1 to len(enStr)
c=Mid(enStr,i,1)
if c="%" then
v=eval("&h"+Mid(enStr,i+1,2))
if inStr(strSpecial,chr(v))>0 then
deStr=deStr&chr(v)
i=i+2
else
v=eval("&h"+ Mid(enStr,i+1,2) + Mid(enStr,i+4,2))
deStr=deStr & chr(v)
i=i+5
end if
else
if c="+" then
deStr=deStr&" "
else
deStr=deStr&c
end if
end if
next
URLDecode=deStr
End function
//--> 
</script>

javascript（function UrlDecode()）其实还是柔和使用了vbscript，好像在javascript环境中，对于asc、hex、chr相关的转换，如 str.charCodeAt(0).toString(16) 及 String.fromCharCode(str) 在不同编码下，对于中文的编码结果还不统一。

比如： vbscript str2asc/asc2str

 
<script type="text/vbscript">
Function str2asc(strstr)
str2asc = hex(asc(strstr))
End Function
Function asc2str(ascasc)
asc2str = chr(ascasc)
End Function
MsgBox str2asc("a")
MsgBox asc2str("&H61")'16进制转的61 转到 10进制就是 97
</script>

javascript str2asc/asc2str

 
<script type="text/javascript">
function str2asc(str){
return str.charCodeAt(0).toString(16);
} 
function asc2str(str){
return String.fromCharCode(str);
} 
alert(str2asc("a"));//
alert(asc2str("0x61"));//
</script>

演示：