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 相关文章推荐
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
javascript中万恶的function实例分析
May 25 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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在网页中动态生成PDF文件详细教程
2014/07/05 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
flask-restful使用总结
2018/12/04 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
《火烧云》教学反思
2014/04/12 职场文书
单位活动策划方案
2014/08/17 职场文书
校本研修个人总结
2015/02/28 职场文书
入党群众意见范文
2015/06/02 职场文书
改进工作作风心得体会
2016/01/23 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技