在 JavaScript 中解析查询字符串[重复]

问题描述 投票:0回答:11

我需要解析查询字符串

www.mysite.com/default.aspx?dest=aboutus.aspx
。 如何在 JavaScript 中获取
dest
变量?

javascript parsing query-string
11个回答
393
投票

这是一种在 JavaScript 中解析查询字符串的快速且简单的方法:

function getQueryVariable(variable) {
    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 (decodeURIComponent(pair[0]) == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
    console.log('Query variable %s not found', variable);
}

现在向 page.html?x=Hello:

发出请求
console.log(getQueryVariable('x'));

202
投票
function parseQuery(queryString) {
    var query = {};
    var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split('=');
        query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
    }
    return query;
}

将查询字符串(如

hello=1&another=2
)转换为对象
{hello: 1, another: 2}
。从那里,可以轻松提取所需的变量。

也就是说,它不处理诸如

"hello=1&hello=2&hello=3"
之类的数组情况。要使用此方法,您必须在添加对象之前检查您创建的对象的属性是否存在,并将其值转换为数组,推送任何附加位。


57
投票

您还可以使用 Rodney Rehm 提供的出色的 URI.js 库。方法如下:-

var qs = URI('www.mysite.com/default.aspx?dest=aboutus.aspx').query(true); // == { dest : 'aboutus.aspx' }
    alert(qs.dest); // == aboutus.aspx

并解析当前页面的查询字符串:-

var $_GET = URI(document.URL).query(true); // ala PHP
    alert($_GET['dest']); // == aboutus.aspx 

26
投票

我也是! http://jsfiddle.net/drzaus/8EE8k/

(注意:没有花哨的嵌套或重复检查)

deparam = (function(d,x,params,p,i,j) {
return function (qs) {
    // start bucket; can't cheat by setting it in scope declaration or it overwrites
    params = {};
    // remove preceding non-querystring, correct spaces, and split
    qs = qs.substring(qs.indexOf('?')+1).replace(x,' ').split('&');
    // march and parse
    for (i = qs.length; i > 0;) {
        p = qs[--i];
        // allow equals in value
        j = p.indexOf('=');
        // what if no val?
        if(j === -1) params[d(p)] = undefined;
        else params[d(p.substring(0,j))] = d(p.substring(j+1));
    }

    return params;
};//--  fn  deparam
})(decodeURIComponent, /\+/g);

和测试:

var tests = {};
tests["simple params"] = "ID=2&first=1&second=b";
tests["full url"] = "http://blah.com/?third=c&fourth=d&fifth=e";
tests['just ?'] = '?animal=bear&fruit=apple&building=Empire State Building&spaces=these+are+pluses';
tests['with equals'] = 'foo=bar&baz=quux&equals=with=extra=equals&grault=garply';
tests['no value'] = 'foo=bar&baz=&qux=quux';
tests['value omit'] = 'foo=bar&baz&qux=quux';

var $output = document.getElementById('output');
function output(msg) {
    msg = Array.prototype.slice.call(arguments, 0).join("\n");
    if($output) $output.innerHTML += "\n" + msg + "\n";
    else console.log(msg);
}
var results = {}; // save results, so we can confirm we're not incorrectly referencing
$.each(tests, function(msg, test) {
    var q = deparam(test);
    results[msg] = q;
    output(msg, test, JSON.stringify(q), $.param(q));
    output('-------------------');
});

output('=== confirming results non-overwrite ===');
$.each(results, function(msg, result) {
    output(msg, JSON.stringify(result));
    output('-------------------');
});

结果:

simple params
ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------
full url
http://blah.com/?third=c&fourth=d&fifth=e
{"fifth":"e","fourth":"d","third":"c"}
fifth=e&fourth=d&third=c
-------------------
just ?
?animal=bear&fruit=apple&building=Empire State Building&spaces=these+are+pluses
{"spaces":"these are pluses","building":"Empire State Building","fruit":"apple","animal":"bear"}
spaces=these%20are%20pluses&building=Empire%20State%20Building&fruit=apple&animal=bear
-------------------
with equals
foo=bar&baz=quux&equals=with=extra=equals&grault=garply
{"grault":"garply","equals":"with=extra=equals","baz":"quux","foo":"bar"}
grault=garply&equals=with%3Dextra%3Dequals&baz=quux&foo=bar
-------------------
no value
foo=bar&baz=&qux=quux
{"qux":"quux","baz":"","foo":"bar"}
qux=quux&baz=&foo=bar
-------------------
value omit
foo=bar&baz&qux=quux
{"qux":"quux","foo":"bar"}   <-- it's there, i swear!
qux=quux&baz=&foo=bar        <-- ...see, jQuery found it
-------------------

18
投票

这是我的版本,大致基于上面的 Braceyard 版本,但解析为“字典”并支持不带“=”的搜索参数。在我的 JQuery $(document).ready() 函数中使用它。参数作为键/值对存储在 argsParsed 中,您可能希望将其保存在某个地方...

var args = document.location.search.substring(1).split('&');

var argsParsed = {};

