web-dev-qa-db-fra.com

Comment obtenir des valeurs de chaîne de requête en JavaScript?

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

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

javascripturlpluginsquery-string
2701
Kemal Emin

Mise à jour: septembre 2018

Vous pouvez utiliser RLSearchParams qui est simple et a support décent (mais non complet) du navigateur .

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

Original

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, ' '));
}

Utilisation: 

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

Ceci est une mise à jour basée sur le nouveau RLSearchParams specs pour obtenir le même résultat de manière plus succincte. Voir la réponse intitulée " RLSearchParams " ci-dessous.

7846
Artem Barger

Certaines des solutions affichées ici sont inefficaces. La répétition de la recherche d'expression régulière chaque fois que le script doit accéder à un paramètre est totalement inutile, une seule fonction permettant de scinder les paramètres en un objet de style tableau associatif suffit. Si vous ne travaillez pas avec l'API HTML 5 History, cela n'est nécessaire qu'une fois par chargement de page. Les autres suggestions ici ne parviennent pas non plus à décoder l'URL correctement.

var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

Exemple de chaîne de requête:

?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

Résultat:

 urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
// -> "front"

alert("empty" in urlParams);
// -> true

Cela pourrait facilement être amélioré pour gérer aussi les chaînes de requête de style tableau. Un exemple de ceci est ici , mais comme les paramètres de style tableau ne sont pas définis dans RFC 3986 , je ne polluerai pas cette réponse avec le code source. Pour ceux intéressés par une version "polluée", regardez la réponse de campbeln ci-dessous .

En outre, comme indiqué dans les commentaires, ; est un délimiteur légal pour les paires key=value. Cela nécessiterait une expression rationnelle plus compliquée pour manipuler ; ou &, ce qui est inutile, car j'estime qu'il est rare que ; soit utilisé et je dirais encore plus improbable que les deux soient utilisés. Si vous avez besoin de supporter ; au lieu de &, il suffit de les échanger dans la regex.

<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

Beaucoup plus simple!

1680
Andy E

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 telle que ?topic=123&name=query+string, les éléments suivants seront renvoyés:

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 utilisée: 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 ? ainsi que du hachage #. 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é/la 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 gérant l'échappement et le 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 par rapport à la 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 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 par division : 144 780 ± 2,17% le plus rapide
  • Méthode regex : 13 891 ± 0,85% | 90% plus lent
1255
BrunoLM

Version améliorée de réponse d'Artem Barger :

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

Pour plus d'informations sur les améliorations, voir: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

655
James

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ et Chrome 49+ prennent en charge le RLSearchParams API:

Il existe un google-suggéré RLSearchParams polyfill pour les versions stables de IE.

Ce n'est pas normalisé par W3C , mais c'est un standard de vie par 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 aussi obtenir des paramètres en utilisant 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) {}.

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

559
Paul Sweatte

Juste une autre recommandation. Le plugin Purl permet de récupérer toutes les parties de l'URL, y compris l'ancre, l'hôte, etc.

Il peut être utilisé avec ou sans jQuery.

L'utilisation est très simple et cool:

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

Cependant, à compter du 11 novembre 2014, Purl n'est plus mis à jour et l'auteur recommande l'utilisation de RI.js . Le plugin jQuery est différent en ce sens qu'il se concentre sur les éléments - pour une utilisation avec des chaînes, utilisez simplement URI directement, avec ou sans jQuery. Un code similaire ressemblerait à cela, une documentation plus complète ici :

var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'
400
AlfaTeK

tl; dr

Une solution rapide complète , qui gère des clés à valeurs multiples et caractères codé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)})
_
_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 Assignations de destruction , Fonctions de flèche , Chaînes de modèle

_"?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 aux différentes parties d'une URL, utilisez location.(search|hash).

La solution la plus facile (factice)

_var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
_
  • Poignées clés vides correctement.
  • Les dérogations multi-clés avec dernier 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]_

_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]]})
_
  • Maintenant retourne tableaux au lieu.
  • 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]})
_
_"?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"]
_


À partir de commentaires

* !!! Veuillez noter que decodeURIComponent(undefined) renvoie la chaîne _"undefined"_. La solution réside dans une utilisation simple de && , 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(...)
_
235
Qwerty

Roshambo sur snipplr.com a un script simple pour réaliser ceci décrit dans Obtenir les paramètres d'URL avec jQuery | Improved. Avec son script, vous pouvez également extraire facilement les paramètres souhaités.

Voici le Gist:

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

Ensuite, récupérez simplement vos paramètres dans la chaîne de requête.

Donc, si l'URL/chaîne de requête était xyz.com/index.html?lang=de.

Appelez simplement var langval = $.urlParam('lang'); et vous l'aurez.

UZBEKJON a également un excellent article de blog à ce sujet, Obtenir les paramètres et les valeurs d'URL avec jQuery.

216
brandonjp

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 méthode complète .deparam(), ainsi que des méthodes de gestion d'état de hachage et des méthodes utilitaires d'analyse et de fusion de chaînes de requête fragment/requête.

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 changement d’historique.

166
alex

Il suffit d’utiliser deux divisions :

function get(n) {
    var half = location.search.split(n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

Je lisais toutes les réponses précédentes et plus complètes. Mais je pense que c'est la méthode la plus simple et la plus rapide. Vous pouvez vérifier dans ce jsPerf benchmark

Pour résoudre le problème dans le commentaire de Rup, ajoutez une division conditionnelle en remplaçant la première ligne par la suivante. Mais la précision absolue signifie qu’elle est maintenant plus lente que l’expression rationnelle (voir jsPerf ).

function get(n) {
    var half = location.search.split('&' + n + '=')[1];
    if (!half) half = location.search.split('?' + n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

Donc, si vous savez que vous ne rencontrerez pas le contre-cas de Rup, cela l'emportera. Sinon, regexp.

ou si vous avez le contrôle de la chaîne de requête et pouvez garantir qu'une valeur que vous essayez d'obtenir ne contiendra jamais de caractères encodés en URL (leur présence dans une valeur serait une mauvaise idée) - vous pouvez utiliser la version légèrement plus simplifiée et lisible suivante de la 1ère option:

    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
99
Martin Borthiry

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!

94
Ryan Phelan

Si vous manipulez davantage d'URL que simplement d'analyser la chaîne de requête, vous pouvez trouver RI.js utile. C'est une bibliothèque pour manipuler les URL - et vient avec tous les cloches et sifflets. (Désolé pour l'auto-publicité ici)

convertir votre chaîne de requête en carte:

var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
  "foo": ["bar", "world"],
  "bar": "baz"
}

(URI.js "corrige" également de mauvaises chaînes de requête telles que ?&foo&&bar=baz& à ?foo&bar=baz)

76
rodneyrehm

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

Par contre, j'aime bien la fonction intégrée à 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 .

60
Anatoly Mironov

Voici un moyen rapide d'obtenir un objet similaire au tableau PHP $ _GET :

function get_query(){
    var url = location.search;
    var qs = url.substring(url.indexOf('?') + 1).split('&');
    for(var i = 0, result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][1]);
    }
    return result;
}

