js分解url参数(面向对象-极简主义法应用)


Posted in Javascript onAugust 09, 2012

修改前:

<script type="text/javascript"> 
var url="www.taobao.com?key0=a&key1=b&key2=c"; 
function parseQueryString(url){ 
var str=url.split("?")[1], 
items=str.split("&"); 
var arr,name,value; 
for(var i = 0, l = items.length; i < l; i++){ 
arr=items[i].split("="); 
name= arr[0]; 
value= arr[1]; 
this[name]=value; 
} 
} 
var obj=new parseQueryString(url); 
alert(obj.key1) 
</script>

修改后:
<script type="text/javascript"> 
var url="www.taobao.com?key0=a&key1=b&key2=c"; 
var pQString={ 
createNew:function(url){ 
var str=url.split("?")[1], 
items=str.split("&"); 
var arr,name,value; 
for(var i = 0, l = items.length; i < l; i++){ 
arr=items[i].split("="); 
name= arr[0]; 
value= arr[1]; 
this[name]=value; 
} 
} 
} 
var obj=new pQString.createNew(url); 
alert(obj.key1) 
</script>

感谢 草根程序猿很厉害把这个方法重写了一下,更严密,高效了,最后面在些再学习一下!!!
<script type="text/javascript"> 
function getQueryString(url) { 
if(url) { 
url=url.substr(url.indexOf("?")+1); //字符串截取,比我之前的split()方法效率高 
} 
var result = {}, //创建一个对象,用于存name,和value 
queryString =url || location.search.substring(1), //location.search设置或返回从问号 (?) 开始的 URL(查询部分)。 
re = /([^&=]+)=([^&]*)/g, //正则,具体不会用 
m; 
while (m = re.exec(queryString)) { //exec()正则表达式的匹配,具体不会用 
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); //使用 decodeURIComponent() 对编码后的 URI 进行解码 
} 
return result; 
} 
// demo 
var myParam = getQueryString("www.taobao.com?key0=a&key1=b&key2=c"); 
alert(myParam.key1); 
</script>

注:
1、substr()与substring(start,stop) ,提取字符串中介于两个指定下标之间的字符。
重要事项:与 slice() 和 substr() 方法不同的是,substring() 不接受负的参数。
参见https://3water.com/w3school/js/jsref_substring.htm
2、location.search.substring(1) ,location.search设置或返回从问号 (?) 开始的 URL(查询部分)。
参见https://3water.com/w3school/htmldom/prop_loc_search.htm
3、exec() 方法用于检索字符串中的正则表达式的匹配。太强大了,还不会用
参考https://3water.com/w3school/js/jsref_exec_regexp.htm
4、使用 decodeURIComponent() 对编码后的 URI 进行解码。
参见https://3water.com/w3school/js/jsref_exec_regexp.htm
Javascript 相关文章推荐
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
vue.js表格分页示例
Oct 18 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 #Javascript
JS数学函数Exp使用说明
Aug 09 #Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 #Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 #Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 #Javascript
基于jQuery的简单九宫格实现代码
Aug 09 #Javascript
JavaScript基础知识之数据类型
Aug 06 #Javascript
You might like
php Undefined index的问题
2009/06/01 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
JS数学函数Exp使用说明
2012/08/09 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
python列表的增删改查实例代码
2018/01/30 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
如何卸载python插件
2020/07/08 Python
selenium如何定位span元素的实现
2021/01/13 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
毕业生教师求职信
2013/10/20 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
居住证明范文
2015/06/17 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
mysql中between的边界,范围说明
2021/06/08 MySQL