获取地址栏上的URL参数现在最简单通用的方法应该就是下面这种了。
function getUrlParam (name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2]); return null;
}
// 使用方法就是:http://www.test.com?a=123&b=231
var a = getUrlParam('a') // a = 123
var b = getUrlParam('b') // b = 231

不过这种方法是有缺陷的,它不能识别URL中值带&或=,例如:http://www.test.com?a=1&23&b=231 在这里我们

a参数定的值为“1&23”,

如果还用上面的方法获取的话:

a = 1

为什么呢,这就要解析一波这个方法的原理

// 首先是获取URL
var r = window.location.search.substr(1);
// window.location.search.substr(1)可以获取URL?后面的字符串例如:http://www.test.com?a=123&b=231得到的会是:a=123&b=231
// 然后再用正则获取各个参数下的值
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
// 1.这里的(^|&)会匹配开头为空或&的字符
// 2.+ name + 这里是匹配你要找的参数名
// 3.([^&]*)这里是匹配“参数=”后面非&的字符
// 4.(&|$)这里匹配以空或&结束的字符
// 这里4个条件就把a=123&b=231里的a=123&或&b=231找出来了
r = r.match(reg);
// 这里match方法可以把符合正则的字符找出来,是以数组形式给出,例如我们要找的是a的话:
/*
[
'a=123&', // 这里是整个正则匹配出来的
'', // 这里是(^|&)匹配出来的
'123', // 这里是([^&]*)匹配的
'&' // 这里是(&|$)匹配的
]
*/
// 我们需要的就是第三个([^&]*)匹配的字符
decodeURIComponent(r[2]) // 这里拿到数组的第三个值再用decodeURIComponent转码

-就是如此要是再a=123&中提前遇到&就是提前终止。导致http://www.test.com?a=1&23&b=231 中a的值为1

那要怎么避免呢,这里就要修改一下正则

var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
// 这里前面的'(^|&)' + name + '='这段还是不变的。
// 不过([^&]*)这里对&的限制要解除才行。不能让它只匹配非&字符。所以改为([.*])匹配任何字符(这样说可能不是很严谨)
// (&|$)这里的最后不能通过&或空判断,应该是&xxx=这种结尾。所以改为(&[^&=]+=|$)匹配,这里的意思为&开头=结尾中间夹着非”&和=“的其他字符。这就满足我们的要求了。
// 最终的正则表达式应该是:
var reg = new RegExp('(^|&)' + name + '=(.*)(&[^&=]+=)');
// 这里因为(.*)是匹配所有字符,所以会匹配到最后一个符合(&[^&=]+=)的参数停止,这就会有一个问题了,
// 例如"http://www.test.com?a=1&23&b=231&c=565" 这里去‘a’的时候会取到'1&23&b=231',这里包含了b的。所以这里还要进一步处理只去&b=前面的值。
// 这里假设取‘a’的值为1&23&b=231
var a = '1&23&b=231'
var l = a.match(/&[^&=]+=/)[0] // 这里会得到第一个匹配‘/&[^&=]+=/’的字符串:'&b='
a = a.split(l)[0] // 这里在根据l分割a,取第一个,就是我们要的了
// 不过这样匹配不到最后一个参数,因为最后一个是空结尾而不是"&xxx=",所以要写多一个匹配最后一个参数的正则
var reg = new RegExp('(^|&)' + name + '=(.*)($)');

整个全新的方法是:

function getUrlParam (name) {
var reg = new RegExp('(^|&)' + name + '=(.*)(&[^&=]+=)');
var regLast = new RegExp('(^|&)' + name + '=(.*)($)');
var r = window.location.search.substr(1).match(reg) || window.location.search.substr(1).match(regLast);
if (r != null) {
var l = r[2].match(/&[^&=]+=/)
if (l) {
return decodeURIComponent(r[2].split(l[0])[0]);
} else return decodeURIComponent(r[2]);
}
return null;
}