Usage:

var $_GET = get_query();

Pour la chaîne de requête x=5&y&z=hello&x=6, ceci retourne l'objet:

{
  x: "6",
  y: undefined,
  z: "hello"
}
53
Paulpro

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');
52
Sagiv Ofek

Ce sont toutes d'excellentes réponses, mais j'avais besoin de quelque chose d'un peu plus robuste et je pensais que vous aimeriez tous avoir ce que j'ai créé.

C'est une méthode de bibliothèque simple qui dissèque et manipule les paramètres d'URL. La méthode statique comporte les sous-méthodes suivantes pouvant être appelées sur l'URL du sujet:

  • getHost
  • getPath
  • getHash
  • setHash
  • getParams
  • getQuery
  • setParam
  • getParam
  • hasParam
  • removeParam

Exemple:

URLParser(url).getParam('myparam1')

var url = "http://www.test.com/folder/mypage.html?myparam1=1&myparam2=2#something";

function URLParser(u){
    var path="",query="",hash="",params;
    if(u.indexOf("#") > 0){
        hash = u.substr(u.indexOf("#") + 1);
        u = u.substr(0 , u.indexOf("#"));
    }
    if(u.indexOf("?") > 0){
        path = u.substr(0 , u.indexOf("?"));
        query = u.substr(u.indexOf("?") + 1);
        params= query.split('&');
    }else
        path = u;
    return {
        getHost: function(){
            var hostexp = /\/\/([\w.-]*)/;
            var match = hostexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getPath: function(){
            var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/;
            var match = pathexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getHash: function(){
            return hash;
        },
        getParams: function(){
            return params
        },
        getQuery: function(){
            return query;
        },
        setHash: function(value){
            if(query.length > 0)
                query = "?" + query;
            if(value.length > 0)
                query = query + "#" + value;
            return path + query;
        },
        setParam: function(name, value){
            if(!params){
                params= new Array();
            }
            params.Push(name + '=' + value);
            for (var i = 0; i < params.length; i++) {
                if(query.length > 0)
                    query += "&";
                query += params[i];
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
        getParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return decodeURIComponent(pair[1]);
                }
            }
            console.log('Query variable %s not found', name);
        },
        hasParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return true;
                }
            }
            console.log('Query variable %s not found', name);
        },
        removeParam: function(name){
            query = "";
            if(params){
                var newparams = new Array();
                for (var i = 0;i < params.length;i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) != name)
                          newparams .Push(params[i]);
                }
                params = newparams;
                for (var i = 0; i < params.length; i++) {
                    if(query.length > 0)
                        query += "&";
                    query += params[i];
                }
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
    }
}


document.write("Host: " + URLParser(url).getHost() + '<br>');
document.write("Path: " + URLParser(url).getPath() + '<br>');
document.write("Query: " + URLParser(url).getQuery() + '<br>');
document.write("Hash: " + URLParser(url).getHash() + '<br>');
document.write("Params Array: " + URLParser(url).getParams() + '<br>');
document.write("Param: " + URLParser(url).getParam('myparam1') + '<br>');
document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '<br>');

document.write(url + '<br>');

// Remove the first parameter
url = URLParser(url).removeParam('myparam1');
document.write(url + ' - Remove the first parameter<br>');

// Add a third parameter
url = URLParser(url).setParam('myparam3',3);
document.write(url + ' - Add a third parameter<br>');

// Remove the second parameter
url = URLParser(url).removeParam('myparam2');
document.write(url + ' - Remove the second parameter<br>');

// Add a hash
url = URLParser(url).setHash('newhash');
document.write(url + ' - Set Hash<br>');

// Remove the last parameter
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove the last parameter<br>');

// Remove a parameter that doesn't exist
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove a parameter that doesn\"t exist<br>');
46
Bernesto

De le MDN :

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

alert(loadPageVar("name"));
43
orip

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=val2, vous pouvez obtenir leur valeur ultérieurement dans votre code sous la forme search.param1 et search.param2.

39
Mic

Code golf:

var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a) {
    var s = a[i].split("=");
    a[i]  = a[unescape(s[0])] = unescape(s[1]);
}

Affichez-le!

for (i in a) {
    document.write(i + ":" + a[i] + "<br/>");   
};

Sur mon Mac: test.htm?i=can&has=cheezburger s'affiche.

0:can
1:cheezburger
i:can
has:cheezburger
39
shanimal

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

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

Vient d'ajouter cette capacité, tout en ajoutant dans l'instruction de retour

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

Vous pouvez maintenant trouver le Gist 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;
}
38
Mohammad Arif
function GET() {
        var data = [];
        for(x = 0; x < arguments.length; ++x)
            data.Push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])
                return data;
    }


example:
data = GET("id","name","foo");
query string : ?id=3&name=jet&foo=b
returns:
    data[0] // 3
    data[1] // jet
    data[2] // b
or
    alert(GET("id")[0]) // return 3
38
Jet

J'aime celui-ci (tiré de jquery-howto.blogspot.co.uk):

// get an array with all querystring values
// example: var valor = getUrlVars()["valor"];
function getUrlVars() {
    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;
}

Ça marche bien pour moi.

36
Tomamais

Voici mon édition à 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 url http://sb.com/reg/step1?param= les résultats seront les mêmes. Mais avec url http://sb.com/reg/step1?param, la solution de Bruno renvoie un objet sans clé, tandis que la mienne renvoie un objet avec la clé param et undefined.

36
skaurus

J'avais besoin d'un objet de la chaîne de requête et je déteste beaucoup de code. Ce n'est peut-être pas le plus robuste de l'univers, mais ce ne sont que quelques lignes de code.

var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
    q[i.split('=')[0]]=i.split('=')[1];
});

Une URL telle que this.htm?hello=world&foo=bar créera:

{hello:'world', foo:'bar'}
34
tim

Voici une version étendue de la version "Gérer les chaînes de requête de style tableau" associée à Andy E. Correction d'un bug (?key=1&key[]=2&key[]=3; 1 est perdu et remplacé par [2,3]), quelques améliorations de performance mineures (re-décodage des valeurs, recalcul de la position "[", etc.) et ajout d'un certain nombre d'améliorations (fonctionnalisées, prise en charge de ?key=1&key=2, prise en charge de ; délimiteurs). J'ai laissé les variables assez courtes, mais j'ai ajouté de nombreux commentaires pour les rendre lisibles (oh, et j'ai réutilisé v au sein des fonctions locales, désolé si cela est déroutant;).

