javascript récupérer - Comment obtenir des valeurs de chaîne de requête en JavaScript?




15 Answers

Mise à jour: septembre 2018

Vous pouvez utiliser URLSearchParams, qui est simple et prend en charge les navigateurs .

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

Orignal

Vous n'avez pas besoin de jQuery pour cela. Vous pouvez utiliser seulement du JavaScript pur:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

Usage:

// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)


Remarque: Si un paramètre est présent plusieurs fois ( ?foo=lorem&foo=ipsum ), vous obtiendrez la première valeur ( lorem ). Il n'y a pas de standard à ce sujet et les utilisations varient, voir par exemple cette question: Position faisant autorité des clés de requête HTTP GET en double .
REMARQUE: la fonction est sensible à la casse. Si vous préférez un nom de paramètre ne respectant pas la casse, ajoutez le modificateur «i» à RegExp.

Il s'agit d'une mise à jour basée sur les nouvelles spécifications d'URLSearchParams pour obtenir le même résultat plus succinctement. Voir la réponse intitulée " URLSearchParams " ci-dessous.

données $_

Existe-t-il un moyen sans plugin de récupérer des valeurs de chaîne de requête via jQuery (ou sans)?

Si c'est le cas, comment? Si non, y a-t-il un plugin qui peut le faire?




ES2015 (ES6)

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

Sans jQuery

var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=', 2);
        if (p.length == 1)
            b[p[0]] = "";
        else
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

Avec une URL du type ?topic=123&name=query+string , les éléments suivants renverront:

qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)

Méthode Google

En déchirant le code de Google, j'ai trouvé la méthode qu'ils utilisent: getUrlParameters

function (b) {
    var c = typeof b === "undefined";
    if (a !== h && c) return a;
    for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
        var l = b[f][p]("=");
        if (l !== -1) {
            var q = b[f][I](0, l),
                l = b[f][I](l + 1),
                l = l[Ca](/\+/g, " ");
            try {
                d[q] = e(l)
            } catch (A) {}
        }
    }
    c && (a = d);
    return d
}

C'est obscurci, mais c'est compréhensible. Cela ne fonctionne pas car certaines variables ne sont pas définies.

Ils commencent à rechercher des paramètres sur l'URL à partir de ? et aussi du hash # . Ensuite, pour chaque paramètre, ils se séparent sous le signe égal b[f][p]("=") (qui ressemble à indexOf , ils utilisent la position du caractère pour obtenir la clé / valeur). Après l'avoir scindé, ils vérifient si le paramètre a une valeur ou non. Dans ce cas, ils stockent la valeur de d , sinon ils continuent.

En fin de compte, l'objet d est renvoyé, en traitement d'échappement et du signe + . Cet objet est comme le mien, il a le même comportement.

Ma méthode en tant que plugin jQuery

(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }

        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

Usage

//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

Test de performance (méthode split contre méthode regex) ( jsPerf )

Code de préparation: déclaration des méthodes

Code de test divisé

var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

Code de test de regex

var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

Test dans Firefox 4.0 x86 sur Windows Server 2008 R2 / 7 x64

  • Méthode split : 144 780 ± 2,17% le plus rapide
  • Méthode regex: 13 891 ± 0,85% | 90% plus lent



URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ et Chrome 49+ prennent en charge l’API URLSearchParams :

Il existe un polyfill URLSearchParams suggéré par Google pour les versions stables d’IE.

Ce n’est pas normalisé par le W3C , mais c’est un standard de vie par le WhatWG .

Vous pouvez l'utiliser sur place, mais vous devez supprimer le ? point d'interrogation (par exemple, avec .slice(1) ):

let params = new URLSearchParams(location.search);

ou

let params = (new URL(location)).searchParams;

Ou bien sur n'importe quelle URL:

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);

Vous pouvez obtenir des paramètres en utilisant également une propriété abrégée .searchParams sur l'objet URL, comme ceci:

let params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2" 

Vous lisez / définissez les paramètres via l'API get(KEY) , set(KEY, VALUE) , append(KEY, VALUE) . Vous pouvez également parcourir toutes les valeurs for (let p of params) {} .

Une implémentation de référence et un exemple de page sont disponibles pour l'audit et les tests.




tl; dr

Une solution rapide et complète , qui gère les clés à valeurs multiples et les caractères encodés .

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})

//using ES6   (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})
Multiligne:
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
    var s = item.split("="),
        k = s[0],
        v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit
    //(k in qd) ? qd[k].push(v) : qd[k] = [v]
    (qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})