for (i=0; i < args.length; i++)
{
    var arg = decodeURIComponent(args[i]);
    
    if (arg.indexOf('=') == -1)
    {
        argsParsed[arg.trim()] = true;
    }
    else
    {
        var kvp = arg.split('=');
        argsParsed[kvp[0].trim()] = kvp[1].trim();
    }
}

14
投票

根据我对 @bobby 发布的答案的评论,这是我将使用的代码:

    function parseQuery(str)
        {
        if(typeof str != "string" || str.length == 0) return {};
        var s = str.split("&");
        var s_length = s.length;
        var bit, query = {}, first, second;
        for(var i = 0; i < s_length; i++)
            {
            bit = s[i].split("=");
            first = decodeURIComponent(bit[0]);
            if(first.length == 0) continue;
            second = decodeURIComponent(bit[1]);
            if(typeof query[first] == "undefined") query[first] = second;
            else if(query[first] instanceof Array) query[first].push(second);
            else query[first] = [query[first], second]; 
            }
        return query;
        }

此代码接受提供的查询字符串(如“str”)并返回一个对象。字符串在所有出现的 & 处被分割,产生一个数组。然后遍历数组,其中的每个项目都用“=”分隔。这会产生子数组,其中第 0 个元素是参数,第 1 个元素是值(如果没有 = 符号则为未定义)。这些被映射到对象属性,因此例如字符串“hello=1&another=2&something”会变成:

{
hello: "1",
another: "2",
something: undefined
}

此外,此代码会注意到重复出现的情况,例如“hello=1&hello=2”,并将结果转换为数组,例如:

{
hello: ["1", "2"]
}

您还会注意到它处理不使用 = 符号的情况。它还会忽略 & 符号后面是否有等号。

对于最初的问题来说有点矫枉过正,但如果您需要在 javascript 中使用查询字符串,那么这是一个可重用的解决方案:)


10
投票

如果您知道只有一个查询字符串变量,您可以简单地执行以下操作:

var dest = location.search.replace(/^.*?\=/, '');

7
投票

以下函数将使用正则表达式解析搜索字符串,缓存结果并返回所请求变量的值:

window.getSearch = function(variable) {
  var parsedSearch;
  parsedSearch = window.parsedSearch || (function() {
    var match, re, ret;
    re = /\??(.*?)=([^\&]*)&?/gi;
    ret = {};
    while (match = re.exec(document.location.search)) {
      ret[match[1]] = match[2];
    }
    return window.parsedSearch = ret;
  })();
  return parsedSearch[variable];
};

您可以在不带任何参数的情况下调用一次并使用

window.parsedSearch
对象,或者随后调用
getSearch
。 我还没有完全测试过这一点,正则表达式可能仍然需要一些调整......


5
投票

这个怎么样?

function getQueryVar(varName){
    // Grab and unescape the query string - appending an '&' keeps the RegExp simple
    // for the sake of this example.
    var queryStr = unescape(window.location.search) + '&';

    // Dynamic replacement RegExp
    var regex = new RegExp('.*?[&\\?]' + varName + '=(.*?)&.*');

    // Apply RegExp to the query string
    var val = queryStr.replace(regex, "$1");

    // If the string is the same, we didn't find a match - return false
    return val == queryStr ? false : val;
}

..然后只需调用它:

alert('Var "dest" = ' + getQueryVar('dest'));

干杯


4
投票

我想要一个简单的函数,它将 URL 作为输入并返回查询参数的映射。 如果我要改进这个函数,我会支持 URL 中的数组数据和/或嵌套变量的标准。

这应该可以通过 jQuery.param( qparams ) 函数来实现。

function getQueryParams(url){
    var qparams = {},
        parts = (url||'').split('?'),
        qparts, qpart,
        i=0;

    if(parts.length <= 1 ){
        return qparams;
    }else{
        qparts = parts[1].split('&');
        for(i in qparts){

            qpart = qparts[i].split('=');
            qparams[decodeURIComponent(qpart[0])] = 
                           decodeURIComponent(qpart[1] || '');
        }
    }

    return qparams;
};

1
投票

我想选取页面上 DOM 元素中的特定链接,将这些用户发送到计时器上的重定向页面,然后将它们传递到原始单击的 URL。这就是我使用常规 javascript 并结合上述方法之一来完成的。

包含链接的页面:

Head function replaceLinks() { var content = document.getElementById('mainContent'); var nodes = content.getElementsByTagName('a'); for (var i = 0; i < document.getElementsByTagName('a').length; i++) { { href = nodes[i].href; if (href.indexOf("thisurl.com") != -1) { nodes[i].href="http://www.thisurl.com/redirect.aspx" + "?url=" + nodes[i]; nodes[i].target="_blank"; } } } }

身体

<body onload="replaceLinks()">

重定向页面

function getQueryVariable(variable) { 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 (decodeURIComponent(pair[0]) == variable) { return decodeURIComponent(pair[1]); } } console.log('Query variable %s not found', variable); } function delayer(){ window.location = getQueryVariable('url') }

身体

<body onload="setTimeout('delayer()', 1000)">

© www.soinside.com 2019 - 2024. All rights reserved.