当前位置:  开发笔记 > 编程语言 > 正文

如何在JavaScript中获取查询字符串值?

如何解决《如何在JavaScript中获取查询字符串值?》经验,为你挑选了48个好方法。

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

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



1> Artem Barger..:

更新:2018年9月

您可以使用简单且具有良好浏览器支持的 URLSearchParams .

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

一部开拓创新

你不需要为此目的使用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查询键的权威位置.
注意:该功能区分大小写.如果您更喜欢不区分大小写的参数名称,请将"i"修饰符添加到RegExp


这是基于新的URLSearchParams规范的更新,以更简洁地实现相同的结果.请参阅下面标题为" URLSearchParams "的答案.


没有人说用纯Javascript无法做到这一点.如果你已经在使用jQuery,并且jQuery有一个函数来执行此操作,那么使用jQuery而不是使用新函数重新发明轮子是有意义的.
这个函数如何处理`http://www.mysite.com/index.php?x = x1&x = x2&x = x3`字段`x`的值是不明确的.
这也不能处理[多值键](http://en.wikipedia.org/wiki/Query_string#Structure),它们也是完全合法的.
对于`?mykey = 0&m.+ key = 1`的查询字符串,调用`getParameterByName("m.+ key")`将返回`0`而不是`1`.在构建正则表达式之前,需要在`name`中转义正则表达式元字符.而且你只需要通过使用全局标志并使用`"\\ $&"`作为替换表达式来调用`.replace()`一次.你应该搜索`location.search`而不是`location.href`.超过400票的回答应该考虑到这些细节.
为什么要使用正则表达式呢?
您不需要jQuery用于此目的或任何其他目的.你实际上并不需要它.
我们怎样才能确定这是正确的?我找不到一个糟糕的测试用例的事实并不意味着没有.毕竟这是一个安全问题!为了上帝的缘故,请调用经过良好测试的标准库函数.
@Kyralessa,我的观点是表明你不需要使用框架来实现目标.但是你欢迎重写和生成jQuery插件,顺便说一下为什么不是Dojo或ExtJS?
这个答案有很多问题.我觉得我已经离开了StackOverflow并徘徊在PHP Annotated Manual中
在name.replace行上你有一个替换似乎正在逃避\和] - 是正确的还是应该是"\\\]"因为]不需要转义?
@YannisDran我非常怀疑回答者意味着纯粹的javascript,而不是一些名为Vanilla javascript的javascript变种或库.
你可以使用`let myParam = urlParams.getAll('myParam')`来检索所有**与给定搜索参数相关的值.
原始来源http://www.netlobo.com/url_query_string_javascript.html
将未刷新/未翻译的用户提供的值注入正则表达式...糟糕.

2> Andy E..:

这里发布的一些解决方案效率低下.每次脚本需要访问参数时重复正则表达式搜索是完全没有必要的,将参数拆分成关联数组样式对象的单个函数就足够了.如果您不使用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中,您可以编写:

更简单!


@Nick:哈希后的任何内容都存在于`window.location.hash`属性中,该属性与`window.location.search`属性是分开的.如果哈希值发生变化,它根本不会影响查询字符串.
不要忘记`;`是GET`key = value`对的[legal delimiter](http://en.wikipedia.org/wiki/Query_string#Structure).这种情况很少见,但实施起来需要5秒钟.
对于我们这些使用相当严格的JSHint设置的人来说,`while(match = search.exec(query))`和`while((match = search.exec(query))!== null)`
如果你正在做一个重度ajax的应用程序,那么你可能正在使用哈希(#)来"启用后退按钮"......在这种情况下,查询字符串会一直改变(看看facebook如何做). ..虽然这些解决方案忽略了#anways之后发生的事情......
公平地说,RFC3986没有定义查询字符串的特定格式.`?a = b&c = d`是常规的,是Web表单的W3C推荐,但URI规范只定义了`query =*(pchar /"/"/"?")`.
正则表达式无法正常工作,第一个参数匹配url的所有开头:这里是固定版本:`/([^?&=] +)=([^&]*)/ g` - > http ://rubular.com/r/jnKzhVpo1b
@Yar:我不认为那是黑白的.我要说在JS中根本不需要任何查询字符串值.这个问题的最佳答案是无论哪个开发人员使用它都始终如一.当前接受的答案的性能完全取决于开发人员如何使用它,并且假设这样的开发人员足以优化他们自己的代码以补偿功能的低效率并不是一个好主意.公平地说,自从我写这个问题以来,这个问题已经收到了不少答案,所以我想我可以改变这条线.
@Yar:当然,你有一点,我在某种程度上同意:-)我的论点是,"很大程度上效率低下"的答案不是因为他们选择的方法(一次解析一个而不是全部解决)曾经),但因为他们缺乏某些优化(例如缓存结果,预编译正则表达式).在未来或许我会创建某种杂交版本,只为你;-)