Quel est tout ce code ...
"null-coalescing" , évaluation de court-circuit
ES6 Affectations de destruction , fonctions de flèche , chaînes de modèle

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

> qd.a[1]    // "5"
> qd["a"][1] // "5"


En savoir plus sur la solution JavaScript Vanilla.

Pour accéder à différentes parties d’un URL, utilisez l’ location.(search|hash)

La solution la plus simple (factice)

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
  • Gère les clés vides correctement.
  • Remplace les clés multiples avec la dernière valeur trouvée.
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

Clés à valeurs multiples

Vérification de clé simple (item in dict) ? dict.item.push(val) : dict.item = [val] (item in dict) ? dict.item.push(val) : dict.item = [val]

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})
  • Retourne maintenant les tableaux à la place.
  • Accéder aux valeurs par qd.key[index] ou qd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

Caractères encodés?

Utilisez decodeURIComponent() pour le deuxième ou les deux groupes.

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})
Exemple:
"?a=1&b=0&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"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"]  // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]


Des commentaires

* !!! Veuillez noter que decodeURIComponent(undefined) retourne la chaîne "undefined" . La solution réside dans une utilisation simple de && , ce qui garantit que decodeURIComponent() n'est pas appelé sur des valeurs indéfinies. (Voir la "solution complète" en haut.)

v = v && decodeURIComponent(v);


Si la chaîne de requête est vide ( location.search == "" ), le résultat est quelque peu trompeur. qd == {"": undefined} . Il est suggéré de vérifier la chaîne de requête avant de lancer la fonction d’analyse liko:

if (location.search) location.search.substr(1).split("&").forEach(...)



Si vous utilisez jQuery, vous pouvez utiliser une bibliothèque, telle que jQuery BBQ: bouton Précédent et bibliothèque de requêtes .

... jQuery BBQ fournit une .deparam() complète .deparam() , ainsi que des méthodes de gestion de l'état de hachage et des utilitaires d'analyse et de fusion de chaînes de requête fragment / query.

Edit: Ajout de Deparam Exemple:

 var DeparamExample = function() {
            var params = $.deparam.querystring();

            //nameofparam is the name of a param from url
            //code below will get param if ajax refresh with hash
            if (typeof params.nameofparam == 'undefined') {
                params = jQuery.deparam.fragment(window.location.href);
            }
            
            if (typeof params.nameofparam != 'undefined') {
                var paramValue = params.nameofparam.toString();
                  
            }
        };

Si vous voulez simplement utiliser JavaScript, vous pouvez utiliser ...

var getParamValue = (function() {
    var params;
    var resetParams = function() {
            var query = window.location.search;
            var regex = /[?&;](.+?)=([^&;]+)/g;
            var match;

            params = {};

            if (query) {
                while (match = regex.exec(query)) {
                    params[match[1]] = decodeURIComponent(match[2]);
                }
            }    
        };

    window.addEventListener
    && window.addEventListener('popstate', resetParams);

    resetParams();

    return function(param) {
        return params.hasOwnProperty(param) ? params[param] : null;
    }

})();​

En raison de la nouvelle API d'historique HTML et en particulier de history.pushState() et history.replaceState() , l'URL peut changer, ce qui invalidera le cache des paramètres et leurs valeurs.

Cette version mettra à jour son cache interne de paramètres chaque fois que l'historique sera modifié.




Voici ce que je peux faire pour transformer l'excellente solution d'Andy E en un plugin à part entière de jQuery:

;(function ($) {
    $.extend({      
        getQueryString: function (name) {           
            function parseParams() {
                var params = {},
                    e,
                    a = /\+/g,  // Regex for replacing addition symbol with a space
                    r = /([^&=]+)=?([^&]*)/g,
                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
                    q = window.location.search.substring(1);

                while (e = r.exec(q))
                    params[d(e[1])] = d(e[2]);

                return params;
            }

            if (!this.queryStringParams)
                this.queryStringParams = parseParams(); 

            return this.queryStringParams[name];
        }
    });
})(jQuery);

La syntaxe est la suivante:

var someVar = $.getQueryString('myParam');

Le meilleur des deux mondes!




J'aime la solution de Ryan Phelan . Mais je ne vois pas l'intérêt d'étendre jQuery pour cela? Il n’ya pas d’utilisation de la fonctionnalité jQuery.

