通过Javascript得到URL中的参数(query string)

我们知道，"GET"请求中，通常把参数放在URL后面，比如这样
http://www.cnblogs.com/season-huang/index?param=yes&article=1
其中，红色部分便是URL中的参数。

那么，如何通过Javascript得到它呢？而且怎么从这么一堆字符串中找到我所需要的参数所对应的值呢？

方法一：

function getParameterByName(name) {

    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");

    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),

    results = regex.exec(location.search);

    return results == null ? "": decodeURIComponent(results[1]);

}

console.log(getParameterByName("param")) //yes

先来解释下这段代码吧：

1：定义一个 getParameterByName 函数，接收需要查询的参数的key，然后返回这个参数的value

2：name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
这句代码的作用是把 "[" 换成 "\[" , 把 "]" 换成 "\]" ，之所以做这么一个转换，是因为下面需要使用name这个变量去构造一个正则表达式，而 [ 和 ] 在正则中是关键字，所以需要转义。

3 var regex = new RegExp("[\\?&]" + name + "=([^&#]*)")

这句代码比较简单，匹配 ? 或者 & 然后是 name 然后是 = 和非（&或者#）。

4 results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1]);

这两句放一起看把，首先 location.search 拿到全部的查询字符串（即文章最开头给的范例URL中红色部分），然后使用正则的exec方法去匹配出结果，这个方法会返回一个数组，在这个例子里面，results这个数组为["?params=yes","yes"]。这里要说明下，因为在正则中，给匹配出yes的部分加了个括号分组，所以结果中数组的第二项（results[1]）为yes。

这个函数的确写的很优雅，很强大。但是呢，有一个缺点，就是每次我需要查询的一个参数的时候，都需要进行这么一个过程，构造正则，匹配location.search，返回结果。但是很明显，当我们页面载入完成的时候，URL是固定的，不会变得（不考虑html5 history api），所以每次进行这么一个过程很浪费资源，所以有了下面这个方法。

方法二

var urlParams;

(window.onpopstate = function() {

    var match,
    pl = /\+/g,

    search = /([^&=]+)=?([^&]*)/g,

    decode = function(s) {

        return decodeURIComponent(s.replace(pl, " "));

    },

    query = window.location.search.substring(1);

    urlParams = {};

    while (match = search.exec(query))

       urlParams[decode(match[1])] = decode(match[2]);

})();

　　//urlParams的结果

    urlParams = {

      param: "yes",

      article: "1"

    }

    console.log(urlParams["param"]);  // -> "yes"

    console.log("article" in urlParams);  // -> true

这段代码比较简单，唯一要说明的是 pl = /\+/g, s.replace(pl, " ")); 之所以会有这么一句，是因为在URL规范里面，加号(+)会被编码为空格，所有在decode的时候，需要把加号转回空格去。

这个方法里面，当页面加载完成时，会把URL中所有参数放在urlParams这个对象里面。之后只需要查找这个对象的属性就可以找到相应的结果了。

在实际工作中，个人认为，这种方法比第一种可取。

方法三

var qs = (function(a) {

    if (a == "") return {};

    var b = {};

    for (var i = 0; i < a.length; ++i)

    {

        var p=a[i].split('=');

        if (p.length != 2) continue;

        b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));

    }

    return b;

})(window.location.search.substr(1).split('&'));

qs["param"]; // yes
qs["article"]; // 1
qs["nothere"]; // undefined (object)

比较简单明了,这里对代码就不做解释了。和方法二一样，把结果存储在qs这个对象里面。

方法四

function getParameterByName(name) {

    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);

    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));

}

如果是在一个页面里偶尔用一次，并且对代码的字节数有强迫症的人，可以使用这个方法。

最后，有一些jQuery插件也实现了这样的功能。不过个人认为这种小方法写成插件形式并不是很有必要的感觉，所以在这里就不列举出来了，可以自行谷歌。

本文参考 : http://*.com/questions/901115/how-can-i-get-query-string-values

转载本站文章请注明作者和出处奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，请勿用于任何商业用途

秒客网

通过Javascript得到URL中的参数(query string)

相关文章