我怎样才能在JavaScript中获取查询字符串值?

是否有无插件方式通过jQuery(或没有)检索查询字符串值?

如果是这样,怎么样? 如果没有,是否有插件可以这样做?


您不需要为此目的使用jQuery。 你可以使用一些纯粹的JavaScript:

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, " "));
}

用法:

// query string: ?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)


注意:如果一个参数存在多次( ?foo=lorem&foo=ipsum ),您将得到第一个值( lorem )。 没有关于此的标准和用法各不相同,请参阅此问题的示例:重复HTTP GET查询键的权威位置。


这是基于新的URLSearchParams规范的更新,可以更简洁地实现相同的结果。 请参阅下面的“URLSearchParams”。


这里发布的一些解决方案效率不高。 每当脚本需要访问参数时重复正则表达式搜索是完全没有必要的,将参数拆分为关联数组样式对象的单个函数就足够了。 如果您不使用HTML 5 History API,则每页加载只需要一次。 这里的其他建议也无法正确解码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]);
})();

查询字符串示例:

?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

这也可以很容易地改进以处理数组式样的查询字符串。 这里有一个例子,但是由于数组样式参数没有在RFC 3986中定义,所以我不会用源代码污染这个答案。 对于那些对“污染”版本感兴趣的人,请看下面的campbeln答案。

另外,正如评论中指出的那样;key=value对的合法分隔符。 这将需要更复杂的正则表达式来处理;& ,我认为这是不必要的,因为这很少见; 被使用,我会说更不可能两个都会被使用。 如果你需要支持; 而不是& ,只是在正则表达式中交换它们。


如果您使用的是服务器端预处理语言,则可能需要使用其本机JSON函数为您完成繁重的工作。 例如,在PHP中,您可以编写:

<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

简单得多!


ES2015(ES6)

const getParams = query => {
  if (!query) {
    return { };
  }

  return (/^[?#]/.test(query) ? query.slice(1) : query)
    .split('&')
    .reduce((params, param) => {
      let [ key, value ] = param.split('=');
      params[key] = value ? decodeURIComponent(value.replace(/+/g, ' ')) : '';
      return params;
    }, { });
};

没有jQuery

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('&'));

使用类似于?topic=123&name=query+string的URL,将返回以下内容:

qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)

Google方法

撕毁谷歌的代码,我发现他们使用的方法: getUrlParameters

function (b) {
    var c = typeof b === "undefined";
    if (a !== h && c) return a;
    for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
        var l = b[f][p]("=");
        if (l !== -1) {
            var q = b[f][I](0, l),
                l = b[f][I](l + 1),
                l = l[Ca](/+/g, " ");
            try {
                d[q] = e(l)
            } catch (A) {}
        }
    }
    c && (a = d);
    return d
}

它被混淆了,但它是可以理解的。

他们开始寻找URL上的参数? 并从哈希# 。 然后对于他们在等号b[f][p]("=") (它看起来像indexOf ,它们使用char的位置来获取键/值)的每个参数。 让它分裂后,它们检查参数是否有值,如果有,则存储d的值,否则它们会继续。

最后,对象d返回,处理转义和+符号。 这个对象就像我的一样,它有相同的行为。


我的方法作为一个jQuery插件

(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/+/g, " "));
        }

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

用法

//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

性能测试(针对正则表达式方法的拆分方法)(jsPerf)

准备代码:方法声明

分割测试代码

var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

正则表达式测试代码

var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

在Windows Server 2008 R2 / 7 x64上的Firefox 4.0 x86中进行测试

  • 拆分法 :最快144,780±2.17%
  • 正则表达式 :13,891±0.85%| 慢90%
  • 链接地址: http://www.djcxy.com/p/363.html

    上一篇: How can I get query string values in JavaScript?

    下一篇: How to merge two dictionaries in a single expression?