Existe-t-il une bibliothèque JavaScript qui crée un dictionnaire à partir de la chaîne de requête, ASP.NETstyle?

Quelque chose qui peut être utilisé comme:

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

La "chaîne de requête" est-elle appelée autre chose en dehors du .NETroyaume? Pourquoi n'est-il pas location.searchdivisé en une collection de clés / valeurs ?

EDIT : J'ai écrit ma propre fonction, mais est-ce qu'une bibliothèque JavaScript majeure le fait?

Peut-être http://plugins.jquery.com/query-object/ ?

C'est la fourchette https://github.com/sousk/jquery.parsequery#readme .

Vous pouvez extraire les paires clé / valeur de la propriété location.search , cette propriété a la partie de l'URL qui suit le? symbole, y compris le? symbole.

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 solution sur une seule ligne (ish) de code en utilisant du javascript vanille

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

Pour la chaîne de requête, ?a=1&b=2&c=3&d&eil renvoie:

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

clés à valeurs multiples et caractères codés ?

Voir la réponse originale sur Comment puis-je obtenir des valeurs de chaîne de requête 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"]

Après avoir trouvé ce post, en me regardant, j'ai pensé que je devrais ajouter que je ne pense pas que la solution la plus votée soit la meilleure. Il ne gère pas les valeurs de tableau (comme? A = foo & a = bar - dans ce cas, je m'attendrais à ce que un retourne ['foo', 'bar']). Autant que je sache, il ne prend pas non plus en compte les valeurs codées - comme le codage de caractères hexadécimaux où% 20 représente un espace (exemple:? A = Hello% 20World) ou le symbole plus utilisé pour représenter un espace (exemple :? a = Bonjour + Monde).

Node.js offre ce qui ressemble à une solution très complète pour l'analyse des chaînes de requêtes. Il serait facile à retirer et à utiliser dans votre propre projet car il est assez bien isolé et sous licence permissive.

Le code correspondant peut être consulté ici: https://github.com/joyent/node/blob/master/lib/querystring.js

Les tests que Node a peuvent être vus ici: https://github.com/joyent/node/blob/master/test/simple/test-querystring.js Je suggérerais d'essayer certains d'entre eux avec la réponse populaire pour voir comment cela les gère.

Il y a aussi un projet dans lequel j'ai été impliqué pour ajouter spécifiquement cette fonctionnalité. Il s'agit d'un portage du module d'analyse de chaîne de requête de la bibliothèque standard Python. Ma fourche se trouve ici: https://github.com/d0ugal/jquery.qeeree

Ou vous pouvez utiliser la bibliothèque sugar.js .

De sugarjs.com:

Object.fromQueryString (str , deep = true )

Convertit la chaîne de requête d'une URL en objet. Si deep est faux, la conversion n'acceptera que les paramètres superficiels (c'est-à-dire pas d'objet ou de tableaux avec la syntaxe []) car ils ne sont pas universellement pris en charge.

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

Exemple:

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

Si vous avez la chaîne de requête sous la main, utilisez ceci:

 /**
 * @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);

Il est à noter que la bibliothèque mentionnée par John Slegers a une dépendance jQuery, mais voici une version qui est Javascript vanille.

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

J'aurais simplement commenté son message, mais je n'ai pas la réputation de le faire. : /

Exemple:

L'exemple ci-dessous traite la chaîne de requête suivante, quoique irrégulière:

?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>

Le code

This Gist par Eldon McGuinness est de loin l'implémentation la plus complète d'un analyseur de chaîne de requête JavaScript que j'ai vu jusqu'à présent.

Malheureusement, il est écrit comme un plugin jQuery.

Je l'ai réécrit en vanilla JS et j'ai apporté quelques améliorations:

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;
}

Comment l'utiliser

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");

Production

{
  "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"
  ]
}

Voir aussi ce violon .

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]);
        }
    }
}

J'aime le garder simple, lisible et petit.

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);

Exemple:

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

Fonction que j'ai écrite pour une exigence similaire à celle-ci avec une manipulation de chaîne javascript pure

"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;
}

Usage:

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

Si vous utilisez lodash + ES6, voici une solution en une seule ligne: _.object(window.location.search.replace(/(^\?)/, '').split('&').map(keyVal => keyVal.split('=')));

D'accord, puisque tout le monde ignore ma vraie question, hé, je posterai la mienne aussi! Voici ce que j'ai:

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;
})();

Et les tests:

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

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

Rappelez-vous que vous avez pensé, JavaScript n'est pas ma langue maternelle.

Quoi qu'il en soit, je recherche une bibliothèque JavaScript (par exemple jQuery, Prototype) qui en a déjà une écrite. :)

En m'appuyant sur la réponse de @CMS, j'ai ce qui suit (dans CoffeeScript qui peut facilement être converti en 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

Vous pouvez facilement saisir ce dont vous avez besoin avec:

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

La victoire ici est une interface orientée objet (au lieu de fonctionnelle) et cela peut être fait sur n'importe quelle chaîne (pas seulement location.search).

Si vous utilisez déjà une bibliothèque JavaScript, cette fonction existe déjà. Par exemple, voici la version de Prototype