Il traitera la chaîne de requête suivante ...

? test = Hello & person = neek & person [] = jeff & person [] = jim & person [extra] = john & test3 & nocache = 1398914891264

... en faire un objet qui ressemble à ...

{
    "test": "Hello",
    "person": {
        "0": "neek",
        "1": "jeff",
        "2": "jim",
        "length": 3,
        "extra": "john"
    },
    "test3": "",
    "nocache": "1398914891264"
}

Comme vous pouvez le voir ci-dessus, cette version gère certaines mesures de tableaux "malformés", c'est-à-dire - person=neek&person[]=jeff&person[]=jim ou person=neek&person=jeff&person=jim, car la clé est identifiable et valide (au moins dans dotNet NameValueCollection.Add ):

Si la clé spécifiée existe déjà dans l'instance cible NameValueCollection, la valeur spécifiée est ajoutée à la liste de valeurs existante, séparée par des virgules, sous la forme "valeur1, valeur2, valeur3".

Il semble que le jury est un peu absent sur des clés répétées car il n'y a pas de spécifications. Dans ce cas, plusieurs clés sont stockées sous forme de (faux) tableau. Mais notez que je ne traite pas les valeurs basées sur des virgules en tableaux.

Le code: 

getQueryStringKey = function(key) {
    return getQueryStringAsObject()[key];
};


getQueryStringAsObject = function() {
    var b, cv, e, k, ma, sk, v, r = {},
        d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue)
        q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)),
        s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter:   /([^&=]+)=?([^&]*)/g
    ;

    //# ma(make array) out of the v(alue)
    ma = function(v) {
        //# If the passed v(alue) hasn't been setup as an object
        if (typeof v != "object") {
            //# Grab the cv(current value) then setup the v(alue) as an object
            cv = v;
            v = {};
            v.length = 0;

            //# If there was a cv(current value), .Push it into the new v(alue)'s array
            //#     NOTE: This may or may not be 100% logical to do... but it's better than loosing the original value
            if (cv) { Array.prototype.Push.call(v, cv); }
        }
        return v;
    };

    //# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)...
    while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) {
        //# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry) 
        b = e[1].indexOf("[");
        v = d(e[2]);

        //# As long as this is NOT a hash[]-style key-value e(ntry)
        if (b < 0) { //# b == "-1"
            //# d(ecode) the simple k(ey)
            k = d(e[1]);

            //# If the k(ey) already exists
            if (r[k]) {
                //# ma(make array) out of the k(ey) then .Push the v(alue) into the k(ey)'s array in the r(eturn value)
                r[k] = ma(r[k]);
                Array.prototype.Push.call(r[k], v);
            }
            //# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value)
            else {
                r[k] = v;
            }
        }
        //# Else we've got ourselves a hash[]-style key-value e(ntry) 
        else {
            //# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locations
            k = d(e[1].slice(0, b));
            sk = d(e[1].slice(b + 1, e[1].indexOf("]", b)));

            //# ma(make array) out of the k(ey) 
            r[k] = ma(r[k]);

            //# If we have a sk(sub-key), plug the v(alue) into it
            if (sk) { r[k][sk] = v; }
            //# Else .Push the v(alue) into the k(ey)'s array
            else { Array.prototype.Push.call(r[k], v); }
        }
    }

    //# Return the r(eturn value)
    return r;
};
31
Campbeln

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);
}
31
Clint

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=true et #hash=true, vous pouvez utiliser les méthodes Arg.query() et Arg.hash().

27
Mat Ryer

Le problème avec la réponse principale à cette question est qu'il ne s'agit pas de paramètres pris en charge placés après #, mais il est parfois nécessaire d'obtenir cette valeur également.

J'ai modifié la réponse pour lui permettre d'analyser une chaîne de requête complète avec un signe dièse également:

var getQueryStringData = function(name) {
    var result = null;
    var regexS = "[\\?&#]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec('?' + window.location.href.split('?')[1]);
    if (results != null) {
        result = decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    return result;
};
27
Ph0en1x
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');
25
gewel
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
  • Paire clé/valeur normale (?param=value)
  • Clés sans valeur (?param: pas de signe égal ni de valeur)
  • Touches avec valeur vide (?param=: signe égal, mais pas de valeur à droite du signe égal)
  • Touches répétées (?param=1&param=2)
  • Supprime les clés vides (?&&: aucune clé ou valeur)

Code:

  • var queryString = window.location.search || '';
var keyValPairs = [];
var params      = {};
queryString     = queryString.substr(1);

if (queryString.length)
{
   keyValPairs = queryString.split('&');
   for (pairNum in keyValPairs)
   {
      var key = keyValPairs[pairNum].split('=')[0];
      if (!key.length) continue;
      if (typeof params[key] === 'undefined')
         params[key] = [];
      params[key].Push(keyValPairs[pairNum].split('=')[1]);
   }
}

Comment appeler:

  • params['key'];  // returns an array of values (1..n)

Sortie:

  • key            ["value"]
keyemptyvalue  [""]
keynovalue     [undefined, "nowhasvalue"]
20
vol7ron

Si vous utilisez Browserify, vous pouvez utiliser le module url de Node.js :

var url = require('url');

url.parse('http://example.com/?bob=123', true).query;

// returns { "bob": "123" }

Lectures supplémentaires: URL Node.js v0.12.2 Manuel et documentation

EDIT: Vous pouvez utiliser l'interface URL , elle est assez largement adoptée dans la quasi-totalité du nouveau navigateur et si le code est pour fonctionner sur un ancien navigateur, vous pouvez utiliser un polyfill comme celui-ci . Voici un exemple de code sur l'utilisation de l'interface URL pour obtenir des paramètres de requête (ou paramètres de recherche)

const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob');

Vous pouvez également utiliser URLSearchParams pour cela, voici exemple de MDN pour le faire avec URLSearchParams:

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"
20
nkh

J'ai développé une petite bibliothèque en utilisant les techniques énumérées ici pour créer une solution facile à utiliser et rapide pour les problèmes de anyones; Il peut être trouvé ici:

https://github.com/Nijikokun/query-js

Utilisation

Récupération d'un paramètre/clé spécifique:

query.get('param');

Utilisation du générateur pour récupérer l'objet entier:

var storage = query.build();
console.log(storage.param);

et beaucoup plus ... consultez le lien github pour plus d'exemples.

Caractéristiques

  1. Mise en cache sur le décodage et les paramètres
  2. Prend en charge les chaînes de requête de hachage #hello?page=3
  3. Prend en charge le passage de requêtes personnalisées
  4. Prise en charge des paramètres tableau/objet user[]="jim"&user[]="bob"
  5. Prend en charge la gestion vide &&
  6. Prend en charge les paramètres de déclaration sans valeurs name&hello="world"
  7. Prend en charge les paramètres répétés param=1&param=2
  8. Source propre, compacte et lisible 4kb
  9. AMD, Require, Node support
20
Nijikokun

Une ligne pour obtenir la requête:

var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];
20
Anoop

