JS获取URL中参数值(QueryString)的4种方法分享


Posted in Javascript onApril 12, 2014

方法一:正则法

function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}
// 这样调用:
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

方法二:split拆分法

function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
var Request = new Object();
Request = GetRequest();
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];

方法三:又见正则

通过JS获取url参数,这个经常用到。比如说一个url:http://w3water.com/?q=js,我们想得到参数q的值,那可以通过以下函数调用即可。

function GetQueryString(name) {  
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
    var r = window.location.search.substr(1).match(reg);  //获取url中"?"符后的字符串并正则匹配
    var context = "";  
    if (r != null)  
         context = r[2];  
    reg = null;  
    r = null;  
    return context == null || context == "" || context == "undefined" ? "" : context;  
}
alert(GetQueryString("q"));

方法四:单个参数的获取方法

function GetRequest() {
   var url = location.search; //获取url中"?"符后的字串
   if (url.indexOf("?") != -1) {    //判断是否有参数
      var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
      strs = str.split("=");   //用等号进行分隔 (因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔)
      alert(strs[1]);          //直接弹出第一个参数 (如果有多个参数 还要进行循环的)
   }
}

 

Javascript 相关文章推荐
Js 本页面传值实现代码
May 17 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
js date 格式化
Feb 15 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
javascript对JSON数据排序的3个例子
Apr 12 #Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 #Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 #Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 #Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 #Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 #Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 #Javascript
You might like
PHP设计模式 注册表模式
2012/02/05 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
php并发加锁示例
2016/10/17 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
javascript Excel操作知识点
2009/04/24 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
Cython 三分钟入门教程
2009/09/17 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
Python多线程爬虫简单示例
2016/03/04 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
Shein英国:女性时尚网上商店
2019/04/10 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
委托书样本
2014/04/02 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书