JavaScript获取url传参的几个方法

2011-09-08

需求分析

随着浏览器端JavaScript编程的流行,经常碰到要分析和获取url上带的参数。

正则表达式实现

先看代码:

function getUrlParam(name) {
    var reg = new RegExp("[?&]" + name + "=([^?&]*)[&]?", "i");
    var match = location.search.match(reg);
    return match == null ? "" : match[1];
}

这个方法通过构造一个正则表达式来匹配到需要查询的url参数,location.search是获取到url中的查询字符串部分。这个方法的优点是简洁,缺点是每次都需要对字符串进行分析查找,多次查询同一个参数效率低下,所以有了下面这个方法。

利用闭包和正则表达式实现

代码如下:

var getUrlParam = function() {
    var args = null;
    return function(name) {
        if (args === null) {
            if (location.search == "") return "";
            var queryArray = location.search.substring(1).split("&");
            var i;
            args = {};
            for (i = 0; i < queryArray.length; i++) {
                var match = queryArray[i].match(/([^=]+)=([^=]+)/);
                if (match !== null) {
                    args[match[1]] = match[2];
                }
            }
        }
        return args[name] == undefined ? "" : args[name];
    };
}();

这个方法利用了js的函数闭包,将url参数都保存在一个匿名函数里面的args变量中,而且除了通过getUrlParam外,任何方法都访问不到该变量。而且只有第一次获取url参数的时候才会分析url,以后就直接从变量args中读取。不过这个方法也有缺点,就是代码比较复杂,还有就是一次把不需要的参数也解析出来了,有的时候只用一次就太不值了,还有闭包带来的性能降低。其优点就是对于需要多次访问的时候,除了第一次访问需要解析,后面都很快。

总结

综上所述,如果在一个页面中需要多次获取url参数就推荐使用第二种方法,如果访问次数很少的话第一种则更好。