【Javascript】从URL中提取参数与将对象转换为URL查询参数
这两种主要是对《Prototype浅析》先前略过的String部分中toQueryParams和Object部分的toQueryString方法的补充
一、从URL中提取参数
有下列字符串:
1
| var linkURL = 'http://localhost:8080/String/string_6.html?昵称=小西山子&age=24#id1';
|
对于一个真实的URL地址,可以用js来读取location中的相关信息来获得某些信息,下面列举一些:
1 2 3 4 5 6 7 8 9
| location.origin : http: location.pathname : /project_js/Javascript/js_basic/demo/String/string_6.html【URL路径】 location.host : localhost【主机+端口】 location.hostname : localhost【主机名】 location.port :【端口】 location.search : ?name=xesam【查询字符串】 location.hash : #age【锚点】 location.href : http: location.protocol : http【协议】
|
其中,与从URL中提取参数主要是用到location.search。不过为了通用,我们不去读取location.search,直接处理字符串。
提取字符串查询字符串之后,转化为对象的形式。
先讨论几种查询字符串的情况:
- ?昵称=小西山子&age=24#id1 –>{昵称:’小西山子’,age:’24’}
- ?昵称&age=24#id1’; –>{昵称:undefined,age:’24’}
- ?=小西山子&age=24#id1 –>{age:’24’}
- ?昵称=小西山子=又一个&age=24&age=24#id1 –>{昵称:’小西山子=又一个’,age:[‘24’,’24’]}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
| function toQueryParams(){ var search = this.replace(/^\s+/,'').replace(/\s+$/,'').match(/([^?#]*)(#.*)?$/); if(!search){ return {}; } var searchStr = search[1]; var searchHash = searchStr.split('&');
var ret = {}; for(var i = 0, len = searchHash.length; i < len; i++){ var pair = searchHash[i]; if((pair = pair.split('='))[0]){ var key = decodeURIComponent(pair.shift()); var value = pair.length > 1 ? pair.join('=') : pair[0]; if(value != undefined){ value = decodeURIComponent(value); } if(key in ret){ if(ret[key].constructor != Array){ ret[key] = [ret[key]]; } ret[key].push(value); }else{ ret[key] = value; } } } return ret; } console.dir(toQueryParams.call(linkURL)); ````
上面基本就是Prototype中toQueryParams的实现,上面有一个步骤是用'='分割参数,然后在value中再拼接。另外可以用substring来实现:
```javascript function toQueryParams(){ var search = this.replace(/^\s+/,'').replace(/\s+$/,'').match(/([^?#]*)(#.*)?$/); if(!search){ return {}; } var searchStr = search[1]; var searchHash = searchStr.split('&');
var ret = {}; searchHash.forEach(function(pair){ var temp = ''; if(temp = (pair.split('=',1))[0]){ var key = decodeURIComponent(temp); var value = pair.substring(key.length + 1); if(value != undefined){ value = decodeURIComponent(value); } if(key in ret){ if(ret[key].constructor != Array){ ret[key] = [ret[key]]; } ret[key].push(value); }else{ ret[key] = value; } } }); return ret; } console.dir(toQueryParams.call(linkURL));
|
二、对象转换为URL查询参数
对象转换为URL查询参数就麻烦一点。不过由于是转换成查询参数形式,因此只能处理单层嵌套的对象,子对象就不能处理了。其原理就是toQueryParams的反向操作。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| function toQueryPair(key, value) { if (typeof value == 'undefined'){ return key; } return key + '=' + encodeURIComponent(value === null ? '' : String(value)); } function toQueryString(obj) { var ret = []; for(var key in obj){ key = encodeURIComponent(key); var values = obj[key]; if(values && values.constructor == Array){ var queryValues = []; for (var i = 0, len = values.length, value; i < len; i++) { value = values[i]; queryValues.push(toQueryPair(key, value)); } ret = ret.concat(queryValues); }else{ ret.push(toQueryPair(key, values)); } } return ret.join('&'); } console.log(toQueryString({ name : 'xesam', age : 24 })); console.log(toQueryString({ name : 'xesam', age : [24,25,26] }));
|
真实源码中用的是inject方法,不过在Enumerable部分,因此上面作了替换。