[javascript]javascript中怎样获取URL中的查询参数字符串值(query string value)，有哪些方法呢?

问题描述

在前端开发(javascript)中，是否有一种不使用插件的方法通过jQuery(或者不使用jQuery)来获取URL地址中的查询字符串值呢?
如果有，又有哪些方法可以实现呢？

方案一

可以不用第三方的插件，而使用原生的javascript实现获取URL地址中的查询参数字符串值，方法如下：

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

方法调用示例:

// 假如URL地址的参数为: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)

特别说明: 如果一个参数在URL参数字符串中被指定了多次(比如：?foo=lorem&foo=ipsum)，那么，上面这个函数会返回第一个匹配的值(lorem)。

方案二

将URL的参数字符串转换成数组，然后通过数组访问每个参数的值，如下：

var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        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]);
})();

调用示例：

//假如URL地址的参数为: ?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
// -> "front"

alert("empty" in urlParams);
// -> true

方案三

使用javascript的split方法实现，如下：

var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=', 2);
        if (p.length == 1)
            b[p[0]] = "";
        else
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

调用示例：

//假如URL地址的参数为: ?topic=123&name=query+string
qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)

方案四

现代浏览器(Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+, Chrome 49+)版本支持的情况下，可以使用URLSearchParams实现，如下：

let params = new URLSearchParams(location.search);

或者

let params = (new URL(location)).searchParams;

或者任意的URL地址：

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);

当然，还可以使用URL对象的.searchParams属性来访问参数，如下：

let params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2"