前言
这里记录一下关于页面传参编码的问题,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的区别与应用
还有一篇找不到了,都大差不差。
只是简单的记录,如果有问题请帮忙指正。