本文介绍了php函数urlencode的js实现方法并比较js和php各编码函数的区别。

通常form表单的enctype类型为 application/x-www-form-urlencoded, 当表单提交后,提交的数据自动被编码, 规则为" 除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号(+)。", php的urlencode函数与其功能相同。

js编码方法:escape, encodeURI, encodeURIComponent。
escape可以对大多数符号进行编码,但是对unicode字符无效。

php编码方法:urlencode, rawurlencode, htmlentities。
urlencode和rawurlencode唯一的区别是对空格的编码方式不同,rawurlencode遵循RFC 1738编码将空格转换为 %20。

如何用js实现php的urlencode功能, 网上流传着一段js和vbscript混写的代码,通用性不好,另找到国外一高人写的, 经测试与urlencode相同。

    function URLEncode (clearString) {
  var output = '';
  var x = 0;
  clearString = clearString.toString();
  var regex = /(^[a-zA-Z0-9-_.]*)/;
  while (x < clearString.length) {
    var match = regex.exec(clearString.substr(x));
    if (match != null && match.length > 1 && match[1] != '') {
        output += match[1];
      x += match[1].length;
    } else {
      if (clearString.substr(x, 1) == ' ') {
        //原文在此用 clearString[x] == ' ' 做判断, 但ie不支持把字符串当作数组来访问,
        //修改后两种浏览器都可兼容
        output += '+';
      }
      else {
        var charCode = clearString.charCodeAt(x);
        var hexVal = charCode.toString(16);
        output += '%' + ( hexVal.length < 2 ? '0' : '' ) + hexVal.toUpperCase();
      }
      x++;
    }
  }
  return output;
}

注:上面的代码引自 http://cass-hacks.com/articles/code/js_url_encode_decode/

下面附上js和php几种编码方法对特殊符号的编码对照表:
Input     JavaScript     PHP
      escape     encodeURI     encodeURIComponent     urlencode     rawurlencode     htmlentities
<space>     %20     %20     %20     +     %20      
!     %21     !     !     %21     %21     !
@     @     @     %40     %40     %40     @
#     %23     #     %23     %23     %23     #
$     %24     $     %24     %24     %24     $
%     %25     %25     %25     %25     %25     %
^     %5E     %5E     %5E     %5E     %5E     ^
&     %26     &     %26     %26     %26     &amp;
*     *     *     *     %2A     %2A     *
(     %28     (     (     %28     %28     (
)     %29     )     )     %29     %29     )
-     -     -     -     -     -     -
_     _     _     _     _     _     _
=     %3D     =     %3D     %3D     %3D     =
+     +     +     %2B     %2B     %2B     +
:     %3A     :     %3A     %3A     %3A     :
;     %3B     ;     %3B     %3B     %3B;     ;
.     .     .     .     .     .     .
"     %22     %22     %22     %22     %22     &quot;
'     %27     '     '     %27     %27     '
\     %5C     %5C     %5C     %5C     %5C     \
/     /     /     %2F     %2F     %2F     /
?     %3F     ?     %3F     %3F     %3F     ?
<     %3C     %3C     %3C     %3C     %3C     &lt;
>     %3E     %3E     %3E     %3E     %3E     &gt;
~     %7E     ~     ~     %7E     %7E     ~
[     %5B     %5B     %5B     %5B     %5B     [
]     %5D     %5D     %5D     %5D     %5D     ]
{     %7B     %7B     %7B     %7B     %7B     {
}     %7D     %7D     %7D     %7D     %7D     }
`     %60     %60     %60     %60     %60     `

上表引自 http://www.the-art-of-web.com/javascript/escape/

另一个非常优秀的urlencode和urldecode函数

    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(/\r\n/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;
    }
 
}