3> BrunoLM..:
ES2015(ES6)
getQueryStringParams = query => {
    return query
        ? (/^[?#]/.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('&'));

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

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

谷歌方法

撕毁谷歌的代码,我找到了他们使用的方法: 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
}

它是混淆的,但它是可以理解的.它不起作用,因为某些变量未定义.

他们开始在网址上查找参数?,也从哈希中查找参数#.然后对于每个参数,它们以等号分割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¶m2=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%


@zachleat如果你没有框架,你的功能就会遍布你的代码.如果你扩展jQuery,你将拥有一个函数范围,它不会浮动在代码中的某个地方.我认为这是唯一的原因.
好奇为什么当它没有任何jQuery特定代码时你会把它变成一个jQuery插件?
[这里是jQuery的版本](http://jsfiddle.net/patridge/P6zdc/)调整,以通过[JSLint的](http://www.jslint.com/)(至少半移动的JSLint的目标. com on 2011-06-15).大多数情况下只是搬家来安抚克罗克福德.
正如@BenjaminGruenbaum开玩笑说的那样,我也没有看到对URL解析性能进行基准测试的重点.如果这是一个同构的JavaScript模块,可以从Node调用,比如解析日志,那么是.但是使用它来从`window.location`中提取URL参数会使任何性能问题都没有用,因为导航到URL的客户端远远便宜得多.

4> James..:

改进版Artem Barger的答案:

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

有关改进的更多信息,请参阅:http://james.padolsey.com/javascript/bujs-1-getparameterbyname/


如果你想稍微缩短它,你可以取消三元条件并用最后一行的一些短电路替换它 - `return match && decodeURIComponent(match [1] .replace(/\+/g,''));`.
在创建正则表达式时我会使用`new`前缀:`var match = new RegExp('...`
IE11错误:IE决定在返回的值前加上ascii字符8206(十六进制:200E-“从左至右字符”)。我浪费了超过6个小时才找到这个!*治疗性排气* ....固定,固定在最后一行的末尾:`.replace('\ u200E','')

5> Paul Sweatte..:
URLSearchParams

火狐44+,歌剧36+,边缘17+,Safari浏览器10.3+和Chrome 49+支持URLSearchParams API:

Chrome公告和详细信息

歌剧公告和细节

Firefox公告和细节

对于IE的稳定版本,有一个谷歌建议的URLSearchParams polyfill.

它没有被W3C标准化,但它是WhatWG的生活标准.

您可以在现场使用它,但是您需要删除location问号(例如,带.searchParams):

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

你也可以get(KEY)在URL对象上使用简写属性来获取params ,如下所示:

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

您通过读/设置参数set(KEY, VALUE),append(KEY, VALUE),for (let p of params) {}API.您还可以迭代所有值location.

一个参考实现和示例页面都可以审核和测试.


你实际上不需要在`.search`上`slice(1)`,你可以直接使用它.URLSearchParams可以处理领先的`?`.

6> AlfaTeK..:

只是另一个建议.插件Purl允许检索URL的所有部分,包括锚点,主机等.

它可以与jQuery一起使用或不与jQuery一起使用.

用法很简单,很酷:

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

然而,随着2014年11月11日的,金银丝不再维护,笔者建议使用URI.js代替.jQuery插件的不同之处在于它专注于元素 - 用于字符串,只需URI直接使用,有或没有jQuery.类似的代码将看起来像这样的,更全面的文档在这里:

var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'


在撰写时,不再维护purl,之前的维护者建议[uri.js](https://github.com/medialize/URI.js)

7> Qwerty..:
TL;博士

一个快速,完整的解决方案,可处理多值密钥编码字符.

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})

//using ES6   (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})
多行:
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
    var s = item.split("="),
        k = s[0],
        v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit
    //(k in qd) ? qd[k].push(v) : qd[k] = [v]
    (qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})

什么是所有这些代码......
"null-coalescing",短路评估
ES6解构赋值,箭头函数,模板字符串

例:
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> qd.a[1]    // "5"
> qd["a"][1] // "5"



阅读更多...关于Vanilla JavaScript解决方案.

访问URL的不同部分使用 location.(search|hash)

最简单的(虚拟)解决方案

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

正确处理空键.

覆盖多键去年发现的价值.

"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

多值键

简单的按键检查 (item in dict) ? dict.item.push(val) : dict.item = [val]

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})

现在返回数组.

通过qd.key[index]或访问值qd[key][index]

> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

编码字符?

使用decodeURIComponent()第二个或两个分裂.

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})
例:
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"]  // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]



来自评论

*!请注意,decodeURIComponent(undefined)返回字符串"undefined".解决方案在于简单的使用&&,确保decodeURIComponent()不会在未定义的值上调用.(参见顶部的"完整解决方案".)

v = v && decodeURIComponent(v);


如果查询字符串为空(location.search == ""),结果有点误导qd == {"": undefined}.建议在启动解析函数之前检查查询字符串:

if (location.search) location.search.substr(1).split("&").forEach(...)


@PavelNikolov我认为这会引入困难,有时候会得到一个数组,有时甚至是一个值.您必须首先检查它,现在您只检查长度,因为您将使用循环来检索这些值.此外,这也是最简单但功能最强大的解决方案.

8> brandonjp..:

snipplr.com上的Roshambo有​​一个简单的脚本来实现在使用jQuery获取URL参数中描述的内容 改进了.使用他的脚本,您也可以轻松获得所需的参数.

这是要点:

$.urlParam = function(name, url) {
    if (!url) {
     url = window.location.href;
    }
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
    if (!results) { 
        return undefined;
    }
    return results[1] || undefined;
}

然后从查询字符串中获取参数.

所以,如果URL /查询字符串是xyz.com/index.html?lang=de.

只要打电话var langval = $.urlParam('lang');,你就明白了.

UZBEKJON也有一篇很棒的博客文章,用jQuery获取URL参数和值.


*使用jQuery*似乎意味着将函数命名为jQuery对象.另外,为什么无效值为"0"?当然,我可以使用严格的相等检查,但它不应该是'null`?

9> alex..:

如果您使用的是jQuery,则可以使用库,例如jQuery BBQ:Back Button&Query Library.

... jQuery BBQ提供了一个完整的.deparam()方法,以及散列状态管理和片段/查询字符串解析和合并实用程序方法.

编辑:添加Deparam示例:

 var DeparamExample = function() {
            var params = $.deparam.querystring();

            //nameofparam is the name of a param from url
            //code below will get param if ajax refresh with hash
            if (typeof params.nameofparam == 'undefined') {
                params = jQuery.deparam.fragment(window.location.href);
            }
            
            if (typeof params.nameofparam != 'undefined') {
                var paramValue = params.nameofparam.toString();
                  
            }
        };


10> Martin Borth..:

只需使用两个分割:

function get(n) {
    var half = location.search.split(n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

我正在阅读所有以前和更完整的答案.但我认为这是最简单,更快捷的方法.您可以签入此jsPerf 基准

要解决Rup评论中的问题,请通过将第一行更改为下面的两行来添加条件拆分.但绝对准确性意味着它现在比regexp慢(参见jsPerf).

function get(n) {
    var half = location.search.split('&' + n + '=')[1];
    if (!half) half = location.search.split('?' + n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

因此,如果你知道你不会遇到Rup的反案,那就赢了.否则,regexp.

或者,如果您可以控制查询字符串并且可以保证您尝试获取的值永远不会包含任何URL编码字符(将这些字符包含在一个值中是个坏主意) - 您可以使用以下稍微更简化和可读的版本第一个选项:

    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;


井井有条!如果你有一个以你想要的键名结尾的早期值,它将无法工作,例如``http:// the-url?oldvalue = 1&value = 2`的`get('value')`.
但是,如果您知道参数名称是期望的,那么这将是更快的方法.

11> 小智..:

这是我将Andy E的优秀解决方案变成一个完整的jQuery插件的尝试:

;(function ($) {
    $.extend({      
        getQueryString: function (name) {           
            function parseParams() {
                var params = {},
                    e,
                    a = /\+/g,  // Regex for replacing addition symbol with a space
                    r = /([^&=]+)=?([^&]*)/g,
                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
                    q = window.location.search.substring(1);

                while (e = r.exec(q))
                    params[d(e[1])] = d(e[2]);

                return params;
            }

            if (!this.queryStringParams)
                this.queryStringParams = parseParams(); 

            return this.queryStringParams[name];
        }
    });
})(jQuery);

语法是:

var someVar = $.getQueryString('myParam');

两全其美!



12> rodneyrehm..:

如果您正在进行更多的URL操作而不是简单地解析查询字符串,您可能会发现URI.js很有帮助.它是一个用于操纵URL的库 - 并附带所有的铃声和​​口哨声.(对不起,这里有自我宣传)

将您的查询字符串转换为地图:

var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
  "foo": ["bar", "world"],
  "bar": "baz"
}

(URI.js也"修复"坏查询字符串喜欢?&foo&&bar=baz&?foo&bar=baz)



13> Anatoly Miro..:

我喜欢Ryan Phelan的解决方案.但我没有看到任何扩展jQuery的意义吗?没有使用jQuery功能.

另一方面,我喜欢谷歌浏览器中的内置功能:window.location.getParameter.

那么为什么不使用这个呢?好的,其他浏览器没有.所以,如果它不存在,让我们创建这个函数:

if (!window.location.getParameter ) {
  window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&=]+)=?([^&]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
  };
}

这个函数或多或少来自Ryan Phelan,但它的包装方式不同:清晰的名称和其他javascript库没有依赖关系.更多关于我的博客上的这个功能.


看起来已经从Chrome中删除了window.location.getParameter().

14> Paul..:

这是获取类似于PHP $ _GET数组的对象的快速方法:

function get_query(){
    var url = location.search;
    var qs = url.substring(url.indexOf('?') + 1).split('&');
    for(var i = 0, result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][1]);
    }
    return result;
}

用法:

var $_GET = get_query();

对于查询字符串,x=5&y&z=hello&x=6它返回对象:

{
  x: "6",
  y: undefined,
  z: "hello"
}



15> Sagiv Ofek..:

在简单的JavaScript代码中保持简单:

function qs(key) {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars[key];
}

从JavaScript代码中的任何位置调用它:

var result = qs('someKey');



16> Bernesto..:

这些都是很好的答案,但我需要一些更强大的东西,并认为你们都希望拥有我创造的东西.

这是一个简单的库方法,可以解析和操作URL参数.静态方法具有以下可在主题URL上调用的子方法:

和getHost

的getPath

getHash

setHash

getParams

getQuery

setParam

getParam

hasParam

removeParam

例:

URLParser(url).getParam('myparam1')

var url = "http://www.test.com/folder/mypage.html?myparam1=1&myparam2=2#something";

function URLParser(u){
    var path="",query="",hash="",params;
    if(u.indexOf("#") > 0){
        hash = u.substr(u.indexOf("#") + 1);
        u = u.substr(0 , u.indexOf("#"));
    }
    if(u.indexOf("?") > 0){
        path = u.substr(0 , u.indexOf("?"));
        query = u.substr(u.indexOf("?") + 1);
        params= query.split('&');
    }else
        path = u;
    return {
        getHost: function(){
            var hostexp = /\/\/([\w.-]*)/;
            var match = hostexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getPath: function(){
            var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/;
            var match = pathexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getHash: function(){
            return hash;
        },
        getParams: function(){
            return params
        },
        getQuery: function(){
            return query;
        },
        setHash: function(value){
            if(query.length > 0)
                query = "?" + query;
            if(value.length > 0)
                query = query + "#" + value;
            return path + query;
        },
        setParam: function(name, value){
            if(!params){
                params= new Array();
            }
            params.push(name + '=' + value);
            for (var i = 0; i < params.length; i++) {
                if(query.length > 0)
                    query += "&";
                query += params[i];
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
        getParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return decodeURIComponent(pair[1]);
                }
            }
            console.log('Query variable %s not found', name);
        },
        hasParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return true;
                }
            }
            console.log('Query variable %s not found', name);
        },
        removeParam: function(name){
            query = "";
            if(params){
                var newparams = new Array();
                for (var i = 0;i < params.length;i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) != name)
                          newparams .push(params[i]);
                }
                params = newparams;
                for (var i = 0; i < params.length; i++) {
                    if(query.length > 0)
                        query += "&";
                    query += params[i];
                }
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
    }
}


