对前端同学来说,经常要碰到一种比较麻烦的情况,那就是url查询字符串的解析问题。说起来也不难,就是比较麻烦。

  具体来处理这种情况的时候,相信有一部分同学就是针对具体项目中的需要的字符去正则匹配一下,业务需求嘛,解决就算了。原来我也是这样干的。不过最好还是抽一种方法出来,毕竟这种工具类的发放很多地方都会用到。当然现在github上有很多大牛的作品可以借鉴。今天自己也来实现一下。

  总体思路很简单,就是正则去匹配看是否有查询字符串的出现,不过为了功能丰富点也就是随手加上了支持自定义字符串的解析(有点鸡肋),可选返回的是数组或者对象。具体处理可以见代码:

/**
* @method queryString
* @param getObj 结果为对象否则为数组
* @default false
* @param str 需要解析的string
* @default location.search
* @return Object or Array
* */
function queryString(getObj,str){
var string = (str!== undefined) ? str : window.location.search;
var result = string.match(new RegExp("[^\?\&]+=[^\?\&]+","g"));
if(result == null){
result = '';
}else if(getObj){
var params = {};
for(var i = 0; i < result.length; i++){
var res = result[i].split('=');
var key = res[0],
value = res[1];
params[key] = value;
}
result = params;
}
return result;
}

  2、关于业务方的需求,用一句话来形容比较合适:天长地久有时尽,需求变动无绝期。可能你有时候说,后端tm不需要全部的查询字符串他只要一个或者多个,反正就不要全部的。你给我个对象还是需要处理呀,能不能一步到位暴露获取具体的某个key的值的方法。当然既然都抽出来了那就要有这个意识。

  还是先说实现,其实与上面的思路也很类似只不过就是去匹配具体值了,然后返回字符串喽 :具体见代码

 1 /**
2 * @method queryByKey 获取指定key的值
3 * @param key
4 * @default null
5 * @return string
6 * */
7 function queryByKey(key){
8 var result = location.search.match(new RegExp(key+"=[^\?\&]+","g"));
9 var value = result?result[0].split('=')[1]:'';
10 return value;
11 }

  3、此外在方法一的基础上还可以新增一个方法,根据索引来获取具体值:

1 /**
2 * @method queryByKey 获取指定index的值
3 * @param index
4 * @default null
5 * @return string
6 * */
7 function queryByIndex(index){
8 var param = queryString()[index];
9 var value = param ? param.split('=')[1] : ''
10 return value;
11 }

   一句话抛砖引玉,希望有大牛来不吝赐教。有兴趣的同学可以移步到https://github.com/xiaoxiangdaiyu/querystring-url

   参考文章:http://www.cnblogs.com/sunnycoder/archive/2010/02/28/1674998.html

querystring 解析url 查询字符串的更多相关文章

  1. 黑马旅游网 解析url查询字符串

    function getUrlParam(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)( ...

  2. 解析URL查询字符串参数为对象以及老浏览器的getElementsByClassName

    高程3使用拼接字符串形式解析的查询字符串,网上有各种正则方式解析的,记得太多,临时需要写的时候,自己都搞混乱了.只记一种吧,用正则. function getQueryStringArgs() { v ...

  3. 添加jQuery方法解析url查询部分

    Web前端不同页面间传值可以使用 cookies.localStorage 和 sessionStorage 等本地存储. 但是,今天我们尝试使用 url 查询,假设我们要传递字符串 str 到 mo ...

  4. php的URL查询字符串解析函数

    URL查询字符串格式:Data[650][BLN]=40002307312&Data[650][Status]=電聯無人接聽. 解析这种数据使用函数:parse_str(). parse_st ...

  5. JS如何获取url查询字符串的键和值?

    /** * 根据url查询字符串里的键名获取其值 */function getSearchString(key, search) { // 获取URL中?之后的字符 var str = search; ...

  6. 【hive】解析url格式字符串

    解析url格式字符串 parse_url() parse_url(url_str,’xxx’):第一个参数是url格式字符串,第二个参数为要解析出来的属性 parse_url(‘http://face ...

  7. NodeJS学习笔记 (14)URL查询字符串-querystring(ok)

    模块概述 在nodejs中,提供了querystring这个模块,用来做url查询参数的解析,使用非常简单. 模块总共有四个方法,绝大部分时,我们只会用到 .parse(). **.stringify ...

  8. js获取url查询字符串参数

    最近看js高级程序设计 对其中查询字符串参数的获得重新写了,当传递一个完整的URL的时候对查询字符串的提取 function getQueryArgs(){ var qs = (location.se ...

  9. 函数parseQuery用于解析url查询参数

    在百度上找的,以后忘了再看. 语法如下: var obj = parseQuery(query) query是被解析的查询参数,函数返回解析后的对象. 使用范例如下: var jerry = pars ...

随机推荐

  1. Android开发各类常见错误解决方案

    本文属于个人平时项目开发过程遇到的一些问题,记录下来并总结解决方案,希望能帮到大家解决问题,有些问题的解决方案是在StackoverFlow上找到的,建议大家遇到问题多去上面找,基本上都能找到解决方案 ...

  2. Who's in the Middle[HDU1157]

    Who's in the Middle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  3. VS2010 OpenCV 2.4.6 配置 (Win7 32位)

    1.下载安装OpenCV 下载OpenCV-2.4.6.0 (文件大小 291M),下载地址如下,下载完成后解压缩到路径%OpenCV%下,本文%OpenCV%=E:\图像处理与计算机视觉. http ...

  4. ZooKeeper个人笔记Session管理

    Session 1.sessionId  <机器的SID,当前时间>生成一个sessionId,这是全局唯一的. 2.TimeOut 会话的超时时间,注意,这个值和客户端ZooKeeper ...

  5. HDU 3308 LCIS(线段树)

    题目链接 模板题吧,忘了好多,终于A了... #include <cstring> #include <cstdio> #include <string> #inc ...

  6. ios 单例设计模式

    单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类.单例可用性非常高,用于登录用户管理等可供全局调用. + (AccountMa ...

  7. openx中如何使用site-variable(参数)限制(关键词)广告显示

    openx是个很强大的广告管理系统,可以根据不同的情况显示不同的广告.其中可以根据get参数值的不同来显示,即delivery limitation中的site-variable选项,name表示变量 ...

  8. 利用jquery发送form表单

    $("#rap_save_draft").click(function(){ rap_start_editor.sync();//同步KindEditor的内容 // 取得要提交的 ...

  9. Bootstrap个人总结

    Bootstrap框架 1.以栅栏式布局,分12列,16列,24列和32列,常用12列. 2.整个页面必须在container容器内部 3.移动端以 <meta name="viewp ...

  10. Javascript初学篇章_2(数据类型的查看和转换/运算符)

    三.数据类型的查看和转换 1.查看数据类型 typeof 说明:typeo可以查看变量的类型. 语法:alert(typeof  变量名或数据): 2.转换成字符串 var married = fal ...