从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 相关文章推荐
jquery 学习笔记一
Apr 07 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
js实现随机点名
Jan 19 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
PHP 透明水印生成代码
2012/08/27 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
JS实现放大镜效果
2020/09/21 Javascript
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Pyqt5自适应布局实例
2019/12/13 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
项目专员岗位职责
2013/12/04 职场文书
网管求职信
2014/03/03 职场文书
大学生求职信
2014/06/17 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
python 如何用terminal输入参数
2021/05/25 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技