document.write("Host: " + URLParser(url).getHost() + '
'); document.write("Path: " + URLParser(url).getPath() + '
'); document.write("Query: " + URLParser(url).getQuery() + '
'); document.write("Hash: " + URLParser(url).getHash() + '
'); document.write("Params Array: " + URLParser(url).getParams() + '
'); document.write("Param: " + URLParser(url).getParam('myparam1') + '
'); document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '
'); document.write(url + '
'); // Remove the first parameter url = URLParser(url).removeParam('myparam1'); document.write(url + ' - Remove the first parameter
'); // Add a third parameter url = URLParser(url).setParam('myparam3',3); document.write(url + ' - Add a third parameter
'); // Remove the second parameter url = URLParser(url).removeParam('myparam2'); document.write(url + ' - Remove the second parameter
'); // Add a hash url = URLParser(url).setHash('newhash'); document.write(url + ' - Set Hash
'); // Remove the last parameter url = URLParser(url).removeParam('myparam3'); document.write(url + ' - Remove the last parameter
'); // Remove a parameter that doesn't exist url = URLParser(url).removeParam('myparam3'); document.write(url + ' - Remove a parameter that doesn\"t exist
');



17> orip..:

来自MDN:

function loadPageVar (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(loadPageVar("name"));



18> 小智..:

代码高尔夫:

var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a) {
    var s = a[i].split("=");
    a[i]  = a[unescape(s[0])] = unescape(s[1]);
}

显示它!

for (i in a) {
    document.write(i + ":" + a[i] + "
"); };

在我的Mac上:test.htm?i=can&has=cheezburger显示

0:can
1:cheezburger
i:can
has:cheezburger


我喜欢你的答案,特别是脚本的紧凑程度,但你可能应该使用decodeURIComponent.请参阅http://xkr.us/articles/javascript/encode-compare/和http://stackoverflow.com/questions/619323/decodeuricomponent-vs-unescape-what-is-wrong-with-unescape

19> Mic..:

我经常使用正则表达式,但不是那样.

在我的应用程序中读取一次查询字符串似乎更容易也更有效,并从所有键/值对构建对象,如:

var search = function() {
  var s = window.location.search.substr(1),
    p = s.split(/\&/), l = p.length, kv, r = {};
  if (l === 0) {return false;}
  while (l--) {
    kv = p[l].split(/\=/);
    r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
  }
  return r;
}();

对于URL像http://domain.com?param1=val1¶m2=val2你之后能得到它们的价值在你的代码search.param1search.param2.



20> 小智..:
function GET() {
        var data = [];
        for(x = 0; x < arguments.length; ++x)
            data.push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])
                return data;
    }


example:
data = GET("id","name","foo");
query string : ?id=3&name=jet&foo=b
returns:
    data[0] // 3
    data[1] // jet
    data[2] // b
or
    alert(GET("id")[0]) // return 3


这是一种有趣的方法,返回包含指定参数值的数组.它至少有一个问题 - 没有正确的URL解码值,它也需要对匹配中使用的参数名称进行URL编码.它将以其当前形式在简单查询字符串上运行.*ps*在*for*语句中声明变量时不要忘记使用var关键字.

21> Mohammad Ari..:

Roshambo jQuery方法没有处理解码URL

http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/

只需在return语句中添加该功能

return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;

现在你可以找到更新的要点:

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



22> skaurus..:

这是我对这个优秀答案的编辑- 增加了使用没有值的键解析查询字符串的能力.

var url = 'http://sb.com/reg/step1?param';
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[1]) p[1] = decodeURIComponent(p[1].replace(/\+/g, " "));
        b[p[0]] = p[1];
    }
    return b;
})((url.split('?'))[1].split('&'));

