¿Existe alguna biblioteca de JavaScript que haga un diccionario a partir de la cadena de consulta, ASP.NETestilo?

Algo que se puede utilizar como:

var query = window.location.querystring["query"]?

¿Se llama "cadena de consulta" de otra forma fuera del .NETámbito? ¿Por qué no se location.searchdivide en una colección de clave / valor ?

EDITAR : He escrito mi propia función, pero ¿alguna biblioteca importante de JavaScript hace esto?

¿Quizás http://plugins.jquery.com/query-object/ ?

Esta es la bifurcación https://github.com/sousk/jquery.parsequery#readme .

Puede extraer los pares clave / valor de la propiedad location.search , esta propiedad tiene la parte de la URL que sigue a? símbolo, incluido el? símbolo.

function getQueryString() {
  var result = {}, queryString = location.search.slice(1),
      re = /([^&=]+)=([^&]*)/g, m;

  while (m = re.exec(queryString)) {
    result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }

  return result;
}

// ...
var myParam = getQueryString()["myParam"];

tl; dr solución en una sola línea (ish) de código usando vainilla javascript

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

Para la cadena de consulta ?a=1&b=2&c=3&d&e, devuelve:

> queryDict
a: "1"
b: "2"
c: "3"
d: undefined
e: undefined

claves de varios valores y caracteres codificados ?

Vea la respuesta original en ¿Cómo puedo obtener valores de cadena de consulta en JavaScript?

