escape、encodeURI和encodeURIComponent

前言

这里记录一下关于页面传参编码的问题，JavaScript中三个编码的函数escape、encodeURI和encodeURIComponent函数的选择问题。

正文

Url编码

​ url编码是一种浏览器用来打包表单输入的格式。浏览器从表单中获取所有的name和其中的值 ，将它们以name/value参数编码（移去那些不能传送的字符，将数据排行等等）作为URL的一部分或者分离地发给服务器。

在数据传输中有一些字符是无法进行传输的，所以我们需要对其进行编码，传输后在进行解码；

通俗的说：就是比如%这种字符是特殊字符，无法作为参数直接写在url后面。如https://www.baidu.com/s?wd=%是不正确的，在百度搜索框中搜索%，可以看到地址栏中%被编码为%25。

所以就需要对这些字符进行编码。

怎么选择escape、encodeURI和encodeURIComponent？

​ 这三个函数都是对字符进行编码的，它们的区别主要在于编码字符多少的问题。

下面列出了这三个函数的安全字符（即函数不会对这些字符进行编码）
escape（69个不编码）：*/@±.0-9a-zA-Z
encodeURI（82个不编码）：!#$&’()*+,/:;=?@-.~0-9a-zA-Z
encodeURIComponent（71个不编码）：!’()*-._~0-9a-zA-Z

所以根据实际情况进行选择，常用的为encodeURIComponent

编码对应有unescape、decodeURI和decodeURIComponent函数进行解码。

总结

JavaScript常用的编码函数为encodeURI和encodeURIComponent,选择它们的方法也很简单，因为它们编码的安全字符不同，根据编码的需求进行选择就可以了。

个人青睐的是encodeURIComponent，因为相比encodeURI，它对&也进行编码，比如搜索框输入&a=1,原意是想搜索一段包含&a=1字符串的内容，如果使用encodeURI的话，由于&未编码，&a=1在url中会被当做参数，以name/value的形式进行解析，变成参数a的值为1。

所以我的搜索实现方案是：

不要对跳转地址的url整个的进行编码，只对其搜索值进行编码拼接起来，如www.baidu.com?key=val1&name=val2

val1和val2是两个输入条件，那么编码可以这样

//搜索按钮点击事件
$("#searchbtn").click(function(){
	var key = $("#key").val();
    var name = $("#name").val();
	var url = "www.baidu.com?a=1";
    //编码
	if(key != ''){
		key = encodeURIComponent(key);
		url += "&search="+key;
	}
	if(name != ''){
		name = encodeURIComponent(name);
		url += "&name="+name;
	}
	// 如果不是搜索框类的，只是自己拼接参数，参数内容可控，可对?后面整个用encodeURI进行编码
	//新标签页跳转到搜索页面
	window.open(url);
});

解码就很方便了

//取得key
var key = getQueryString('key');
//取得name
var name = getQueryString('name');

//取地址栏name的正则，传入name,返回参数值 
function getQueryString(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	var r = decodeURIComponent(window.location.search).substr(1).match(reg);
	if (r != null) return r[2];
	return null;
}

参考地址

Url解码和编码 escape()、encodeURI()、encodeURIComponent()区别详解

谈谈encodeURI和encodeURIComponent以及escape的区别与应用

还有一篇找不到了，都大差不差。

只是简单的记录，如果有问题请帮忙指正。