重要!最后一行中该函数的参数不同.这只是一个如何将任意URL传递给它的示例.您可以使用Bruno的答案的最后一行来解析当前的URL.

究竟是什么改变了?使用网址http://sb.com/reg/step1?param=结果将是相同的.但是使用url http://sb.com/reg/step1?paramBruno的解决方案返回一个没有键的对象,而我的返回一个带有键paramundefined值的对象.



23> Tomamais..:

我喜欢这个(取自jquery-howto.blogspot.co.uk):

// get an array with all querystring values
// example: var valor = getUrlVars()["valor"];
function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

对我来说很棒.



24> tim..:

我需要查询字符串中的一个对象,我讨厌很多代码.它可能不是宇宙中最强大的,但它只是几行代码.

var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
    q[i.split('=')[0]]=i.split('=')[1];
});

像这样的网址this.htm?hello=world&foo=bar会创建:

{hello:'world', foo:'bar'}


整齐.但根据Mozilla的说法,[forEach](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach)在IE7或8上不起作用,我怀疑是'如果根本没有查询字符串,则会失败.覆盖更多案例的最小改进将是[`decodeURIComponent`](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/decodeURIComponent)存储它时的值 - 并且可以说是也是关键,但你不太可能使用奇数字符串.
我会使用`location.search.substr(1)`而不是`location.href.split('?')[1]`来避免拾取哈希(`#anchor`)和最后一个查询参数.