"?a=1&b=2&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"
> queryDict
a: ["1", "5", "t e x t"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

Después de encontrar esta publicación, al mirarme a mí mismo pensé que debería agregar que no creo que la solución más votada sea la mejor. No maneja valores de matriz (como? A = foo & a = bar; en este caso, esperaría obtener un retorno ['foo', 'bar']). También, por lo que puedo decir, no tiene en cuenta los valores codificados, como la codificación de caracteres hexadecimales donde% 20 representa un espacio (ejemplo:? A = Hola% 20World) o el símbolo más que se usa para representar un espacio (ejemplo :? a = Hola + Mundo).

Node.js ofrece lo que parece una solución muy completa para el análisis de cadenas de consulta. Sería fácil de sacar y usar en su propio proyecto ya que está bastante bien aislado y bajo una licencia permisiva.

El código se puede ver aquí: https://github.com/joyent/node/blob/master/lib/querystring.js

Las pruebas que tiene Node se pueden ver aquí: https://github.com/joyent/node/blob/master/test/simple/test-querystring.js Sugeriría probar algunas de estas con la respuesta popular para ver cómo funciona los maneja.

También hay un proyecto en el que participé para agregar específicamente esta funcionalidad. Es un puerto del módulo de análisis de cadenas de consulta lib estándar de Python. Mi bifurcación se puede encontrar aquí: https://github.com/d0ugal/jquery.qeeree

O puede usar la biblioteca sugar.js .

De sugarjs.com:

Object.fromQueryString (str , deep = true )

Convierte la cadena de consulta de una URL en un objeto. Si deep es falso, la conversión solo aceptará parámetros poco profundos (es decir, ningún objeto o matrices con sintaxis []) ya que estos no son compatibles universalmente.

Object.fromQueryString('foo=bar&broken=wear') >{"foo":"bar","broken":"wear"}
Object.fromQueryString('foo[]=1&foo[]=2') >{"foo":[1,2]}

Ejemplo:

var queryString = Object.fromQueryString(location.search);
var foo = queryString.foo;

Si tiene la cadena de consulta a mano, use esto:

 /**
 * @param qry the querystring
 * @param name name of parameter
 * @returns the parameter specified by name
 * @author [email protected]
 */

function getQueryStringParameter(qry,name){
    if(typeof qry !== undefined && qry !== ""){
        var keyValueArray = qry.split("&");
        for ( var i = 0; i < keyValueArray.length; i++) {
            if(keyValueArray[i].indexOf(name)>-1){
                return keyValueArray[i].split("=")[1];
            }
        }
    }
    return "";
}

// How about this
function queryString(qs) {
    var queryStr = qs.substr(1).split("&"),obj={};
    for(var i=0; i < queryStr.length;i++)
        obj[queryStr[i].split("=")[0]] = queryStr[i].split("=")[1];
    return obj;
}

// Usage:
var result = queryString(location.search);

Vale la pena señalar que la biblioteca que mencionó John Slegers tiene una dependencia de jQuery, sin embargo, aquí hay una versión que es Javascript vanilla.

https://github.com/EldonMcGuinness/querystring.js

Simplemente habría comentado su publicación, pero no tengo la reputación para hacerlo. : /

Ejemplo:

El siguiente ejemplo procesa la siguiente cadena de consulta, aunque irregular:

?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab 

var qs = "?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab";
//var qs = "?=&=";
//var qs = ""

var results = querystring(qs);

(document.getElementById("results")).innerHTML =JSON.stringify(results, null, 2);

<script 
src="https://rawgit.com/EldonMcGuinness/querystring.js/master/dist/querystring.min.js"></script>
<pre id="results">RESULTS: Waiting...</pre>

El código

Esta esencia de Eldon McGuinness es, con mucho, la implementación más completa de un analizador de cadenas de consulta de JavaScript que he visto hasta ahora.

Desafortunadamente, está escrito como un complemento de jQuery.

Lo reescribí en Vanilla JS e hice algunas mejoras:

function parseQuery(str) {
  var qso = {};
  var qs = (str || document.location.search);
  // Check for an empty querystring
  if (qs == "") {
    return qso;
  }
  // Normalize the querystring
  qs = qs.replace(/(^\?)/, '').replace(/;/g, '&');
  while (qs.indexOf("&&") != -1) {
    qs = qs.replace(/&&/g, '&');
  }
  qs = qs.replace(/([\&]+$)/, '');
  // Break the querystring into parts
  qs = qs.split("&");
  // Build the querystring object
  for (var i = 0; i < qs.length; i++) {
    var qi = qs[i].split("=");
    qi = qi.map(function(n) {
      return decodeURIComponent(n)
    });
    if (typeof qi[1] === "undefined") {
      qi[1] = null;
    }
    if (typeof qso[qi[0]] !== "undefined") {

      // If a key already exists then make this an object
      if (typeof (qso[qi[0]]) == "string") {
        var temp = qso[qi[0]];
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]] = [];
        qso[qi[0]].push(temp);
        qso[qi[0]].push(qi[1]);

      } else if (typeof (qso[qi[0]]) == "object") {
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]].push(qi[1]);
      }
    } else {
      // If no key exists just set it as a string
      if (qi[1] == "") {
        qi[1] = null;
      }
      qso[qi[0]] = qi[1];
    }
  }
  return qso;
}

Cómo usarlo

var results = parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab");

Salida

{
  "foo": ["bar", "boo" ],
  "roo": "bar",
  "bee": "bop",
  "": ["ghost", "ghost2"],
  "checkbox[]": ["b1", "b2"],
  "dd": null,
  "http": [
    "http://w3schools.com/my test.asp?name=ståle&car=saab",
    "http://w3schools2.com/my test.asp?name=ståle&car=saab"
  ]
}

Vea también este Fiddle .

function decode(s) {
    try {
        return decodeURIComponent(s).replace(/\r\n|\r|\n/g, "\r\n");
    } catch (e) {
        return "";
    }
}
function getQueryString(win) {
    var qs = win.location.search;
    var multimap = {};
    if (qs.length > 1) {
        qs = qs.substr(1);
        qs.replace(/([^=&]+)=([^&]*)/g, function(match, hfname, hfvalue) {
            var name = decode(hfname);
            var value = decode(hfvalue);
            if (name.length > 0) {
                if (!multimap.hasOwnProperty(name)) {
                    multimap[name] = [];
                }
                multimap[name].push(value);
            }
        });
    }
    return multimap;
}
var keys = getQueryString(window);
for (var i in keys) {
    if (keys.hasOwnProperty(i)) {
        for (var z = 0; z < keys[i].length; ++z) {
            alert(i + ":" + keys[i][z]);
        }
    }
}