Une méthode jQuery très légère:

var qs = window.location.search.replace('?','').split('&'),
    request = {};
$.each(qs, function(i,v) {
    var initial, pair = v.split('=');
    if(initial = request[pair[0]]){
        if(!$.isArray(initial)) {
            request[pair[0]] = [initial]
        }
        request[pair[0]].Push(pair[1]);
    } else {
        request[pair[0]] = pair[1];
    }
    return;
});
console.log(request);

Et pour alerter, par exemple? Q

alert(request.q)
17
Roi

Voici ma version de la chaîne de requête analysant le code sur GitHub .

Il est "préfixé" avec jQuery. *, Mais la fonction d'analyse elle-même n'utilise pas jQuery. C'est assez rapide, mais reste ouvert pour quelques optimisations de performances simples.

De plus, il supporte l'encodage de listes et de tables de hachage dans l'URL, comme:

arr[]=10&arr[]=20&arr[]=100

ou

hash[key1]=hello&hash[key2]=moto&a=How%20are%20you

jQuery.toQueryParams = function(str, separator) {
    separator = separator || '&'
    var obj = {}
    if (str.length == 0)
        return obj
    var c = str.substr(0,1)
    var s = c=='?' || c=='#'  ? str.substr(1) : str; 

    var a = s.split(separator)
    for (var i=0; i<a.length; i++) {
        var p = a[i].indexOf('=')
        if (p < 0) {
            obj[a[i]] = ''
            continue
        }
        var k = decodeURIComponent(a[i].substr(0,p)),
            v = decodeURIComponent(a[i].substr(p+1))

        var bps = k.indexOf('[')
        if (bps < 0) {
            obj[k] = v
            continue;
        } 

        var bpe = k.substr(bps+1).indexOf(']')
        if (bpe < 0) {
            obj[k] = v
            continue;
        }

        var bpv = k.substr(bps+1, bps+bpe-1)
        var k = k.substr(0,bps)
        if (bpv.length <= 0) {
            if (typeof(obj[k]) != 'object') obj[k] = []
            obj[k].Push(v)
        } else {
            if (typeof(obj[k]) != 'object') obj[k] = {}
            obj[k][bpv] = v
        }
    }
    return obj;

}
16
Vadim

Voici ce que j'utilise:

/**
 * Examples:
 * getUrlParams()['myparam']    // url defaults to the current page
 * getUrlParams(url)['myparam'] // url can be just a query string
 *
 * Results of calling `getUrlParams(url)['myparam']` with various urls:
 * example.com                               (undefined)
 * example.com?                              (undefined)
 * example.com?myparam                       (empty string)
 * example.com?myparam=                      (empty string)
 * example.com?myparam=0                     (the string '0')
 * example.com?myparam=0&myparam=override    (the string 'override')
 *
 * Origin: http://stackoverflow.com/a/23946023/2407309
 */
function getUrlParams (url) {
    var urlParams = {} // return value
    var queryString = getQueryString()
    if (queryString) {
        var keyValuePairs = queryString.split('&')
        for (var i = 0; i < keyValuePairs.length; i++) {
            var keyValuePair = keyValuePairs[i].split('=')
            var paramName = keyValuePair[0]
            var paramValue = keyValuePair[1] || ''
            urlParams[paramName] = decodeURIComponent(paramValue.replace(/\+/g, ' '))
        }
    }
    return urlParams // functions below
    function getQueryString () {
        var reducedUrl = url || window.location.search
        reducedUrl = reducedUrl.split('#')[0] // Discard fragment identifier.
        var queryString = reducedUrl.split('?')[1]
        if (!queryString) {
            if (reducedUrl.search('=') !== false) { // URL is a query string.
                queryString = reducedUrl
            }
        }
        return queryString
    } // getQueryString
} // getUrlParams

Retourner 'override' plutôt que '0' dans le dernier cas le rend cohérent avec PHP. Fonctionne dans IE7.

12
Vladimir Kornea

Je préférerais utiliser split() au lieu de Regex pour cette opération:

function getUrlParams() {
    var result = {};
    var params = (window.location.search.split('?')[1] || '').split('&');
    for(var param in params) {
        if (params.hasOwnProperty(param)) {
            var paramParts = params[param].split('=');
            result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");
        }
    }
    return result;
}
11
Eneko Alonso

Celui-ci fonctionne bien

function getQuerystring(key) {
    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 (pair[0] == key) {
            return pair[1];
        }
    }
}

pris de ici

11
IT ppl

Pour ceux qui veulent une méthode courte (avec des limitations):

location.search.split('myParameter=')[1]
10
George

Lit tous les paramètres de la chaîne de requête, y compris les valeurs des cases à cocher (tableaux).

Compte tenu de l'utilisation correcte et normale des paramètres GET, la plupart des fonctions que je vois manquantes sont la prise en charge des tableaux et la suppression des données de hachage.

Alors j'ai écrit cette fonction:

function qs(a){
 if(!a)return {};
 a=a.split('#')[0].split('&');
 var b=a.length,c={},d,k,v;
 while(b--){
  d=a[b].split('=');
  k=d[0].replace('[]',''),v=decodeURIComponent(d[1]||'');
  c[k]?typeof c[k]==='string'?(c[k]=[v,c[k]]):(c[k].unshift(v)):c[k]=v;
 }
 return c
}

En utilisant des opérateurs raccourcis & while--, la performance devrait être très bonne.

Assistance:

  1. Valeurs vides ( clé =/clé )
  2. Valeur clé ( clé = valeur )
  3. Tableaux ( clé [] = valeur )
  4. Hash ( la balise de hachage est fractionnée )

Notes:

Il ne supporte pas les tableaux d'objets (key [key] = value)

Si l'espace est +, il reste un +.

Ajoutez .replace(/\+/g, " ") si vous en avez besoin.

Utilisation: 

qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')

Retour: 

{
    "empty": "",
    "key": "value",
    "array": [
        "1",
        "2"
    ]
}