25> Campbeln..:

这是Andy E的链接"Handle array-style query strings"-version的扩展版本.修复了一个错误(?key=1&key[]=2&key[]=3; 1丢失并替换为[2,3]),进行了一些小的性能改进(重新解码值,重新计算"["位置等)并添加了许多改进(功能化,支持?key=1&key=2,支持;分隔符) .我把这些变量简单地留了下来,但是添加了很多评论以使它们具有可读性(哦,我v在本地函数中重复使用,抱歉,如果这令人困惑的话).

它将处理以下查询字符串...

?测试=您好与人= NEEK与人[] =杰夫 - 人[] =吉姆人[详细] =约翰&TEST3和非缓存= 1398914891264

......把它变成一个看似......的物体

{
    "test": "Hello",
    "person": {
        "0": "neek",
        "1": "jeff",
        "2": "jim",
        "length": 3,
        "extra": "john"
    },
    "test3": "",
    "nocache": "1398914891264"
}

正如您在上面所看到的,此版本处理一些"格式错误"的数组,即 - person=neek&person[]=jeff&person[]=jim或者person=neek&person=jeff&person=jim因为密钥是可识别且有效的(至少在dotNet的NameValueCollection.Add中):

如果指定的键已存在于目标NameValueCollection实例中,则指定的值将以"value1,value2,value3"形式添加到现有的以逗号分隔的值列表中.

由于没有规范,陪审团似乎有点出于重复的关键.在这种情况下,多个密钥存储为(假)数组.但请注意,我不会将基于逗号的值处理为数组.

代码:

getQueryStringKey = function(key) {
    return getQueryStringAsObject()[key];
};


getQueryStringAsObject = function() {
    var b, cv, e, k, ma, sk, v, r = {},
        d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue)
        q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)),
        s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter:   /([^&=]+)=?([^&]*)/g
    ;

    //# ma(make array) out of the v(alue)
    ma = function(v) {
        //# If the passed v(alue) hasn't been setup as an object
        if (typeof v != "object") {
            //# Grab the cv(current value) then setup the v(alue) as an object
            cv = v;
            v = {};
            v.length = 0;

            //# If there was a cv(current value), .push it into the new v(alue)'s array
            //#     NOTE: This may or may not be 100% logical to do... but it's better than loosing the original value
            if (cv) { Array.prototype.push.call(v, cv); }
        }
        return v;
    };

    //# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)...
    while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) {
        //# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry) 
        b = e[1].indexOf("[");
        v = d(e[2]);

        //# As long as this is NOT a hash[]-style key-value e(ntry)
        if (b < 0) { //# b == "-1"
            //# d(ecode) the simple k(ey)
            k = d(e[1]);

            //# If the k(ey) already exists
            if (r[k]) {
                //# ma(make array) out of the k(ey) then .push the v(alue) into the k(ey)'s array in the r(eturn value)
                r[k] = ma(r[k]);
                Array.prototype.push.call(r[k], v);
            }
            //# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value)
            else {
                r[k] = v;
            }
        }
        //# Else we've got ourselves a hash[]-style key-value e(ntry) 
        else {
            //# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locations
            k = d(e[1].slice(0, b));
            sk = d(e[1].slice(b + 1, e[1].indexOf("]", b)));

            //# ma(make array) out of the k(ey) 
            r[k] = ma(r[k]);

            //# If we have a sk(sub-key), plug the v(alue) into it
            if (sk) { r[k][sk] = v; }
            //# Else .push the v(alue) into the k(ey)'s array
            else { Array.prototype.push.call(r[k], v); }
        }
    }

    //# Return the r(eturn value)
    return r;
};



26> 小智..:

这是我前段时间创建的一个功能,我很满意.它不区分大小写 - 这很方便.此外,如果请求的QS不存在,它只返回一个空字符串.

我使用的压缩版本.我为新手类型发布了未压缩的帖子,以便更好地解释发生了什么.

我确信这可以进行优化或以不同的方式完成更快的工作,但它始终能够满足我的需求.

请享用.

function getQSP(sName, sURL) {
    var theItmToRtn = "";
    var theSrchStrg = location.search;
    if (sURL) theSrchStrg = sURL;
    var sOrig = theSrchStrg;
    theSrchStrg = theSrchStrg.toUpperCase();
    sName = sName.toUpperCase();
    theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
    var theSrchToken = "&" + sName + "=";
    if (theSrchStrg.indexOf(theSrchToken) != -1) {
        var theSrchTokenLth = theSrchToken.length;
        var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
        var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
        theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
    }
    return unescape(theItmToRtn);
}



