Question Comment puis-je obtenir des valeurs de chaîne de requête en JavaScript?


Existe-t-il un moyen de récupération sans plug-in 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?


2703


origine


Réponses:


Vous n'avez pas besoin de jQuery à cette fin. Vous pouvez utiliser uniquement 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 usages varient, voir par exemple cette question: Position autorisée 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 insensible à la casse, ajouter le modificateur 'i' à RegExp


Ceci est une mise à jour basée sur le nouveau URLSearchParams spécifications pour atteindre le même résultat plus succinctement. Voir la réponse intitulée "URLSearchParams" au dessous de.


7017



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 a besoin d'accéder à un paramètre est totalement inutile, une seule fonction permettant de diviser les paramètres en un objet de style tableau associatif est suffisante. Si vous ne travaillez pas avec l'API d'historique HTML 5, cela n'est nécessaire qu'une fois par chargement de page. Les autres suggestions ici échouent également à 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.emplacement.search.sous-chaîne(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 les chaînes de requête de style tableau aussi. Un exemple de ceci est ici, mais puisque les paramètres de style de tableau ne sont pas définis dans RFC 3986 Je ne vais pas polluer cette réponse avec le code source. Pour ceux qui s'intéressent à 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 key=value paires. Il faudrait une regex plus compliquée pour gérer ; ou &, ce qui je pense est inutile car il est rare que ; est utilisé et je dirais encore plus improbable que les deux seraient utilisés. Si vous avez besoin de soutien ; au lieu de &, il suffit de les échanger dans la regex.


  Si vous utilisez un langage de prétraitement côté serveur, vous pouvez utiliser ses fonctions JSON natives pour effectuer le gros du travail. Par exemple, en PHP, vous pouvez écrire:

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

Beaucoup plus simple!


1626



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 comme ?topic=123&name=query+string, ce qui suit reviendra:

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

Méthode Google

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 obfusqué, mais c'est compréhensible.

Ils commencent à chercher des paramètres sur l'URL de ? et aussi du hash #. Ensuite, pour chaque paramètre, ils se séparent dans 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, s'il a alors la valeur de d, sinon ils continuent juste.

À la fin de l'objet d est retourné, la manipulation échapper et la + signe. Cet objet est juste 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 de méthodes

Diviser le code de test

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 Split: 144 780 ± 2,17% le plus rapide
  • Méthode Regex: 13,891 ± 0,85% | 90% plus lent

1194



Version améliorée de La 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 l'amélioration, voir: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/


636



URLSearchParams

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

Il y a un google-suggéré URLSearchParams polyfill pour les versions stables de IE.

Il n'est pas standardisé par W3Cmais c'est un standard de vie 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.slice(1));

ou

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

Ou bien sur toute URL:

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

Vous pouvez obtenir des paramètres en utilisant également un raccourci .searchParams propriété 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 le get(KEY), set(KEY, VALUE), append(KEY, VALUE) API Vous pouvez également parcourir toutes les valeurs for (let p of params) {}.

UNE implémentation de référence et un Page d'exemple sont disponibles pour l'audit et les tests.


482



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, en date du 11 novembre 2014, Purl n'est plus maintenu et l'auteur recommande d'utiliser URI.js au lieu. Le plugin jQuery est différent en ce qu'il se concentre sur les éléments - pour une utilisation avec des chaînes, il suffit d'utiliser URI directement, avec ou sans jQuery. Un code similaire ressemblerait à tel, des documents plus complets 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'

394



Roshambo sur snipplr.com a un script simple pour réaliser ceci décrit dans Obtenir les paramètres d'URL avec jQuery | Amélioré. Avec son script, vous pouvez également facilement retirer les paramètres que vous voulez.

Voici l'essentiel:

$.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.

Il suffit d'appeler var langval = $.urlParam('lang');et vous l'avez.

UZBEKJON a aussi un excellent article sur ce blog, Obtenir les paramètres et les valeurs de l'URL avec jQuery.


215



tl; dr

Un rapide, solution complète, qui gère clés à plusieurs valeurs 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)})
Multi-ligné:
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 Missions destructrices, 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 aux différentes parties d'une utilisation d'URL 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 touches vides correctement.
  • Overrides 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 simple des clés (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?

Utilisation decodeURIComponent() pour la seconde ou les deux se divise.

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



De commentaires

* !!! S'il vous plaît noter que decodeURIComponent(undefined) renvoie la chaîne "undefined". La solution réside dans un simple usage de &&, qui assure 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:

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

215



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 un plein .deparam() méthode, avec la gestion de l'état de hachage, et les méthodes d'utilitaire d'analyse et de fusion de chaînes de fragment / requête.

Edit: Ajouter un exemple de Deparam:

 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 spécifiquement 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 change.


164