D'autre part, j'aime la fonction intégrée de Google Chrome: window.location.getParameter.

Alors pourquoi ne pas l'utiliser? D'accord, les autres navigateurs n'en ont pas. Créons donc cette fonction si elle n’existe pas:

if (!window.location.getParameter ) {
  window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&=]+)=?([^&]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
  };
}

Cette fonction est plus ou moins celle de Ryan Phelan, mais elle est enveloppée différemment: nom clair et aucune dépendance d’autres bibliothèques javascript. Plus d'informations sur cette fonction sur mon blog .




Keep it simple en code JavaScript simple:

function qs(key) {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars[key];
}

Appelez-le de n'importe où dans le code JavaScript:

var result = qs('someKey');



Du MDN :

function loadPageVar (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(loadPageVar("name"));



J'utilise beaucoup les expressions régulières, mais pas pour cela.

Il me semble plus facile et plus efficace de lire la chaîne de requête une fois dans mon application et de créer un objet à partir de toutes les paires clé / valeur comme:

var search = function() {
  var s = window.location.search.substr(1),
    p = s.split(/\&/), l = p.length, kv, r = {};
  if (l === 0) {return false;}
  while (l--) {
    kv = p[l].split(/\=/);
    r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
  }
  return r;
}();

Pour une URL telle que http://domain.com?param1=val1&param2=val2vous pouvez obtenir leur valeur ultérieurement dans votre code au fur search.param1et à mesure search.param2.




La méthode jQuery de Roshambo ne prenait pas soin de décoder l'URL

http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/

Vient d’ajouter cette possibilité lors de l’ajout de la déclaration de retour

return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;

Vous pouvez maintenant trouver le contenu mis à jour:

$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}



Voici mon édition de cette excellente réponse - avec la possibilité supplémentaire d’analyser les chaînes de requête avec des clés sans valeur.

var url = 'http://sb.com/reg/step1?param';
var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i) {
        var p=a[i].split('=', 2);
        if (p[1]) p[1] = decodeURIComponent(p[1].replace(/\+/g, " "));
        b[p[0]] = p[1];
    }
    return b;
})((url.split('?'))[1].split('&'));

IMPORTANT! Le paramètre pour cette fonction dans la dernière ligne est différent. C'est juste un exemple de la façon dont on peut lui passer une URL arbitraire. Vous pouvez utiliser la dernière ligne de la réponse de Bruno pour analyser l'URL actuelle.

Alors qu'est-ce qui a changé exactement? Avec les http://sb.com/reg/step1?param=résultats, les résultats seront les mêmes. Mais avec l'URL, http://sb.com/reg/step1?paramla solution de Bruno renvoie un objet sans clé, tandis que la mienne renvoie un objet avec clé paramet undefinedvaleur




C’est une fonction que j’ai créée il ya quelque temps et dont je suis assez content. Ce n'est pas sensible à la casse - ce qui est pratique. De plus, si le QS demandé n'existe pas, il renvoie simplement une chaîne vide.

J'utilise une version compressée de cela. Je poste non compressé pour les types novices afin de mieux expliquer ce qui se passe.

Je suis sûr que cela pourrait être optimisé ou réalisé différemment pour un travail plus rapide, mais cela fonctionnait toujours très bien pour ce dont j'avais besoin.

Prendre plaisir.

function getQSP(sName, sURL) {
    var theItmToRtn = "";
    var theSrchStrg = location.search;
    if (sURL) theSrchStrg = sURL;
    var sOrig = theSrchStrg;
    theSrchStrg = theSrchStrg.toUpperCase();
    sName = sName.toUpperCase();
    theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
    var theSrchToken = "&" + sName + "=";
    if (theSrchStrg.indexOf(theSrchToken) != -1) {
        var theSrchTokenLth = theSrchToken.length;
        var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
        var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
        theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
    }
    return unescape(theItmToRtn);
}



Nous venons de publier arg.js , un projet visant à résoudre ce problème une fois pour toutes. Cela a toujours été si difficile, mais maintenant vous pouvez faire:

var name = Arg.get("name");

ou obtenir le tout:

var params = Arg.all();

et si vous vous souciez de la différence entre ?query=trueet #hash=truevous pouvez utiliser les méthodes Arg.query()et Arg.hash().




function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');

    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}​

Et voici comment utiliser cette fonction en supposant que l’URL est

http://dummy.com/?stringtext=jquery&stringword=jquerybyexample

var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');



Related