以json形式从window.location中的搜索对象中提取所有url参数

export const getURLParams = location => {
    const searchParams = new URLSearchParams(location.search)
    const params = {}

    for (let key of searchParams.keys()) {
        params[key] = searchParams.get(key)
    }

    return params
}

console.log(getURLParams({ search: '?query=someting&anotherquery=anotherthing' }))

// --> {query: "someting", anotherquery: "anotherthing"}

我们可以以更简单的方式获取c参数值，而不必循环所有参数，请参见下面的jQuery获取参数。

1.获取参数值：

var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";

url.match(**/(c=)[0-9A-Za-z-]+/ig**)[0].replace('c=',"")

(or)

url.match(**/(c=)[0-z-]+/ig**)[0].replace('c=',"")

以字符串形式返回

“m2-m3-m4-m5”

2.要替换参数值：

var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";

url.replace(**/(c=)[0-9A-Za-z-]+/ig, "c=m2345"**)

我需要读取一个URLGET变量，并根据URL参数完成一个操作。我到处寻找解决方案，结果发现了一小段代码。它基本上读取当前页面url，对url执行一些正则表达式，然后将url参数保存在关联数组中，我们可以轻松访问该数组。

作为一个例子，如果我们有下面的url，底部有javascript。

http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July

获取参数id和page所需要做的就是调用这个：

准则将是：

<script type="text/javascript">
var first = getUrlVars()["year"];
var second = getUrlVars()["Month"];

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

Eldon McGuinness的Gist是迄今为止我见过的JavaScript查询字符串解析器的最完整的实现。

不幸的是，它是作为jQuery插件编写的。

我将其重写为vanilla JS，并做了一些改进：

函数parseQuery（str）{var qso=｛｝；var qs=（str|| document.location.search）；//检查是否有空的查询字符串如果（qs==“”）{回归qso；}//规范化查询字符串qs=qs.replace（/（^\？）/，“”）.replace（/；/g，“&”）；而（qs.indexOf（“&&”）！=-1) {qs=qs.替换（/&&/g，'&'）；}qs=qs.replace（/（[\&]+$）/，“”）；//将查询字符串拆分为多个部分qs=qs.拆分（“&”）；//生成querystring对象对于（变量i=0；i<qs.length；i++）{var qi=qs[i].split（“=”）；qi=qi.map（函数（n）{返回decodeURIComponent（n）});if（类型qi[1]==“未定义”）{qi[1]=空；}if（qso[qi[0]的类型！==“未定义”）{//如果键已经存在，则将其设置为对象if（typeof（qso[qi[0]）==“string”）{var temp=qso[qi[0]]；如果（qi[1]==“”）{qi[1]=空；}qso[qi[0]]=[]；qso[qi[0]].推（温度）；qso[qi[0]。push（qi[1]）；}否则如果（typeof（qso[qi[0]）==“对象”）{如果（qi[1]==“”）{qi[1]=空；}qso[qi[0]。push（qi[1]）；}}其他{//如果没有键，只需将其设置为字符串如果（qi[1]==“”）{qi[1]=空；}qso[qi[0]]=qi[1]；}}回归qso；}//演示console.log（parseQuery（“？foo=bar&foo=boo&roo=bar；bee=bop；=ghost；=ghost2；&；checkbox%5B%5D=b1；checkbox%5 B%5D=b2；dd=；http=http%3A%2F%2Fw3schools.com%2My%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%2A%2F%3F%2Fw3schools2.com%2Fmy%20est.asp%3Fame%3Dst%A5%A5le%26car%3Dsaab”）；

另请参见此Fiddle。

还有一个建议。

已经有一些很好的答案，但我发现它们不必要地复杂，难以理解。这是一个简短、简单的数组，它返回一个简单的关联数组，其中键名与URL中的令牌名相对应。

我为那些想学习的人添加了一个带有评论的版本。

注意，它的循环依赖于jQuery（$.each），我建议使用jQuery而不是forEach。我发现，全面使用jQuery来确保跨浏览器兼容性比插入单独的补丁来支持旧浏览器不支持的新功能更简单。

编辑：在我写了这篇文章后，我注意到埃里克·埃利奥特的回答几乎相同，尽管它使用了forEach，而我通常反对（出于上述原因）。

function getTokens(){
    var tokens = [];
    var query = location.search;
    query = query.slice(1);
    query = query.split('&');
    $.each(query, function(i,value){    
        var token = value.split('=');   
        var key = decodeURIComponent(token[0]);     
        var data = decodeURIComponent(token[1]);
        tokens[key] = data;
    });
    return tokens;
}

注释版本：

function getTokens(){
    var tokens = [];            // new array to hold result
    var query = location.search; // everything from the '?' onward 
    query = query.slice(1);     // remove the first character, which will be the '?' 
    query = query.split('&');   // split via each '&', leaving us an array of something=something strings

    // iterate through each something=something string
    $.each(query, function(i,value){    

        // split the something=something string via '=', creating an array containing the token name and data
        var token = value.split('=');   

        // assign the first array element (the token name) to the 'key' variable
        var key = decodeURIComponent(token[0]);     

        // assign the second array element (the token data) to the 'data' variable
        var data = decodeURIComponent(token[1]);

        tokens[key] = data;     // add an associative key/data pair to our result array, with key names being the URI token names
    });

    return tokens;  // return the array
}

对于下面的示例，我们将假设此地址：

http://www.example.com/page.htm?id=4&name=murray

您可以将URL令牌分配给自己的变量：

var tokens = getTokens();

然后按名称引用每个URL令牌，如下所示：

document.write( tokens['id'] );

这将打印“4”。

您也可以直接从函数中引用一个令牌名称：

document.write( getTokens()['name'] );

…上面会印着“murray”。

PHP parse_str copycat..：）

// Handles also array params well
function parseQueryString(query) {
    var pars = (query != null ? query : "").replace(/&+/g, "&").split('&'),
        par, key, val, re = /^([\w]+)\[(.*)\]/i, ra, ks, ki, i = 0,
        params = {};

    while ((par = pars.shift()) && (par = par.split('=', 2))) {
        key = decodeURIComponent(par[0]);
        // prevent param value going to be "undefined" as string
        val = decodeURIComponent(par[1] || "").replace(/\+/g, " ");
        // check array params
        if (ra = re.exec(key)) {
            ks = ra[1];
            // init array param
            if (!(ks in params)) {
                params[ks] = {};
            }
            // set int key
            ki = (ra[2] != "") ? ra[2] : i++;
            // set array param
            params[ks][ki] = val;
            // go on..
            continue;
        }
        // set param
        params[key] = val;
    }

    return params;
}

var query = 'foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last';
var params = parseQueryString(query);
console.log(params)
console.log(params.foo)        // 1
console.log(params.bar)        // The bar!
console.log(params.arr[0])     // a0
console.log(params.arr[1])     // a1
console.log(params.arr.s)      // as
console.log(params.arr.none)   // undefined
console.log("isset" in params) // true like: isset($_GET['isset'])



/*
// in php
parse_str('foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last', $query);
print_r($query);

Array
(
    [foo] => 1
    [bar] => The bar!
    [arr] => Array
        (
            [0] => a0
            [1] => a1
            [s] => as
            [2] => last
        )

    [isset] =>
)*/