在 JavaScript 中解析查询字符串

IT技术 javascript parsing query-string
2021-02-02 05:50:23

我需要解析查询字符串www.mysite.com/default.aspx?dest=aboutus.aspx如何dest在 JavaScript 中获取变量?

6个回答

这是在 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'));
@gotofritz,我不认为这会做同样的事情:"a=b=c".split("=", 2) 给你 [ 'a', 'b' ],你想要的是 [ 'a', 'b=c']
2021-03-10 05:50:23
您还应该解码任何已被百分比编码的特殊字符
2021-03-14 05:50:23
简单,但如果您需要获取多个查询值,则速度不会很快。我认为更好的抽象是返回一个 JS 对象,其中包含来自查询字符串的所有名称值对
2021-03-15 05:50:23
关于什么 ?this=1&this=2&this=3
2021-04-02 05:50:23
此外, split("=") 还不够好,您可以有一个“name=value”对,其中 value 包含未编码的“=”。解决方案是执行 indexOf('=') 来查找第一个 '=' 以及前后的子字符串。
2021-04-05 05:50:23
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;
}

将查询字符串 likehello=1&another=2转换为 object {hello: 1, another: 2}从那里,很容易提取您需要的变量。

也就是说,它不处理诸如"hello=1&hello=2&hello=3". 要使用它,您必须在添加之前检查您创建的对象的属性是否存在,并将其值转换为数组,推送任何其他位。

可能会缩短一点:queryString.replace(/^\?/, '').split('&') 感谢您的解决方案:)
2021-03-27 05:50:23
这有效,只需添加一个 if 语句来验证pair[0]!=""
2021-03-30 05:50:23
修复了错误并更新了代码。抱歉,我想在这里大声喊出来:“Javascript,为什么我们必须手动执行此操作?犯错误!JS 不是打算在浏览器中工作并帮助人们进行 Web 开发吗?
2021-04-01 05:50:23
如果 b 是一个包含一个元素的数组,则此函数将失败。前任。somesite.com/?varrible1=data&varrible2= 例如。somesite.com/?varrible1=data&varrible
2021-04-04 05:50:23
以下是对此的 Jasmine 测试:gist.github.com/amyboyd/68a86fe3f65a77fcfc7f
2021-04-04 05:50:23

您还可以使用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 
一个好的本地解决方案(几乎)总是比一个需要 3rd 方工具的好的解决方案更好,这就是我所说的。
2021-03-19 05:50:23
即便如此,知道这样的工具存在总是很高兴的。事实上,我确切地知道如何手动解析查询,但我更喜欢谷歌搜索一些更好的解决方案,这就是我来到这里的方式,首先。;)
2021-03-28 05:50:23
很酷,但需要 3rd 方库的解决方案并不理想。我有点惊讶这个解决方案收到了如此多的赞成票。无意冒犯@SalmanPK
2021-03-30 05:50:23
@Madbreaks 但是自定义的、重新发明轮子、未经实战测试且功能非常有限的解决方案是?有趣的 ;)
2021-04-05 05:50:23
.query(true) 部分中的参数有什么作用?是否将查询作为键值对象而不是查询字符串返回?
2021-04-09 05:50:23

我也是!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
-------------------
如果查询字符串中的变量之一包含 =(等号)怎么办
2021-03-12 05:50:23
只是尽量保持简单
2021-03-21 05:50:23
那里,7 年后(几乎)每个人都快乐吗?
2021-03-29 05:50:23
如果任何查询字符串值不具有等号,则失败,例如:'?val1=1&val2&val3=4',因为 '=' 上的拆分导致pair[1] == null,它decodeURIComponent(null)返回字符串"null"而不是 value null更好地使用d(pair[1] || '').
2021-03-30 05:50:23
@drzaus 我使用了你的代码,但我需要将重复的参数解析为数组。如果有人有同样的需求, - jsfiddle.net/sergiyok/yywhxsqz
2021-03-30 05:50:23

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

'use strict';

function parseQuery(search) {

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

    var argsParsed = {};

    var i, arg, kvp, key, value;

    for (i=0; i < args.length; i++) {

        arg = args[i];

        if (-1 === arg.indexOf('=')) {

            argsParsed[decodeURIComponent(arg).trim()] = true;
        }
        else {

            kvp = arg.split('=');

            key = decodeURIComponent(kvp[0]).trim();

            value = decodeURIComponent(kvp[1]).trim();

            argsParsed[key] = value;
        }
    }

    return argsParsed;
}

parseQuery(document.location.search);
不要使用此代码,它只是错误的。修剪会修改数据,使用 unescape 而不是 decodeURIComponent 并且在错误的地方调用它(名称和值应该单独解析,而不是作为名称=值字符串的一部分)。它还泄漏全局变量并使用“==”来比较值。
2021-03-11 05:50:23
@ghigo 是的,检查零长度密钥将是一个好主意,也许在修剪之后。没有理由使用 unescape(),我不记得我从哪里复制了它;-)
2021-03-24 05:50:23
我会添加 if(args[i].length){ 作为循环中的第一行,以避免在 argsParsed 中出现空键。
2021-03-26 05:50:23
警告:不推荐使用 unescape。请参阅:developer.mozilla.org/en-US/docs/JavaScript/Guide/...
2021-03-31 05:50:23
是否有理由使用 unescape() 而不是 decodeURI()?
2021-04-08 05:50:23