web-dev-qa-db-fra.com

Chaîne de requête JavaScript

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

Quelque chose qui peut être utilisé comme:

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

Est-ce que "chaîne de requête" est appelé autre chose en dehors du .NET royaume? Pourquoi n'est pas location.search décomposé en une collection de clé/valeur ?

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

javascriptquery-string
105
core

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

C’est sa fourchette https://github.com/sousk/jquery.parsequery#readme .

11
Shadow2531

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 caractère? 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"];
230
CMS

tl; dr solution sur une seule ligne de code (ish) en utilisant Vanilla javascript

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 retourne:

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

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

Voir la réponse d'origine à l'adresse Comment 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"]
21
Qwerty

Après avoir trouvé ce post, en cherchant moi-même, j'ai pensé 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 à obtenir un pour renvoyer ['foo', 'bar']). Autant que je sache, il ne prend pas en compte les valeurs codées - telles que 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 semble être une solution très complète d'analyse syntaxique. Il serait facile à prendre 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 peut être vu ici: https://github.com/joyent/node/blob/master/test/simple/test-querystring.js = Je suggérerais d’essayer certaines d’entre elles avec la réponse populaire pour voir comment il les gère.

Il y a aussi un projet dans lequel j'ai été impliqué pour ajouter spécifiquement cette fonctionnalité. C’est un port du module d’analyse de chaîne de requête lib standard Python). Mon fork se trouve ici: https://github.com/d0ugal/jquery.qeeree

8
d0ugal

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 false, la conversion n'acceptera que des paramètres superficiels (c.-à-d. Aucun objet ni tableau contenant 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;
5
andersh

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

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

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

J'aurais simplement commenté son post, mais la réputation me manque pour le faire. : /

Exemple:

L'exemple ci-dessous traite la chaîne de requête suivante, même si elle est 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>
2
Eldon McGuinness
// 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);
2
Ryan C Knaggs

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 vue jusqu'à présent. .

Malheureusement, c'est écrit comme un plugin jQuery.

Je l'ai réécrit dans Vanilla JS et 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");

Sortie

{
  "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 .

2
John Slegers

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
1
Pranavan Maru

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

1
Ben

J'aime rester 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'
1
André Snede Kock

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

Ok, puisque tout le monde ignore ma question, heh, je posterai aussi la mienne! 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]);
}

Remarquez, JavaScript n'est pas ma langue maternelle.

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

0
core

En me basant sur la réponse de @CMS, j'ai les éléments suivants (dans CoffeeScript, qui peuvent facilement être convertis 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']

Le gain 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 fait déjà exister. Par exemple voici la version de Prototype

0
Eric Anderson