Démo:

http://jsfiddle.net/ZQMrt/1/

Info

Si vous ne comprenez pas quelque chose ou si vous ne pouvez pas lire la fonction, demandez simplement. Je suis heureux d'expliquer ce que j'ai fait ici.

Si vous pensez que la fonction est illisible et incontrôlable, je suis heureux de la réécrire pour vous, mais considérez que les opérateurs raccourcis et bits sont toujours plus rapides qu'une syntaxe standard (peut-être en savoir plus sur les opérateurs raccourcis et bits le livre ECMA-262 ou utilisez votre moteur de recherche préféré). Réécrire le code dans une syntaxe standard lisible entraîne une perte de performance.

10
cocco
function getUrlVar(key){
    var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); 
    return result && unescape(result[1]) || ""; 
}

https://Gist.github.com/1771618

8
alkos333

Cette fonction convertit la chaîne de requête en objet de type JSON. Elle gère également les paramètres sans valeur et les valeurs multiples:

"use strict";
function getQuerystringData(name) {
    var data = { };
    var parameters = window.location.search.substring(1).split("&");
    for (var i = 0, j = parameters.length; i < j; i++) {
        var parameter = parameters[i].split("=");
        var parameterName = decodeURIComponent(parameter[0]);
        var parameterValue = typeof parameter[1] === "undefined" ? parameter[1] : decodeURIComponent(parameter[1]);
        var dataType = typeof data[parameterName];
        if (dataType === "undefined") {
            data[parameterName] = parameterValue;
        } else if (dataType === "array") {
            data[parameterName].Push(parameterValue);
        } else {
            data[parameterName] = [data[parameterName]];
            data[parameterName].Push(parameterValue);
        }
    }
    return typeof name === "string" ? data[name] : data;
}

Nous effectuons une vérification de undefined sur parameter[1] car decodeURIComponent renvoie la chaîne "indéfini" si la variable est undefined, et c'est faux.

Usage:

"use strict";
var data = getQuerystringData();
var parameterValue = getQuerystringData("parameterName");
6
Albireo

Essaye ça:

String.prototype.getValueByKey = function(k){
    var p = new RegExp('\\b'+k+'\\b','gi');
    return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p)+k.length+1).substr(0,this.substr(this.search(p)+k.length+1).search(/(&|;|$)/))) : "";
};

Alors appelle ça comme ça:

if(location.search != "") location.search.getValueByKey("id");

Vous pouvez utiliser ceci pour cookies également:

if(navigator.cookieEnabled) document.cookie.getValueByKey("username");

Cela ne fonctionne que pour les chaînes qui ont key=value[&|;|$]... ne fonctionneront pas sur les objets/tableaux.

Si vous ne pas voulez utiliser String.prototype ... déplacez-le vers une fonction et transmettez la chaîne en tant qu'argument

6
user981090

J'ai utilisé ce code (JavaScript) pour obtenir ce qui est transmis via l'URL:

function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                vars[key] = value;
            });
            return vars;
        }

Ensuite, pour affecter la valeur à une variable, il vous suffit de spécifier le paramètre que vous voulez obtenir, c'est-à-dire si l'URL est example.com/?I=1&p=2&f=3

Vous pouvez le faire pour obtenir les valeurs:

var getI = getUrlVars()["I"];
var getP = getUrlVars()["p"];
var getF = getUrlVars()["f"];

alors les valeurs seraient:

getI = 1, getP = 2 and getF = 3
6
user2579312

Le code suivant va créer un objet qui a deux méthodes:

  1. isKeyExist: Vérifier si un paramètre particulier existe
  2. getValue: Obtenir la valeur d'un paramètre particulier.

var QSParam = new function() {
       var qsParm = {};
       var query = window.location.search.substring(1);
       var params = query.split('&');
       for (var i = 0; i < params.length; i++) {
           var pos = params[i].indexOf('=');
           if (pos > 0) {
               var key = params[i].substring(0, pos);
               var val = params[i].substring(pos + 1);
               qsParm[key] = val;
           }
       }
       this.isKeyExist = function(query){
           if(qsParm[query]){
               return true;
           }
           else{
              return false;
           }
       };
       this.getValue = function(query){
           if(qsParm[query])
           {
               return qsParm[query];
           }
           throw "URL does not contain query "+ query;
       }
};
6
Anoop

La fonction suivante renvoie une version d'objet de votre queryString. Vous pouvez simplement écrire obj.key1 et obj.key2 pour accéder aux valeurs de key1 et key2 dans le paramètre.

function getQueryStringObject()
{
    var querystring = document.location.search.replace('?','').split( '&' );
    var objQueryString={};
    var key="",val="";
    if(typeof querystring == 'undefined')
    {
        return (typeof querystring);
    }
    for(i=0;i<querystring.length;i++)
    {
        key=querystring[i].split("=")[0];
        val=querystring[i].split("=")[1];
        objQueryString[key] = val;
    }
    return objQueryString;
}

Et pour utiliser cette fonction, vous pouvez écrire

var obj= getQueryStringObject();
alert(obj.key1);
5
Imdad

Voici mon propre point de vue. Cette première fonction décode une chaîne d'URL en un objet de paires nom/valeur:

url_args_decode = function (url) {
  var args_enc, el, i, nameval, ret;
  ret = {};
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  // strip off initial ? on search and split
  args_enc = el.search.substring(1).split('&');
  for (i = 0; i < args_enc.length; i++) {
    // convert + into space, split on =, and then decode 
    args_enc[i].replace(/\+/g, ' ');
    nameval = args_enc[i].split('=', 2);
    ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);
  }
  return ret;
};

Et en prime, si vous modifiez certains arguments, vous pouvez utiliser cette seconde fonction pour remettre le tableau d'arguments dans la chaîne d'URL:

url_args_replace = function (url, args) {
  var args_enc, el, name;
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  args_enc = [];
  // encode args to go into url
  for (name in args) {
    if (args.hasOwnProperty(name)) {
      name = encodeURIComponent(name);
      args[name] = encodeURIComponent(args[name]);
      args_enc.Push(name + '=' + args[name]);
    }
  }
  if (args_enc.length > 0) {
    el.search = '?' + args_enc.join('&');
  } else {
    el.search = '';
  }
  return el.href;
};
5
BMitch

J'ai fait une petite bibliothèque d'URL pour mes besoins ici: https://github.com/Mikhus/jsurl

C'est une manière plus courante de manipuler les URL en JavaScript. En attendant, il est vraiment léger (minifié et compressé <1 Ko) et possède une API très simple et propre. Et il n’a besoin d’aucune autre bibliothèque pour fonctionner.

