获取地址栏上的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. git常用命令集合

    git命令 git init:创建一个仓库并在目录下新建一个.git的文件(初始化一个git仓库) 注:.git文件在工作区,是一个隐藏文件(用ls -ah命令查看),但是它不算工作区,而是git 的 ...

  2. RxSwift 对 MJRefresh 使用的封装

    对于一个很常用的两个库, MJRefresh 如何可以像 UIButton 使用方式呢: btn.rx.tap.subscribe(...) Rxswift 中的很多类似处理的方式都使用了跟下面极为相 ...

  3. POJ2411 Mondriaan's Dream(状态压缩)

    Mondriaan's Dream Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 15295   Accepted: 882 ...

  4. IE (6-11)版本,在使用iframe的框架时,通过a标签javascript:; 和js跳转parent.location的时候 出现在新页面打开的情况

    问题描述: 使用iframe的情况下,在子框架中,使用如下形式的跳转: <a href="javascript:;" onclick="parent.locatio ...

  5. SpringAop源码情操陶冶-JdkDynamicAopProxy

    承接前文SpringAop源码情操陶冶-AspectJAwareAdvisorAutoProxyCreator,本文在前文的基础上稍微简单的分析默认情况下的AOP代理,即JDK静态代理 JdkDyna ...

  6. webpack学习笔记啊(幕课)

    基础配置总结 webpack hello.js hello.bundle.js打包命令参数 --config filename : 指定其他名称做配置文件 --watch / -w : 监听文件改动, ...

  7. 插件lombok的介绍安装

    Lombok插件 介绍一个不错的Eclipse插件Lombok 该插件对Log4j简化的代码,因为不大,所以jar包也存在呢! Lombox是Eclipse的一个插件,用来自动生成Java代码,减少手 ...

  8. [转载] Linux的Top命令解析

    转载自http://www.jb51.net/LINUXjishu/34604.html.http://blog.csdn.net/hello_yang213/article/details/7455 ...

  9. 照虎画猫写自己的Spring

    从细节跳出来 看了部分Spring的代码,前面用了四篇内容写了一些读书笔记. 回想起来,论复杂度,Spring够喝上好几壶的.他就像一颗枝繁叶茂的大树,远处看,只是一片绿:走近看,他为你撑起一片小天地 ...

  10. Iterator & Iterable 和 Comparable&Comparator

    java.lang.Iterator & java.lang.Iterable Iterator和Iterable的区别和联系 iterator是具有迭代状态的对象.它允许你检查它是否有更多的 ...