通过正则格式化url查询字符串实现代码

 更新时间:2012年12月28日 18:15:32   作者:  
看到项目里通过js数组split方法格式化查询字符串的,突发奇想为什么不能用正则呢,性能如何?感兴趣的朋友可以研究下哦
看到项目里通过js数组split方法格式化查询字符串的,突发奇想为什么不能用正则呢,性能如何?于是便有了如下代码:
复制代码 代码如下:

var url='www.baidu.com?a=123&b=456&c=789&e=dfsdfsdfsdfsdfsdfsdf&f=46545454545454785&g=e23232dsfvdfvdf';
/**
* 格式化查询字符串(正则实现)
* @param url url地址
* @return {Object} 格式化的json对象
*/
function formatUrl(url){
var reg=/(?:[?&]+)([^&]+)=([^&]+)/g;
var data={};
function fn(str,pro,value){
data[decodeURIComponent(pro)]=decodeURIComponent(value);
}
url.replace(reg,fn);
return data;
}
/**
* 格式化查询字符串(数组实现)
* @param url url地址
* @return {Object} 格式化的json对象
*/
function formatUrl2(url){
url=url.replace(/.*\?/,'');
var args={},
items=url.length?url.split("&"):[]
,item=null
,i=0
,len=items.length;
for(i=0;i<items.length;i++){
item=items[i].split("=");
args[decodeURIComponent(item[0])]=decodeURIComponent(item[1]);
}
return args;
}
var startTime=new Date();
for(var i=0;i<1000000;i++){
formatUrl2(url);
}
console.log('formatUrl2',(new Date()-startTime)); //formatUrl2 12138
startTime=new Date();
for(var i=0;i<1000000;i++){
formatUrl(url);
}
console.log('formatUrl',(new Date()-startTime)); //formatUrl 12537

测试浏览器是chrme 25;正则实现的函数居然比数组实现的函数要慢(泪奔....)。不过还好,在重复执行一百万次的情况下只慢0.4秒

相关文章

  • Javascript模拟实现new原理解析

    Javascript模拟实现new原理解析

    这篇文章主要介绍了Javascript模拟实现new原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • 动态显示可输入的字数提示还可以输入的字数

    动态显示可输入的字数提示还可以输入的字数

    这篇文章主要介绍了动态显示可输入的字数提示还可以输入的字数,需要的朋友可以参考下
    2014-04-04
  • 10行代码实现微信小程序滑动tab切换

    10行代码实现微信小程序滑动tab切换

    这篇文章主要为大家详细介绍了10行代码实现微信小程序滑动tab切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • js验证框架之RealyEasy验证详解

    js验证框架之RealyEasy验证详解

    这篇文章主要为大家详细介绍了js验证框架之RealyEasy验证,记录了RealyEasy验证的使用步骤,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • JS页面刷新与重新加载功能实现(关闭当前窗口)

    JS页面刷新与重新加载功能实现(关闭当前窗口)

    在计算机网页中如果我们想获取当前页面最新的内容,可以刷新当前页面重新获取数据,这篇文章主要给大家介绍了关于JS页面刷新与重新加载功能实现(关闭当前窗口)的相关资料,需要的朋友可以参考下
    2023-10-10
  • js二级地域选择的实现方法

    js二级地域选择的实现方法

    js二级地域选择的实现方法,需要的朋友可以参考一下
    2013-06-06
  • ES6学习教程之Map的常用方法总结

    ES6学习教程之Map的常用方法总结

    Map 是 ES6 中新增的一种数据结构,与 Set 一起添加,其实功能都差不多。下面这篇文章主要给大家总结介绍了关于ES6学习教程之Map的常用方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • JS实现合并两个数组并去除重复项只留一个的方法

    JS实现合并两个数组并去除重复项只留一个的方法

    这篇文章主要介绍了JS实现合并两个数组并去除重复项只留一个的方法,涉及JavaScript数组合并及去重的相关技巧,需要的朋友可以参考下
    2015-12-12
  • JavaScript初学者应注意的七个细节小结

    JavaScript初学者应注意的七个细节小结

    每种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的
    2012-01-01
  • Webpack优化配置缩小文件搜索范围

    Webpack优化配置缩小文件搜索范围

    这篇文章主要介绍了Webpack优化-缩小文件搜索范围的相关知识,文中较详细的给大家介绍了可以优化的途径,需要的朋友可以参考下
    2017-12-12

最新评论