En ce qui concerne la question initiale, c'est très simple à faire:

var u = new Url; // Current document URL
// or
var u = new Url('http://user:[email protected]:8080/some/path?foo=bar&bar=baz#anchor');

// Looking for query string parameters
alert( u.query.bar);
alert( u.query.foo);

// Modifying query string parameters
u.query.foo = 'bla';
u.query.woo = ['hi', 'hey']

alert(u.query.foo);
alert(u.query.woo);
alert(u);
5
Mikhus

Si vous souhaitez des paramètres de style de tableau, RL.js prend en charge les paramètres de style de tableau imbriqués de manière arbitraire, ainsi que les index de chaînes (maps). Il gère également le décodage des URL.

url.get("val[0]=zero&val[1]=one&val[2]&val[3]=&val[4]=four&val[5][0]=n1&val[5][1]=n2&val[5][2]=n3&key=val", {array:true});
// Result
{
    val: [
        'zero',
        'one',
        true,
        '',
        'four',
        [ 'n1', 'n2', 'n3' ]
    ]
    key: 'val'
}
4
Kevin Cox

Il existe de nombreuses solutions pour récupérer les valeurs de requête URI, je préfère celle-ci car elle est courte et fonctionne très bien:

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}
4
BlueMark

Une solution simple avec JavaScript simple et expressions régulières :

alert(getQueryString("p2"));

function getQueryString (Param) {
    return decodeURI("http://www.example.com/?p1=p11&p2=p2222".replace(new RegExp("^(?:.*[&?]" + encodeURI(Param).replace(/[.+*]/g, "$&") + "(?:=([^&]*))?)?.*$", "i"), "$1"));
}

JsFiddle

4
Saidulu Buchhala

Il existe un joli petit utilitaire url avec des sucres froids:

http://www.example.com/path/index.html?silly=willy#chucky=cheese

url();            // http://www.example.com/path/index.html?silly=willy#chucky=cheese
url('domain');    // example.com
url('1');         // path
url('-1');        // index.html
url('?');         // silly=willy
url('?silly');    // willy
url('?poo');      // (an empty string)
url('#');         // chucky=cheese
url('#chucky');   // cheese
url('#poo');      // (an empty string)

Découvrez d'autres exemples et téléchargez-les ici: https://github.com/websanova/js-url#url

4
Rob

C'est la fonction la plus simple et la plus petite de JavaScript pour obtenir une valeur de paramètre de chaîne depuis l'URL 

/* THIS FUNCTION IS TO FETCH INT PARAMETER VALUES */

function getParameterint(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=parseInt(url.replace(param+"=",""));
            alert(n); 
}
getParameteraint("page");
getParameteraint("pagee");

/*THIS FUNCTION IS TO FETCH STRING PARAMETER*/
function getParameterstr(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=url.replace(param+"=","");
            alert(n); 
}
getParameterstr("str");

Source et DEMO: http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter- in-javascript.html

4
Code Spy

Il y a une implémentation robuste dans le source de Node.js
https://github.com/joyent/node/blob/master/lib/querystring.js

Aussi, TJ's qs effectue l'analyse syntaxique des paramètres imbriqués
https://github.com/visionmedia/node-querystring

4
clyfe

Si vous avez nderscore.js ou lodash , une manière rapide et sale de faire cela est la suivante:

_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));
4
acjay
var getUrlParameters = function (name, url) {
    if (!name) {
        return undefined;
    }

    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    url = url || location.search;

    var regex = new RegExp('[\\?&#]' + name + '=?([^&#]*)', 'gi'), result, resultList = [];

    while (result = regex.exec(url)) {
        resultList.Push(decodeURIComponent(result[1].replace(/\+/g, ' ')));
    }

    return resultList.length ? resultList.length === 1 ? resultList[0] : resultList : undefined;
};
4
kayz1

J'ai pris cette réponse et ajouté le support pour éventuellement transmettre l'URL en tant que paramètre; retombe à window.location.search. Cela est évidemment utile pour obtenir les paramètres de chaîne de requête à partir d'URL autres que la page en cours:

