对前端同学来说,经常要碰到一种比较麻烦的情况,那就是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. js调试--查找dom对象绑定的函数

    点击最右侧的js文件. 选中函数upload_pic_box,右击,选择在控制台中调试,或者在控制台直接输入该函数 点击最后一行代码会打开该函数所在的js文件

  2. JavaScript(一)

    JavaScript 是脚本语言 JavaScript 是一种可插入 HTML 页面的轻量级的编程语言,它跟Java没有什么蛋关系. JavaScript使用: <script language ...

  3. Unity3d uGUI适配

    Cavas: 1.Render Model设置为:Screen Space- Camera.如果想在UI前面加特效我可以在创建一个摄像机(UIForward)深度大于这个UICamera就行了. 2. ...

  4. EF MySql 配置文件

    <?xml version="1.0" encoding="utf-8"?><!--有关如何配置 ASP.NET 应用程序的详细信息,请访问 ...

  5. PHP-Redis扩展使用手册(三)

    /* 序列化key对应的value,如果key不存在则返回false * @param key * @return 序列化后的val或者false */ $redis->set('key_1', ...

  6. jsonp模拟获取百度搜索相关词汇

    随便写了个jsonp模拟百度搜索相关词汇的小demo,帮助新手理解jsonp的用法. <!DOCTYPE html><html lang="en">< ...

  7. MongoDB性能篇之创建索引,组合索引,唯一索引,删除索引和explain执行计划

    这篇文章主要介绍了MongoDB性能篇之创建索引,组合索引,唯一索引,删除索引和explain执行计划的相关资料,需要的朋友可以参考下 一.索引 MongoDB 提供了多样性的索引支持,索引信息被保存 ...

  8. .net手机号码归属地查询

    调用百度 api http://apistore.baidu.com/apiworks/servicedetail/117.html 贴上代码 using Newtonsoft.Json;using ...

  9. poj1543-Perfect Cubes(暴力)

    水题:求n^3 =  a^3 + b^3 + c^3 ;暴力即可 #include<iostream> using namespace std; int main(){ int n ; c ...

  10. 安卓初級教程(1):@Database(1)

    package com.example.android.db01; import android.app.Activity; import android.content.ContentValues; ...