从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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
javascript call方法使用说明
Jan 11 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
JS中Location使用详解
May 12 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 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下使用以下代码连接并测试
2008/04/09 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
Sample script that deletes a SQL Server database
2007/06/16 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
深入解析Python中的变量和赋值运算符
2015/10/12 Python
python自动翻译实现方法
2016/05/28 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
python tornado微信开发入门代码
2018/08/24 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python多线程正确用法实例解析
2020/05/30 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
写一个方法1000的阶乘
2012/11/21 面试题
计算机专业个人简短的自我评价
2013/10/23 职场文书
九一八事变演讲稿
2014/09/05 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
初二学生评语大全
2014/12/26 职场文书
施工现场安全管理制度
2015/08/05 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
Python借助with语句实现代码段只执行有限次
2022/03/23 Python