JavaScript 对URL 编码和解码的实现

DIY前端设计1594℃我来说两句！

网上有很多文字作品写涉及在JS中呈现类似UrlEncode功能时都是自定义参数来呈现，其实JS中本身就有那样的参数。

参数parameter由于用类似URL的形式传过去，所以别直接就那样赋值

以下是对变量值的URL编码总结：意见用encodeURIComponent() ， GET 和POST方法都能够发送过去

Java编程script中存在几种对URL字符串停止编码的窍门：escape()，encodeURI()，以及encodeURIComponent()。这几种编码所起的功能各不相同。

escape() 窍门：

采用ISO Latin字符集对指定的字符串停止编码。所有的空格符、标点符号、特殊字符以及更多有联系非ASCII字符都将被转化成%xx各式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。

不会被此窍门编码的字符： @ * / +

encodeURI() 窍门：

把URI字符串采用UTF-8编码各式转化成escape各式的字符串。

不会被此窍门编码的字符：! @ # $& * ( ) = : / ; ? + '

encodeURIComponent() 窍门：

把URI字符串采用UTF-8编码各式转化成escape各式的字符串。与encodeURI()相比，那个窍门将对更多的字符停止编码，比如 / 等字符。所以假如字符串里面包含了URI的几个部份的话，别用那个窍门来停止编码，否则 / 字符被编码之后URL将呈现错误。

不会被此窍门编码的字符：! * ( ) '

因此，对于汉文字符串来说，假如不期望把字符串编码各式转化成UTF-8各式的（比如原页面和目的页面的charset是一致的时候），只需求应用 escape。假如你的页面是GB2312或者更多有联系的编码，而接受参数parameter的页面是UTF-8编码的，就要采用encodeURI或者encodeURIComponent。

用JavaScript实现UrlEncode和UrlDecode的脚本代码

<script type="text/vbscript">
Function str2asc(strstr)
str2asc = hex(asc(strstr))
End Function
Function asc2str(ascasc)
asc2str = chr(ascasc)
End Function
</script>

<script type="text/javascript">
/*这里开始时UrlEncode和UrlDecode函数*/
function UrlEncode(str){
var ret="";
var strSpecial="!\"#$%&'()*+,/:;<=>?[]^`{|}~%";
var tt= "";

for(var i=0;i<str.length;i++){
var chr = str.charAt(i);
var c=str2asc(chr);
tt += chr+":"+c+"n";
if(parseInt("0x"+c) > 0x7f){
ret+="%"+c.slice(0,2)+"%"+c.slice(-2);
}else{
if(chr==" ")
ret+="+";
else if(strSpecial.indexOf(chr)!=-1)
ret+="%"+c.toString(16);
else
ret+=chr;
}
}
return ret;
}
function UrlDecode(str){
var ret="";
for(var i=0;i<str.length;i++){
var chr = str.charAt(i);
if(chr == "+"){
ret+=" ";
}else if(chr=="%"){
var asc = str.substring(i+1,i+3);
if(parseInt("0x"+asc)>0x7f){
ret+=asc2str(parseInt("0x"+asc+str.substring(i+4,i+6)));
i+=5;
}else{
ret+=asc2str(parseInt("0x"+asc));
i+=2;
}
}else{
ret+= chr;
}
}
return ret;
}
alert(UrlDecode("%C2%D2%C2%EB"));
</script>

JavaScript Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var Url =
{
  // public method for url encoding
  encode : function (string)
  {
    return escape(this._utf8_encode(string));
  },
  // public method for url decoding
  decode : function (string)
  {
    return this._utf8_decode(unescape(string));
  },
  // private method for UTF-8 encoding
  _utf8_encode : function (string)
  {
    string = string.replace(/
        /g, "\n");
    var utftext = "";
    for (var n = 0; n < string.length; n++)
    {
      var c = string.charCodeAt(n);
      if (c < 128)
      {
        utftext += String.fromCharCode(c);
      }
      else if ((c > 127) && (c < 2048))
      {
        utftext += String.fromCharCode((c >> 6) | 192);
        utftext += String.fromCharCode((c & 63) | 128);
      }
      else
      {
        utftext += String.fromCharCode((c >> 12) | 224);
        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
        utftext += String.fromCharCode((c & 63) | 128);
      }
    }
    return utftext;
  },
  // private method for UTF-8 decoding
  _utf8_decode : function (utftext)
  {
    var string = "";
    var i = 0;
    var c = c1 = c2 = 0;
    while (i < utftext.length)
    {
      c = utftext.charCodeAt(i);
      if (c < 128)
      {
        string += String.fromCharCode(c);
        i++;
      }
      else if ((c > 191) && (c < 224))
      {
        c2 = utftext.charCodeAt(i + 1);
        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
        i += 2;
      }
      else
      {
        c2 = utftext.charCodeAt(i + 1);
        c3 = utftext.charCodeAt(i + 2);
        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
        i += 3;
      }
    }
    return string;
  }
}