9月11th

JavaScript 对URL 编码和解码的实现

DIY前端设计我来说两句!

网上有很多文字作品写涉及在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;
  }
}

本文出自:DIY博客园,链接:https://www.diybloghome.com/frontlogy/529.html,转载请注明!