通用代码 js获取URL参数

URL参数格式

http://localhos:8080/demo?a=b&c=d&e=f
匹配参数a对应的表达式为 ^a=([^&]*)&
匹配参数b对应的表达式为&b=([^&]*)&
匹配参数c对应的表达式为&c=([^&]*)$
http://localhos:8080/demo?h=i
匹配参数h对应的表达式为^h=([^&]*)$

请思考: 为什么[^&]*要使用()包裹？

代码

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;
}

说明

window.location中的属性如下图(1)所示

图(1)
href:请求URL
search:请求URL中请求参数的部分(含有?，在对此部分内容进行解析时，需要注意问号)

getQueryString(name)中形参name的值
是我们要从URL中获取的参数名

window.location.search.substr(1)是截取?后面的内容进行匹配

"(^|&)" + name + "=([^&]*)(&|$)"

(^|&)表示 匹配字符串的起始位置或&字符

name表示匹配name的值

=([^&]*)(&|$)表示匹配 等号+零到多个非&的字符+&字符或字符串结束位置

图(2)
从图(2)中可看出下标为2的元素就是我们希望获取的参数值，若对match()返回数组中各元素所代表的含义不理解的可查看 javascript match()函数匹配正则表达式时的返回值问题

参考资料

js中window.location.search的用法和作用
正则表达式语法
javascript match()函数匹配正则表达式时的返回值问题
读懂正则表达式就这么简单

看完了内容，前面提到的思考问题现在明白了吗？