有什么错误请指出。。

js获取地址栏URL上的参数的更多相关文章

  1. JS如何获取地址栏url后面的参数?

    本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:JS如何获取地址栏url后面的参数?: 这里提供了两种获取地址栏url后面参数的方法: 方式1 传参: window.location. ...

  2. js获取地址栏url以及获取url参数

    js原生态写法  代码如下 复制代码 function getUrlParam(name) {     var reg = new RegExp("(^|&)"+ name ...

  3. js获取当前url地址及参数

    介绍:设置或获取对象指定的文件名或路径. window.location.pathname //返回 设置或获取整个 URL 为字符串. window.location.href 设置或获取与 URL ...

  4. 获取网页URL地址及参数等的两种方法(js和C#)

    转:获取网页URL地址及参数等的两种方法(js和C#) 一 js 先看一个示例 用javascript获取url网址信息 <script type="text/javascript&q ...

  5. 【功能代码】---4用JS获取地址栏参数方法

    用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...

  6. (转)用JS获取地址栏参数的方法(超级简单)

    转自http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获 ...

  7. 【JS】---4用JS获取地址栏参数方法

    用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...

  8. 使用jquery获取url上的参数(笔记)

    使用jquery获取url上的参数(笔记) 一.做作业时经常要获取url上的参数 1.当url上有多个参数时 从互联网找到了一个方法 (function ($) { $.getUrlParam = f ...

  9. Loadrunner加密算法脚本与token作为get请求url上的参数处理

    1.当字符串被封装好加密时(下例将算法封装在md5中),使用Loadrunner编写脚本,需要进行如下操作:       1)将md5.h文件添加到Extra Files 下,如图(Loadrunne ...

随机推荐

  1. SE6新特性之集合Set、Map、WeakSet和WeakMap详解

    SE5的时候我们经常用数组或者类数组对象来操作数据,而对于一些使用惯了java之类语言的集合的开发人员来说,总有少了点什么的感觉,SE6提供Set和Map这两个集合.不仅从根本上为一些问题提供了解决方 ...

  2. 老大哥在看着你!我国部署超2000万个AI监控系统

    原文:Big brother is watching you! China installs 'the world's most advanced video surveillance system' ...

  3. Ionic3 创建应用(Android)

    打开CMD 通过命令行进入项目目录 创建一个App项目 ionic start myApp blank 空白App ionic start myApp tabs 导航条 ionic start myA ...

  4. 利用PowerShell 得到 进程总共占用的内存

    $task = tasklist /nh /fo csv $total = 0 for($i=0; $i -lt $task.count; $i++) { $one = $task[ $i ].Spl ...

  5. 八皇后问题 dfs/递归

    #include <bits/stdc++.h> using namespace std; const int maxn = 55; int ans=0; int vis_Q[maxn]; ...

  6. linux-more

    more 这个命令可以用来分页查看大篇幅的文件内容非常有效 命令参数: -num  : 这里的num 是一个数字,用来指定分页显示时每页的行数 +num  : 指定从文件的第几行num开始显示 ... ...

  7. 无状态的web应用(单个py文件的Django占位图片服务器)

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 阅读本文建议了解Django框架的基本工作流程,了解WSGI应用,如果对以上不是很清楚,建议结 ...

  8. c#正则表达式应用实例

    两种使用方法: 1.在文本输入框后加入正则表达式验证控件Regularexpression_r_rValidator.此种方法适用于WebForm中.在Validationexpression_r_r ...

  9. [转载] Java集合框架之小结

    转载自http://jiangzhengjun.iteye.com/blog/553191 1.Java容器类库的简化图,下面是集合类库更加完备的图.包括抽象类和遗留构件(不包括Queue的实现): ...

  10. .net core 使用X509 私钥加密请求

    1.获取证书路径 var basePath = _environment.ContentRootPath; //商户私钥证书,用于对请求报文进行签名 "); 2.数据加密 .net core ...