用JavaScript实现PHP的urlencode与urldecode函数

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

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

1. js编码方法

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

2.php编码方法

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

如何用js实现php的urlencode功能,从网上找了两种方法，在这里整合出来

1. 方法一

export default {
    // public method for url encoding
    encode : function (clearString) {
        var output = '';
    	var x = 0;

    	clearString = utf16to8(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[x] == ' ')
    				output += '+';
    			else
    			{
    				var charCode = clearString.charCodeAt(x);
    				var hexVal = charCode.toString(16);
    				output += '%' + ( hexVal.length < 2 ? '0' : '' ) + hexVal.toUpperCase();
    			}
    			x++;
    		}
    	}

    	function utf16to8(str)
    	{
    		var out, i, len, c;

    		out = "";
    		len = str.length;
    		for(i = 0; i < len; i++)
    		{
    			c = str.charCodeAt(i);
    			if ((c >= 0x0001) && (c <= 0x007F))
    			{
    				out += str.charAt(i);
    			}
    			else if (c > 0x07FF)
    			{
    				out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
    				out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
    				out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
    			}
    			else
    			{
    				out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
    				out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
    			}
    		}
    		return out;
    	}

    	return output;
    },

    // public method for url decoding
    decode : function (encodedString) {
        var output = encodedString;
        var binVal, thisString;
        var myregexp = /(%[^%]{2})/;
        function utf8to16(str)
        {
            var out, i, len, c;
            var char2, char3;

            out = "";
            len = str.length;
            i = 0;
            while(i < len)
            {
                c = str.charCodeAt(i++);
                switch(c >> 4)
                {
                    case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
                    out += str.charAt(i-1);
                    break;
                    case 12: case 13:
                    char2 = str.charCodeAt(i++);
                    out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                    break;
                    case 14:
                    char2 = str.charCodeAt(i++);
                    char3 = str.charCodeAt(i++);
                    out += String.fromCharCode(((c & 0x0F) << 12) |
                            ((char2 & 0x3F) << 6) |
                            ((char3 & 0x3F) << 0));
                    break;
                }
            }
            return out;
        }
        while((match = myregexp.exec(output)) != null
                    && match.length > 1
                    && match[1] != '')
        {
            binVal = parseInt(match[1].substr(1),16);
            thisString = String.fromCharCode(binVal);
            output = output.replace(match[1], thisString);
        }

        //output = utf8to16(output);
        output = output.replace(/\\+/g, " ");
        output = utf8to16(output);
        return output;
    }
}

2. 方法二

export default {
    // 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;
    }
}