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

Parse query string in JavaScript

如何解决《ParsequerystringinJavaScript》经验,为你挑选了9个好方法。

这是一种在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 =你好:

console.log(getQueryVariable('x'));

如果您需要获得多个查询值,则很容易,但速度不是很快.我认为更好的抽象是返回一个JS对象,其中包含查询字符串中的所有名称值对 (38认同)

另外,拆分("=")不够好,你可以有一个"name = value"对,其中value包含一个非编码的'='.解决方法是使用indexOf('=')来查找第一个'=',以及之前和之后的子字符串. (11认同)

您还应解码任何已编码百分比的特殊字符 (9认同)

怎么样??this = 1&this = 2&this = 3` (9认同)


小智.. 154

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".要使用它,您必须在添加之前检查您所创建的对象的属性是否存在,并将其值转换为数组,并推送任何其他位.



1> Tarik..:

这是一种在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 =你好:

console.log(getQueryVariable('x'));


如果您需要获得多个查询值,则很容易,但速度不是很快.我认为更好的抽象是返回一个JS对象,其中包含查询字符串中的所有名称值对
另外,拆分("=")不够好,你可以有一个"name = value"对,其中value包含一个非编码的'='.解决方法是使用indexOf('=')来查找第一个'=',以及之前和之后的子字符串.
您还应解码任何已编码百分比的特殊字符
怎么样??this = 1&this = 2&this = 3`

2> 小智..:
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".要使用它,您必须在添加之前检查您所创建的对象的属性是否存在,并将其值转换为数组,并推送任何其他位.


修复了错误并更新了代码.对不起,我想在这里大声喊出:"Javascript,为什么我们必须手动执行此操作?犯错误!JS是否打算在浏览器中工作并帮助人们进行Web开发?

3> Salman von A..:

您还可以使用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 


@Madbreaks但定制,重新发明轮子,没有经过实战考验和功能非常有限的解决方案?有意思;)
很酷,但需要第三方库的解决方案并不理想.我有点惊讶这个解决方案收到了这么多的赞成.对@SalmanPK没有任何冒犯
一个好的原生解决方案(几乎)总是优于需要第三方工具的好解决方案,我只是说.
即便如此,知道存在这样的工具总是很好的.事实上,我确切地知道如何手动解析查询,但我更倾向于谷歌周围寻求更好的解决方案,这就是我首先来到这里的方式.;)

4> drzaus..:

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

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

deparam = function (querystring) {
  // remove any preceding url and split
  querystring = querystring.substring(querystring.indexOf('?')+1).split('&');
  var params = {}, pair, d = decodeURIComponent;
  // march and parse
  for (var i = querystring.length - 1; i >= 0; i--) {
    pair = querystring[i].split('=');
    params[d(pair[0])] = d(pair[1] || '');
  }

  return params;
};//--  fn  deparam

并测试:

var tests = {};
tests["simple params"] = "ID=2&first=1&second=b";
tests["full url"] = "http://blah.com/?" + tests["simple params"];
tests['just ?'] = '?' + tests['simple params'];

var $output = document.getElementById('output');
function output(msg) {
  $output.innerHTML += "\n" + Array.prototype.slice.call(arguments, 0).join("\n");
}
$.each(tests, function(msg, test) {
  var q = deparam(test);
  // prompt, querystring, result, reverse
  output(msg, test, JSON.stringify(q), $.param(q));
  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/?ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------
just ?
?ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------



5> Henry Rusted..:

这是我的版本松散地基于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()而不是decodeURI()?
警告:不推荐使用unescape.请参阅:https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Functions?redirectlocale=en-US&redirectslug=Core_JavaScript_1.5_Guide%2FFunctions#escape_and_unescape_functions(Obsoleted_above_JavaScript_1.5)
不要使用此代码,这是错误的。修整会修改数据,使用unescape而不是encodeURIComponent,并且在错误的地方调用了它(名称和值应分别解析,而不是作为name = value字符串的一部分)。它还泄漏全局变量,并使用“ ==”比较值。

6> jsdw..:

继我对@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')并返回一个对象.字符串在&的所有出现时被拆分,从而产生一个数组.然后对该数组进行travsers,并将其中的每个项目拆分为"=".这导致子数组,其中第0个元素是参数,第1个元素是值(如果没有=符号,则为undefined).这些映射到对象属性,因此例如字符串"hello = 1&another = 2&something"变为:

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

此外,此代码注意到重复重复,例如"hello = 1&hello = 2"并将结果转换为数组,例如:

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

你还会注意到它处理了没有使用=符号的情况.如果在&符号后面有一个等号,它也会忽略.

对于原始问题有点矫枉过正,但如果您需要在javascript中使用查询字符串,则可以使用可重用的解决方案:)



7> CB01..:

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

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



8> amiuhle..:

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

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随后调用.我还没有完全测试过这个,正则表达式可能还需要一些调整......


看起来好像是"我有问题.我会用一些正则表达式解决它.现在我有两个问题." 告诉我这比@Braveyard的字符串解析方法更好.

9> jdavid.net..:

我想要一个简单的函数,它将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;
};

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