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中文逗号转英文实现
Feb 11 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
JS排序之快速排序详解
Apr 08 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
深入理解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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
Swift中的协议(protocol)学习教程
2016/07/08 Python
windows下python连接oracle数据库
2017/06/07 Python
Python文件操作基本流程代码实例
2017/12/11 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python按钮的响应事件详解
2019/03/04 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
物理系毕业生自荐信
2013/11/01 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
2015年调度员工作总结
2015/04/30 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
如何自己动手写SQL执行引擎
2021/06/02 MySQL