URL编码解决中文字符乱码(encodeURIComponent和decodeURIComponent)

1、encodeURIComponent 转义除了字母、数字、(、)、.、!、~、*、'、-和_之外的所有字符(可看下表的非转义字符更清晰)。

注意：为了避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容你都需要用encodeURIComponent进行转义。

var x = encodeURIComponent("https://baidu.com/a(-_.!~*')1");

console.log(x);     // "https%3A%2F%2Fbaidu.com%2Fa(-_.!~*')1"

2、encodeURI 会替换所有的字符，但不包括以下字符，即使它们具有适当的UTF-8转义序列：

注意：encodeURI 自身无法产生能适用于HTTP GET 或 POST 请求的URI，例如对于 XMLHTTPRequests, 因为 "&", "+", 和 "=" 不会被编码，然而在 GET 和 POST 请求中它们是特殊字符。故因采用encodeURIComponent这个方法会对这些字符编码。

var y = encodeURI("https://www.baidu.com/;,/?:@&=+$a2-_.!~*'()#");

console.log(y);   //"https://www.baidu.com/;,/?:@&=+$a2-_.!~*'()#"

3、decodeURIComponent 可对 encodeURIComponen编码的 URI 进行解码.

     decodeURI 可对 encodeURI编码的 URI 进行解码.

运用：取地址栏中文参数乱码

/*
    * 取地址栏的参数 
    * @param key  
    * key为传递的参数名称 例如 http://localhost/test.html?p=广东&c=珠海,key就是p和c 
    * @returns 
*/
function getUrlParam(key){    
// 获取参数    
var url = window.location.search;    
//window.search 取到的是一串带参数的字符串，如：?p=广东&c=珠海 

// 正则筛选地址栏    
var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");    
// 匹配目标参数   
var result = url.substr(1).match(reg);    
//返回参数值    
return result ? decodeURIComponent(result[2]) : null;
}

我们需要获取地址栏参数的时候，可以直接调用方法getUrlParam(key) 就可以了，并且很好的解决了中文参数的乱码问题。 

// 控制台打印参数 p
console.log(getUrlParam('p')); // 结果为 广东
// 控制台打印参数 c
console.log(getUrlParam('c')); // 结果为 珠海

window.location 对象所包含的8大属性：

属性	描述
hash	从井号 (#) 开始的 URL（锚）
host	主机名和当前 URL 的端口号
hostname	当前 URL 的主机名
href	完整的 URL
pathname	当前 URL 的路径部分
port	当前 URL 的端口号
protocol	当前 URL 的协议
search	从问号 (?) 开始的 URL（查询部分）

substr语法：（在字符串中抽取从 start 下标开始的指定数目length的字符。第二个参数省略即到结尾）

stringObject.substr(start,length)