27> Ph0en1x..:

关于该问题的最佳答案的问题是它是在#之后放置的不支持的参数,但有时也需要获得该值.

我修改了答案,让它解析带有井号的完整查询字符串:

var getQueryStringData = function(name) {
    var result = null;
    var regexS = "[\\?&#]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec('?' + window.location.href.split('?')[1]);
    if (results != null) {
        result = decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    return result;
};


是的我知道.但在我的应用程序中我集成了第三方js导航,它在哈希标志后有一些参数.

28> Mat Ryer..:

我们刚刚发布了一个旨在一劳永逸地解决这个问题的项目arg.js.它传统上是如此困难,但现在你可以这样做:

var name = Arg.get("name");

或获得全部:

var params = Arg.all();

如果你关心它们之间的区别?query=true,#hash=true那么你可以使用Arg.query()Arg.hash()方法.



29> gewel..:
function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');

    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}?

这就是假设URL是这样你可以使用这个函数的方法

http://dummy.com/?stringtext=jquery&stringword=jquerybyexample

var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');



30> nkh..:

如果您使用的是Browserify,则可以使用Node.js中url模块:

var url = require('url');

url.parse('http://example.com/?bob=123', true).query;

// returns { "bob": "123" }

进一步阅读:URL Node.js v0.12.2手册和文档

编辑:您可以使用URL界面,它几乎在所有新浏览器中广泛采用,如果代码将在旧浏览器上运行,您可以使用像这样的polyfill.这是一个关于如何使用URL接口获取查询参数(也称为搜索参数)的代码示例

const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob'); 

您也可以使用URLSearchParams,这是MDN使用URLSearchParams执行此操作的示例:

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"



31> vol7ron..:
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash

常规键/值对(?param=value)

?param没有值的键(:没有等号或值)

键值为空值(?param=:等号,但等号右边没有值)

重复键(?param=1¶m=2)

删除空键(?&&:无键或值)

码:

var queryString = window.location.search || '';
var keyValPairs = [];
var params      = {};
queryString     = queryString.substr(1);

if (queryString.length)
{
   keyValPairs = queryString.split('&');
   for (pairNum in keyValPairs)
   {
      var key = keyValPairs[pairNum].split('=')[0];
      if (!key.length) continue;
      if (typeof params[key] === 'undefined')
         params[key] = [];
      params[key].push(keyValPairs[pairNum].split('=')[1]);
   }
}

怎么称呼:

params['key'];  // returns an array of values (1..n)

输出:

key            ["value"]
keyemptyvalue  [""]
keynovalue     [undefined, "nowhasvalue"]



32> Anoop..:

单行获取查询:

var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];


如果密钥不存在则触发错误,尝试这可能吗?`(location.search.match(new RegExp('kiosk_modeasdf'+"=(.*?)($ | \&)","i"))|| [])[1]`

33> Nijikokun..:

我使用这里列出的技术开发了一个小型库,为任何人的问题创建一个易于使用的插入式解决方案; 在这里能找到它:

https://github.com/Nijikokun/query-js

用法

获取特定参数/键:

query.get('param');

使用构建器获取整个对象:

var storage = query.build();
console.log(storage.param);

还有更多...查看github链接了解更多示例.

特征

    缓存解码和参数

    支持哈希查询字符串 #hello?page=3

    支持传递自定义查询

    支持数组/对象参数 user[]="jim"&user[]="bob"

    支持空管理 &&

    支持没有值的声明参数 name&hello="world"

    支持重复参数 param=1¶m=2

    清洁,紧凑和可读的来源 4kb

    AMD,要求,节点支持



34> Roi..:

一个非常轻量级的jQuery方法:

var qs = window.location.search.replace('?','').split('&'),
    request = {};
$.each(qs, function(i,v) {
    var initial, pair = v.split('=');
    if(initial = request[pair[0]]){
        if(!$.isArray(initial)) {
            request[pair[0]] = [initial]
        }
        request[pair[0]].push(pair[1]);
    } else {
        request[pair[0]] = pair[1];
    }
    return;
});
console.log(request);

并提醒,例如?q

alert(request.q)


整齐.已经有一些答案已经相同 - 迭代分裂 - 虽然没有使用jQuery的每一个,我不认为它们中的任何一个都是完美的.我不明白你的闭包中的`return`,我认为你读取它们时需要`decodeUriComponent`两个`pair []`值.

35> Vadim..:

这是我在GitHub上查询字符串解析代码的版本.

它使用jquery.*"前缀",但解析函数本身不使用jQuery.它非常快,但仍然可以进行一些简单的性能优化.

它还支持URL中的列表和哈希表编码,例如:

arr[]=10&arr[]=20&arr[]=100

要么

hash[key1]=hello&hash[key2]=moto&a=How%20are%20you

jQuery.toQueryParams = function(str, separator) {
    separator = separator || '&'
    var obj = {}
    if (str.length == 0)
        return obj
    var c = str.substr(0,1)
    var s = c=='?' || c=='#'  ? str.substr(1) : str; 

    var a = s.split(separator)
    for (var i=0; i



36> Eneko Alonso..:

我宁愿使用split()Regex来代替此操作:

function getUrlParams() {
    var result = {};
    var params = (window.location.search.split('?')[1] || '').split('&');
    for(var param in params) {
        if (params.hasOwnProperty(param)) {
            var paramParts = params[param].split('=');
            result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");
        }
    }
    return result;
}



37> IT ppl..:

这个工作正常

function getQuerystring(key) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == key) {
            return pair[1];
        }
    }
}

