对前端同学来说,经常要碰到一种比较麻烦的情况,那就是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 自定义View合集

    自定义控件学习 https://github.com/GcsSloop/AndroidNote/tree/master/CustomView 小良自定义控件合集 https://github.com/ ...

  2. python中定义函数和参数的传递问题

    作者:達聞西链接:https://zhuanlan.zhihu.com/p/24162430来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 5.2.4 函数.生成器和类 ...

  3. HTTP Keep-Alive模式

    1.什么是Keep-Alive模式? 我们知道HTTP协议采用"请求-应答"模式, 当使用普通模式,即非KeepAlive模式时,每个请求/应答客户和服务器都要新建一个连接,完成 ...

  4. java-集合4

    浏览以下内容前,请点击并阅读 声明 对象排序 一个List对象中如果元素类型为String,则其按字母表顺序排序,而如果元素类型为Date,则按照年代排序,那如何判断元素的排序呢?String和Dat ...

  5. 未能添加对***.dll的引用问题

    在机器A上运行.编译成功的程序,在B上不能正确被编译,并且添加r如 knbook.dll 时候提示如下: 未能添加对"knbook.dll"引用,请确保此文件可以访问并且是一个有效 ...

  6. 真刀真枪压测:基于TCPCopy的仿真压测方案

    郑昀 基于刘勤红和石雍志的实践报告 创建于2015/8/13 最后更新于2015/8/19 关键词:压测.TCPCopy.仿真测试.实时拷贝流量 本文档适用人员:技术人员 提纲: 为什么要做仿真测试 ...

  7. jmeter jar包

    jmeter jar包下载地址: http://cn.jarfire.org/ApacheJMeter.html 放在 jmeter /lib目录下

  8. MyEclipse 点击 部署 按钮 无效

    找到MyEclipse的工作路径,我的是"D:\Workspace",到这个目录中去"\.metadata\.plugins\org.eclipse.core.runti ...

  9. C++的动态内存分配

  10. 2在HTML中使用JavaScript

    像HTML页面中插入JavaScrip的主要方法,就是使用<script>元素.HTML4.01为<script>定义了6个属性:async:可选,表示应该立即下载脚本,当不妨 ...