Me gusta mantenerlo simple, legible y pequeño.

function searchToObject(search) {
    var pairs = search.substring(1).split("&"),
        obj = {}, pair;

    for (var i in pairs) {
        if (pairs[i] === "") continue;
        pair = pairs[i].split("=");
        obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }
    return obj;
}

searchToObject(location.search);

Ejemplo:

searchToObject('?query=myvalue')['query']; // spits out: 'myvalue'

Función que escribí para un requisito similar a este con manipulación pura de cadenas de JavaScript

"http://www.google.lk/?Name=John&Age=20&Gender=Male"

function queryize(sampleurl){
    var tokens = url.split('?')[1].split('&');
    var result = {};

    for(var i=0; i<tokens.length; i++){
        result[tokens[i].split('=')[0]] = tokens[i].split('=')[1];
    }

    return result;
}

Uso:

queryize(window.location.href)['Name'] //returns John
queryize(window.location.href)['Age'] //returns 20
queryize(window.location.href)['Gender'] //returns Male

Si está utilizando lodash + ES6, aquí hay una solución de una línea: _.object(window.location.search.replace(/(^\?)/, '').split('&').map(keyVal => keyVal.split('=')));

De acuerdo, ya que todos están ignorando mi pregunta real, je, ¡también publicaré la mía! Esto es lo que tengo:

location.querystring = (function() {

    // The return is a collection of key/value pairs

    var queryStringDictionary = {};

    // Gets the query string, starts with '?'

    var querystring = unescape(location.search);

    // document.location.search is empty if no query string

    if (!querystring) {
        return {};
    }

    // Remove the '?' via substring(1)

    querystring = querystring.substring(1);

    // '&' seperates key/value pairs

    var pairs = querystring.split("&");

    // Load the key/values of the return collection

    for (var i = 0; i < pairs.length; i++) {
        var keyValuePair = pairs[i].split("=");
        queryStringDictionary[keyValuePair[0]] = keyValuePair[1];
    }

    // Return the key/value pairs concatenated

    queryStringDictionary.toString = function() {

        if (queryStringDictionary.length == 0) {
            return "";
        }

        var toString = "?";

        for (var key in queryStringDictionary) {
            toString += key + "=" + queryStringDictionary[key];
        }

        return toString;
    };

    // Return the key/value dictionary

    return queryStringDictionary;
})();

Y las pruebas:

alert(window.location.querystring.toString());

for (var key in location.querystring) {
    alert(key + "=" + location.querystring[key]);
}

Eso sí, pensaste, JavaScript no es mi lengua materna.

De todos modos, estoy buscando una biblioteca de JavaScript (por ejemplo, jQuery, Prototype) que ya tenga una escrita. :)

Sobre la base de la respuesta de @CMS, tengo lo siguiente (en CoffeeScript que se puede convertir fácilmente a JavaScript):

String::to_query = ->
  [result, re, d] = [{}, /([^&=]+)=([^&]*)/g, decodeURIComponent]
  while match = re.exec(if @.match /^\?/ then @.substring(1) else @)
    result[d(match[1])] = d match[2] 
  result

Puede obtener fácilmente lo que necesita con:

location.search.to_query()['my_param']

La ganancia aquí es una interfaz orientada a objetos (en lugar de funcional) y se puede hacer en cualquier cadena (no solo en location.search).

Si ya está utilizando una biblioteca de JavaScript, esta función ya existe. Por ejemplo, aquí está la versión de Prototype