取自这里


您可能至少想要在返回之前调用``[[[[[[[[[[[[[(((((((((((((((((((((((((((((((((((首先是空格,就像这里所有其他解决方案一样.其他一些解决方案也更喜欢在分裂`=`上限制2个部分,以便在接受输入时更宽松.

38> Vladimir Kor..:

这是我正在使用的:

/**
 * Examples:
 * getUrlParams()['myparam']    // url defaults to the current page
 * getUrlParams(url)['myparam'] // url can be just a query string
 *
 * Results of calling `getUrlParams(url)['myparam']` with various urls:
 * example.com                               (undefined)
 * example.com?                              (undefined)
 * example.com?myparam                       (empty string)
 * example.com?myparam=                      (empty string)
 * example.com?myparam=0                     (the string '0')
 * example.com?myparam=0&myparam=override    (the string 'override')
 *
 * Origin: http://stackoverflow.com/a/23946023/2407309
 */
function getUrlParams (url) {
    var urlParams = {} // return value
    var queryString = getQueryString()
    if (queryString) {
        var keyValuePairs = queryString.split('&')
        for (var i = 0; i < keyValuePairs.length; i++) {
            var keyValuePair = keyValuePairs[i].split('=')
            var paramName = keyValuePair[0]
            var paramValue = keyValuePair[1] || ''
            urlParams[paramName] = decodeURIComponent(paramValue.replace(/\+/g, ' '))
        }
    }
    return urlParams // functions below
    function getQueryString () {
        var reducedUrl = url || window.location.search
        reducedUrl = reducedUrl.split('#')[0] // Discard fragment identifier.
        var queryString = reducedUrl.split('?')[1]
        if (!queryString) {
            if (reducedUrl.search('=') !== false) { // URL is a query string.
                queryString = reducedUrl
            }
        }
        return queryString
    } // getQueryString
} // getUrlParams

在最后一种情况下返回'覆盖'而不是'0'使其与PHP一致.适用于IE7.


"令人惊讶的是,这里发布了多少过于复杂和不完整的解决方案"大笑,具有讽刺意味......
为什么不?[HTML 5](http://www.w3.org/TR/html5/forms.html#naming-form-controls:-the-name-attribute)不限制输入控件名称的字符集,也不限制无论如何,它们都保证它们来自HTML.我不明白为什么对可打印字符会有限制.

39> cocco..:

获取所有查询字符串参数,包括复选框值(数组).

考虑到GET参数的正确和正常使用,我在大多数函数中看到它缺少的是对数组的支持和删除哈希数据.

所以我写了这个函数:

function qs(a){
 if(!a)return {};
 a=a.split('#')[0].split('&');
 var b=a.length,c={},d,k,v;
 while(b--){
  d=a[b].split('=');
  k=d[0].replace('[]',''),v=decodeURIComponent(d[1]||'');
  c[k]?typeof c[k]==='string'?(c[k]=[v,c[k]]):(c[k].unshift(v)):c[k]=v;
 }
 return c
}

使用速记运算符和while循环,性能应该非常好.

支持:

    空值(键= /键)

    键值(键=值)

    数组(key [] = value)

    散列(散列标记被拆分)

笔记:

它不支持对象数组(key [key] = value)

如果空间是+,它仍然是+.

.replace(/\+/g, " ")如果需要,请添加.

用法:

qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')

返回:

{
    "empty": "",
    "key": "value",
    "array": [
        "1",
        "2"
    ]
}

演示:

http://jsfiddle.net/ZQMrt/1/

信息

如果您不理解某些内容或者您无法阅读该功能,请询问.我很高兴解释我在这里做了什么.

如果您认为该函数不可读且不可维护,我很乐意为您重写该函数,但请考虑速记和按位运算符总是比标准语法更快(可能会阅读ECMA-262书籍中的shorthands和bitwise运算符或使用你最喜欢的搜索引擎).以标准可读语法重写代码意味着性能损失.



40> George..:

对于那些想要一个简短方法(有限制)的人:

location.search.split('myParameter=')[1]


这对于一般情况来说还不够:它假定1)你只对单个参数感兴趣2)它保证是该行中的最后一个参数(即你可以保证所有浏览器都将它放在最后,或者它是页面上唯一的参数,并且您不会将URL放在RSS feed聚合器中,它可能会添加utm参数)和3)值中没有可以转义的字符进行传输,例如空格或许多符号.
所有方法都没有1种尺寸.如果你在一个短线程中有一个完美的解决方案,我会全神贯注地检查出来.以上是一个快速解决方案,不是一般情况,而是对于希望轻量级和快速解决静态实现的编码人员.无论如何,感谢您的评论.
(location.search.split('myParameter =')[1]).split('&')[0]; 如果有多个参数,这会给你相同的结果.仅对静态实现有用.

41> alkos333..:
function getUrlVar(key){
    var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); 
    return result && unescape(result[1]) || ""; 
}

https://gist.github.com/1771618



42> Anoop..:

以下代码将创建一个具有两个方法的对象:

    isKeyExist:检查是否存在特定参数

    getValue:获取特定参数的值.

 

var QSParam = new function() {
       var qsParm = {};
       var query = window.location.search.substring(1);
       var params = query.split('&');
       for (var i = 0; i < params.length; i++) {
           var pos = params[i].indexOf('=');
           if (pos > 0) {
               var key = params[i].substring(0, pos);
               var val = params[i].substring(pos + 1);
               qsParm[key] = val;
           }
       }
       this.isKeyExist = function(query){
           if(qsParm[query]){
               return true;
           }
           else{
              return false;
           }
       };
       this.getValue = function(query){
           if(qsParm[query])
           {
               return qsParm[query];
           }
           throw "URL does not contain query "+ query;
       }
};



43> 小智..:

试试这个:

String.prototype.getValueByKey = function(k){
    var p = new RegExp('\\b'+k+'\\b','gi');
    return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p)+k.length+1).substr(0,this.substr(this.search(p)+k.length+1).search(/(&|;|$)/))) : "";
};

然后像这样调用它:

if(location.search != "") location.search.getValueByKey("id");

您也可以将此用于cookie:

if(navigator.cookieEnabled) document.cookie.getValueByKey("username");

这仅适用于具有key=value[&|;|$]...的字符串不适用于对象/数组.

如果你希望使用String.prototype ...它移动到一个函数并传递字符串作为参数



44> Albireo..:

此函数将查询字符串转换为类似JSON的对象,它还处理无值和多值参数:

"use strict";
function getQuerystringData(name) {
    var data = { };
    var parameters = window.location.search.substring(1).split("&");
    for (var i = 0, j = parameters.length; i < j; i++) {
        var parameter = parameters[i].split("=");
        var parameterName = decodeURIComponent(parameter[0]);
        var parameterValue = typeof parameter[1] === "undefined" ? parameter[1] : decodeURIComponent(parameter[1]);
        var dataType = typeof data[parameterName];
        if (dataType === "undefined") {
            data[parameterName] = parameterValue;
        } else if (dataType === "array") {
            data[parameterName].push(parameterValue);
        } else {
            data[parameterName] = [data[parameterName]];
            data[parameterName].push(parameterValue);
        }
    }
    return typeof name === "string" ? data[name] : data;
}

我们对undefinedon 执行检查,parameter[1]因为decodeURIComponent如果变量是undefined,则返回字符串"undefined" ,这是错误的.

用法:

"use strict";
var data = getQuerystringData();
var parameterValue = getQuerystringData("parameterName");



45> 小智..:

我使用此代码(JavaScript)来获取通过URL传递的内容:

function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                vars[key] = value;
            });
            return vars;
        }

然后,要将值分配给变量,您只需指定要获取的参数,即URL是否 example.com/?I=1&p=2&f=3

您可以这样做以获取值:

var getI = getUrlVars()["I"];
var getP = getUrlVars()["p"];
var getF = getUrlVars()["f"];

然后价值将是:

getI = 1, getP = 2 and getF = 3



46> BMitch..:

这是我对此的看法.第一个函数将URL字符串解码为名称/值对的对象:

url_args_decode = function (url) {
  var args_enc, el, i, nameval, ret;
  ret = {};
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  // strip off initial ? on search and split
  args_enc = el.search.substring(1).split('&');
  for (i = 0; i < args_enc.length; i++) {
    // convert + into space, split on =, and then decode 
    args_enc[i].replace(/\+/g, ' ');
    nameval = args_enc[i].split('=', 2);
    ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);
  }
  return ret;
};

另外,如果你更改了一些args,你可以使用第二个函数将args数组放回到URL字符串中:

url_args_replace = function (url, args) {
  var args_enc, el, name;
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  args_enc = [];
  // encode args to go into url
  for (name in args) {
    if (args.hasOwnProperty(name)) {
      name = encodeURIComponent(name);
      args[name] = encodeURIComponent(args[name]);
      args_enc.push(name + '=' + args[name]);
    }
  }
  if (args_enc.length > 0) {
    el.search = '?' + args_enc.join('&');
  } else {
    el.search = '';
  }
  return el.href;
};


@greg在浏览器引擎中创建元素,它将为您解析一个URL并提供搜索和href方法以与url字符串进行交互.

47> Imdad..:

以下函数返回queryString的对象版本.您只需编写obj.key1obj.key2访问参数的值key1key2.

function getQueryStringObject()
{
    var querystring = document.location.search.replace('?','').split( '&' );
    var objQueryString={};
    var key="",val="";
    if(typeof querystring == 'undefined')
    {
        return (typeof querystring);
    }
    for(i=0;i

要使用此功能,您可以编写

var obj= getQueryStringObject();
alert(obj.key1);



48> 小智..:

我在这里为我的需求做了一个小的URL库:https://github.com/Mikhus/jsurl

这是在JavaScript中操纵URL的更常见方式.同时它非常轻量级(缩小和gzip <1 KB)并且具有非常简单和干净的API.并且它不需要任何其他库来工作.

关于最初的问题,这很简单:

var u = new Url; // Current document URL
// or
var u = new Url('http://user:pass@example.com:8080/some/path?foo=bar&bar=baz#anchor');

// Looking for query string parameters
alert( u.query.bar);
alert( u.query.foo);

// Modifying query string parameters
u.query.foo = 'bla';
u.query.woo = ['hi', 'hey']

alert(u.query.foo);
alert(u.query.woo);
alert(u);

推荐阅读
路人甲
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有