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 进行解码。
var m = decodeURIComponent("https%3A%2F%2Fbaidu.com%2Fa(-_.!~*')1"); console.log(m); // "https://baidu.com/a(-_.!~*')1"
4、decodeURI 可对 encodeURI编码的 URI 进行解码。
var n = decodeURI("%E4%B8%AD%E5%9B%BDhttps://www.baidu.com/;,/?:@&=+$a2-_.!~*'()#"); console.log(n); //"中国https://www.baidu.com/;,/?:@&=+$a2-_.!~*'()#"
5、运用：取地址栏中文参数乱码
send.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>send</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> //window.location.href = 'reception.html?p=广东&c=广州' window.location.href = 'reception.html?p=%E5%B9%BF%E4%B8%9C&c=%E5%B9%BF%E5%B7%9E' </script> </html>
reception.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>reception</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> /* * 取地址栏的参数 * @param key * key为传递的参数名称 例如 reception.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; } // 控制台打印参数 p console.log(getUrlParam('p')); // 结果为 广东 // 控制台打印参数 c console.log(getUrlParam('c')); // 结果为 广州 </script> </html>