(function($, undef) {
  $.QueryString = function(url) {
    var pairs, qs = null, index, map = {};
    if(url == undef){
      qs = window.location.search.substr(1);
    }else{
      index = url.indexOf('?');
      if(index == -1) return {};
      qs = url.substring(index+1);
    }
    pairs = qs.split('&');
    if (pairs == "") return {};
    for (var i = 0; i < pairs.length; ++i)
    {
      var p = pairs[i].split('=');
      if(p.length != 2) continue;
      map[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return map;
  };
})(jQuery);
4
mynameistechno

Je pense qu’il s’agit là d’un moyen précis et concis (modifié de http://css-tricks.com/snippets/javascript/get-url-variables/ ):

function getQueryVariable(variable) {

    var query = window.location.search.substring(1),            // Remove the ? from the query string.
        vars = query.split("&");                                // Split all values by ampersand.

    for (var i = 0; i < vars.length; i++) {                     // Loop through them...
        var pair = vars[i].split("=");                          // Split the name from the value.
        if (pair[0] == variable) {                              // Once the requested value is found...
            return ( pair[1] == undefined ) ? null : pair[1];   // Return null if there is no value (no equals sign), otherwise return the value.
        }
    }

    return undefined;                                           // Wasn't found.

}
4
Gabriel Ryan Nahmias

C'est une méthode très simple pour obtenir une valeur de paramètre (chaîne de requête)

Utilisez la fonction gV(para_name) pour récupérer sa valeur

var a=window.location.search;
a=a.replace(a.charAt(0),""); //Removes '?'
a=a.split("&");

function gV(x){
 for(i=0;i<a.length;i++){
  var b=a[i].substr(0,a[i].indexOf("="));
  if(x==b){
   return a[i].substr(a[i].indexOf("=")+1,a[i].length)}
3
Ankit_Shah55

Si vous ne souhaitez pas utiliser une bibliothèque JavaScript, vous pouvez utiliser les fonctions de chaîne JavaScript pour analyser window.location. Conservez ce code dans un fichier .js externe et vous pourrez l’utiliser encore et encore dans différents projets.

// Example - window.location = "index.htm?name=bob";

var value = getParameterValue("name");

alert("name = " + value);

function getParameterValue(param)
{
    var url = window.location;
    var parts = url.split('?');
    var params = parts[1].split('&');
    var val = "";

    for ( var i=0; i<params.length; i++)
    {
        var paramNameVal = params[i].split('=');

        if ( paramNameVal[0] == param )
        {
            val = paramNameVal[1];
        }
    }
    return val;
}
3
Robert Bolton

Le plus joli mais basique:

data = {};
$.each(
    location.search.substr(1).split('&').filter(Boolean).map(function(kvpairs){
        return kvpairs.split('=')
    }),
    function(i,values) {
        data[values.shift()] = values.join('=')
    }
);

Il ne gère pas les listes de valeurs telles que ?a[]=1&a[]2

3
Damien

Je recommande Dar Lessons comme bon plugin. J'ai travaillé avec cela pendant longtemps. Vous pouvez également utiliser le code suivant. Mettez simplement var queryObj = {}; avant document.ready et placez le code ci-dessous au début de document.ready. Après ce code, vous pouvez utiliser queryObj["queryObjectName"] pour tout objet de requête que vous avez.

var querystring = location.search.replace('?', '').split('&');
for (var i = 0; i < querystring.length; i++) {
    var name = querystring[i].split('=')[0];
    var value = querystring[i].split('=')[1];
    queryObj[name] = value;
}
2
farnoush resa

L'expression la plus courte possible en termes de taille pour obtenir un objet de requête semble être:

var params = {};
location.search.substr(1).replace(/([^&=]*)=([^&]*)&?/g,
  function () { params[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]); });

Vous pouvez utiliser l'élément A pour analyser un URI d'une chaîne dans ses composants de type location- (pour se débarrasser de #..., par exemple):

var a = document.createElement('a');
a.href = url;
// Parse a.search.substr(1)... as above
2
daluege

Utilisation:

  $(document).ready(function () {
      var urlParams = {};
      (function () {
          var match,
          pl = /\+/g, // Regex for replacing addition symbol with a space
              search = /([^&=]+)=?([^&]*)/g,
              decode = function (s) {
                  return decodeURIComponent(s.replace(pl, " "));
              },
              query = window.location.search.substring(1);

          while (match = search.exec(query))
              urlParams[decode(match[1])] = decode(match[2]);
      })();
      if (urlParams["q1"] === 1) {
          return 1;
      }

S'il vous plaît vérifier et laissez-moi savoir vos commentaires. Reportez-vous également à Comment obtenir une valeur de chaîne de requête à l'aide de jQuery.

2
Pushkraj

Cela analysera les variables ET les tableaux d'une chaîne d'URL. Il n’utilise ni regex ni aucune bibliothèque externe.

function url2json(url) {
   var obj={};
   function arr_vals(arr){
      if (arr.indexOf(',') > 1){
         var vals = arr.slice(1, -1).split(',');
         var arr = [];
         for (var i = 0; i < vals.length; i++)
            arr[i]=vals[i];
         return arr;
      }
      else
         return arr.slice(1, -1);
   }
   function eval_var(avar){
      if (!avar[1])
          obj[avar[0]] = '';
      else
      if (avar[1].indexOf('[') == 0)
         obj[avar[0]] = arr_vals(avar[1]);
      else
         obj[avar[0]] = avar[1];
   }
   if (url.indexOf('?') > -1){
      var params = url.split('?')[1];
      if(params.indexOf('&') > 2){
         var vars = params.split('&');
         for (var i in vars)
            eval_var(vars[i].split('='));
      }
      else
         eval_var(params.split('='));
   }
   return obj;
}

Exemple:

var url = "http://www.x.com?luckyNums=[31,21,6]&name=John&favFoods=[pizza]&noVal"
console.log(url2json(url));

Sortie:

[object]
   noVal: ""
   favFoods: "pizza"
   name:     "John"
   luckyNums:
      0: "31"
      1: "21"
      2: "6"
2
Pithikos

Cette fonction renverra un objet JavaScript analysé avec des valeurs imbriquées de manière arbitraire en utilisant la récursion, si nécessaire.

Voici un exemple de jsfiddle .

[
  '?a=a',
  '&b=a',
  '&b=b',
  '&c[]=a',
  '&c[]=b',
  '&d[a]=a',
  '&d[a]=x',
  '&e[a][]=a',
  '&e[a][]=b',
  '&f[a][b]=a',
  '&f[a][b]=x',
  '&g[a][b][]=a',
  '&g[a][b][]=b',
  '&h=%2B+%25',
  '&i[aa=b',
  '&i[]=b',
  '&j=',
  '&k',
  '&=l',
  '&abc=foo',
  '&def=%5Basf%5D',
  '&ghi=[j%3Dkl]',
  '&xy%3Dz=5',
  '&foo=b%3Dar',
  '&xy%5Bz=5'
].join('');

Étant donné l'un des exemples de test ci-dessus.

var qs = function(a) {
  var b, c, e;
  b = {};
  c = function(d) {
    return d && decodeURIComponent(d.replace(/\+/g, " "));
  };
  e = function(f, g, h) {
    var i, j, k, l;
    h = h ? h : null;
    i = /(.+?)\[(.+?)?\](.+)?/g.exec(g);
    if (i) {
      [j, k, l] = [i[1], i[2], i[3]]
      if (k === void 0) {
        if (f[j] === void 0) {
          f[j] = [];
        }
        f[j].Push(h);
      } else {
        if (typeof f[j] !== "object") {
          f[j] = {};
        }
        if (l) {
          e(f[j], k + l, h);
        } else {
          e(f[j], k, h);
        }
      }
    } else {
      if (f.hasOwnProperty(g)) {
        if (Array.isArray(f[g])) {
          f[g].Push(h);
        } else {
          f[g] = [].concat.apply([f[g]], [h]);
        }
      } else {
        f[g] = h;
      }
      return f[g];
    }
  };
  a.replace(/^(\?|#)/, "").replace(/([^#&=?]+)?=?([^&=]+)?/g, function(m, n, o) {
    n && e(b, c(n), c(o));
  });
  return b;
};
1
Peter T Bosse II

Cela fonctionnera ... Vous devez appeler cette fonction où vous devez obtenir le paramètre en lui donnant son nom ...

function getParameterByName(name)
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  alert(results[1]);
  if (results == null)
    return "";
  else
    return results[1];
}
1
sonorita

Rapide, facile et rapide:

La fonction:

function getUrlVar() {
    var result = {};
    var location = window.location.href.split('#');
    var parts = location[0].replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        result [key] = value;
    });
    return result;
}

tilisation:

var varRequest = getUrlVar()["theUrlVarName"];
1
Shlomi Hassid

Voici String implémentation du prototype:

String.prototype.getParam = function( str ){
    str = str.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp( "[\\?&]*"+str+"=([^&#]*)" );    
    var results = regex.exec( this );
    if( results == null ){
        return "";
    } else {
        return results[1];
    }
}

Exemple d'appel:

var status = str.getParam("status")

str peut être une chaîne de requête ou une URL

1
krisrak

Voir ceci post ou utiliser ceci:

<script type="text/javascript" language="javascript">
    $(document).ready(function()
    {
        var urlParams = {};
        (function ()
        {
            var match,
            pl= /\+/g,  // Regular expression for replacing addition symbol with a space
            search = /([^&=]+)=?([^&]*)/g,
            decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
            query  = window.location.search.substring(1);

            while (match = search.exec(query))
                urlParams[decode(match[1])] = decode(match[2]);
        })();

        if (urlParams["q1"] === 1)
        {
            return 1;
        }
    });
</script>
1
soheil bijavar

Faire cela de manière fiable est plus compliqué qu'on ne le pense au premier abord.

  1. location.search, qui est utilisé dans d'autres réponses, est fragile et doit être évité. Par exemple, il est vide si quelqu'un passe à l'erreur et place un identifiant #fragment avant la chaîne ?query.
  2. Il existe un certain nombre de façons dont les URL sont automatiquement échappées dans le navigateur, ce qui rend decodeURIComponent plutôt obligatoire, à mon avis.
  3. De nombreuses chaînes de requête sont générées à partir des entrées de l'utilisateur, ce qui signifie que les hypothèses sur le contenu de l'URL sont très mauvaises. Y compris des choses très basiques comme que chaque clé est unique ou même a une valeur.

Pour résoudre ce problème, voici une API configurable avec une bonne dose de programmation défensive . Notez qu'il peut être réduit de moitié si vous souhaitez coder en dur certaines variables, ou si l'entrée ne peut jamais inclure hasOwnProperty, etc.

Version 1: Retourne un objet de données avec les noms et les valeurs pour chaque paramètre. Il les déduplit efficacement et respecte toujours le premier trouvé de gauche à droite.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

    var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

    if (!url || typeof url !== 'string') {
        url = location.href; // more robust than location.search, which is flaky
    }
    if (!paramKey || typeof paramKey !== 'string') {
        paramKey = '&';
    }
    if (!pairKey || typeof pairKey !== 'string') {
        pairKey = '=';
    }
    // when you do not explicitly tell the API...
    if (arguments.length < 5) {
        // it will unescape parameter keys and values by default...
        decode = true;
    }

    queryStart = url.indexOf('?');
    if (queryStart >= 0) {
        // grab everything after the very first ? question mark...
        query = url.substring(queryStart + 1);
    } else {
        // assume the input is already parameter data...
        query = url;
    }
    // remove fragment identifiers...
    fragStart = query.indexOf('#');
    if (fragStart >= 0) {
        // remove everything after the first # hash mark...
        query = query.substring(0, fragStart);
    }
    // make sure at this point we have enough material to do something useful...
    if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
        // we no longer need the whole query, so get the parameters...
        query = query.split(paramKey);
        result = {};
        // loop through the parameters...
        for (i = 0, len = query.length; i < len; i = i + 1) {
            pairKeyStart = query[i].indexOf(pairKey);
            if (pairKeyStart >= 0) {
                name = query[i].substring(0, pairKeyStart);
            } else {
                name = query[i];
            }
            // only continue for non-empty names that we have not seen before...
            if (name && !Object.prototype.hasOwnProperty.call(result, name)) {
                if (decode) {
                    // unescape characters with special meaning like ? and #
                    name = decodeURIComponent(name);
                }
                if (pairKeyStart >= 0) {
                    value = query[i].substring(pairKeyStart + 1);
                    if (value) {
                        if (decode) {
                            value = decodeURIComponent(value);
                        }
                    } else {
                        value = missingValue;
                    }
                } else {
                    value = missingValue;
                }
                result[name] = value;
            }
        }
        return result;
    }
}

Version 2: Renvoie un objet de mappage de données avec deux tableaux de longueur identiques, un pour les noms et un pour les valeurs, avec un index pour chaque paramètre. Celui-ci prend en charge les noms en double et ne les supprime pas intentionnellement, car c’est probablement la raison pour laquelle vous voudriez utiliser ce format.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

   var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

   if (!url || typeof url !== 'string') {
       url = location.href; // more robust than location.search, which is flaky
   }
   if (!paramKey || typeof paramKey !== 'string') {
       paramKey = '&';
   }
   if (!pairKey || typeof pairKey !== 'string') {
       pairKey = '=';
   }
   // when you do not explicitly tell the API...
   if (arguments.length < 5) {
       // it will unescape parameter keys and values by default...
       decode = true;
   }

   queryStart = url.indexOf('?');
   if (queryStart >= 0) {
       // grab everything after the very first ? question mark...
       query = url.substring(queryStart + 1);
   } else {
       // assume the input is already parameter data...
       query = url;
   }
   // remove fragment identifiers...
   fragStart = query.indexOf('#');
   if (fragStart >= 0) {
       // remove everything after the first # hash mark...
       query = query.substring(0, fragStart);
   }
   // make sure at this point we have enough material to do something useful...
   if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
       // we no longer need the whole query, so get the parameters...
       query = query.split(paramKey);
       result = {
           names: [],
           values: []
       };
       // loop through the parameters...
       for (i = 0, len = query.length; i < len; i = i + 1) {
           pairKeyStart = query[i].indexOf(pairKey);
           if (pairKeyStart >= 0) {
               name = query[i].substring(0, pairKeyStart);
           } else {
               name = query[i];
           }
           // only continue for non-empty names...
           if (name) {
               if (decode) {
                   // unescape characters with special meaning like ? and #
                   name = decodeURIComponent(name);
               }
               if (pairKeyStart >= 0) {
                   value = query[i].substring(pairKeyStart + 1);
                   if (value) {
                       if (decode) {
                           value = decodeURIComponent(value);
                       }
                   } else {
                       value = missingValue;
                   }
               } else {
                   value = missingValue;
               }
               result.names.Push(name);
               result.values.Push(value);
           }
       }
       return result;
   }

}

1
Seth Holladay

Cela n'a pas fonctionné pour moi, je veux faire correspondre ?b car le paramètre b est présent et ne pas correspondre à ?return en tant que paramètre r, voici ma solution .

window.query_param = function(name) {
  var param_value, params;

  params = location.search.replace(/^\?/, '');
  params = _.map(params.split('&'), function(s) {
    return s.split('=');
  });

  param_value = _.select(params, function(s) {
    return s.first === name;
  })[0];

  if (param_value) {
    return decodeURIComponent(param_value[1] || '');
  } else {
    return null;
  }
};
1
Dorian
// Parse query string
var params = {}, queryString = location.hash.substring(1),
    regex = /([^&=]+)=([^&]*)/g,
    m;
while (m = regex.exec(queryString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
0
Konstantin Tarkus