从URL中提取参数与将对象转换为URL查询参数的实现代码


Posted in Javascript onJanuary 12, 2012

一、从URL中提取参数

有下列字符串:

var linkURL = 'http://localhost:8080/String/string_6.html?昵称=小西山子&age=24#id1';
对于一个真实的URL地址,可以用js来读取location中的相关信息来获得某些信息,下面列举一些:

location.origin : http://localhost【域】 
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://localhost/project_js/Javascript/js_basic/demo/String/string_6.html?name=xesam#age【完整形式】 
location.protocol : http【协议】

其中,与从URL中提取参数主要是用到location.search。不过为了通用,我们不去读取location.search,直接处理字符串。

提取字符串查询字符串之后,转化为对象的形式。

先讨论几种查询字符串的情况:

(1)?昵称=小西山子&age=24#id1 -->{昵称:'小西山子',age:'24'}

(2)?昵称&age=24#id1'; -->{昵称:undefined,age:'24'}

(3)?=小西山子&age=24#id1 -->{age:'24'}

(4)?昵称=小西山子=又一个&age=24&age=24#id1 -->{昵称:'小西山子=又一个',age:['24','24']}

function toQueryParams(){ 
var search = this.replace(/^\s+/,'').replace(/\s+$/,'').match(/([^?#]*)(#.*)?$/);//提取location.search中'?'后面的部分 
if(!search){ 
return {}; 
} 
var searchStr = search[1]; 
var searchHash = searchStr.split('&'); var ret = {}; 
for(var i = 0, len = searchHash.length; i < len; i++){ //这里可以调用each方法 
var pair = searchHash[i]; 
if((pair = pair.split('='))[0]){ 
var key = decodeURIComponent(pair.shift()); 
var value = pair.length > 1 ? pair.join('=') : pair[0]; 
console.log() 
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来实现:
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的反向操作。

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 
})); //name=xesam&age=24 
console.log(toQueryString({ 
name : 'xesam', 
age : [24,25,26] 
})); //name=xesam&age=24&age=25&age=26

真实源码中用的是inject方法,不过在Enumerable部分,因此上面作了替换。
Javascript 相关文章推荐
javascript中万恶的function实例分析
May 25 Javascript
javascript时区函数介绍
Sep 14 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
js实现简单的打印表格
Jan 15 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 #Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 #Javascript
js日历功能对象
Jan 12 #Javascript
关于 文本框默认值 的操作js代码
Jan 12 #Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 #Javascript
JS读取cookies信息(记录用户名)
Jan 10 #Javascript
判断对象是否Window的实现代码
Jan 10 #Javascript
You might like
PHP定时执行任务的3种方法详解
2015/12/21 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
python django事务transaction源码分析详解
2017/03/17 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
师德师风剖析材料
2014/09/30 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
2015年话务员工作总结
2015/04/29 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
保护环境的宣传语
2015/07/13 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