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




récupérer post javascript (20)

ES2015 (ES6)

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

Sans jQuery

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

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

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

Méthode Google

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

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

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

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

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

Ma méthode en tant que plugin jQuery

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

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

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

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

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

Usage

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

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

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

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

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

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

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

Code de test divisé

var qs = window.GetQueryString(query);

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

Code de test de regex

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

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

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

https://code.i-harness.com

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

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


URLSearchParams

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

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

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

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

let params = new URLSearchParams(location.search);

ou

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

Ou bien sur n'importe quelle URL:

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

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

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

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

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


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

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 here , 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 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 key=value . Cela exigerait une expression rationnelle plus compliquée à gérer ; ou & , ce qui, à mon avis, est inutile car rare dans ce cas ; 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 faire le gros du travail à votre place. Par exemple, en PHP, vous pouvez écrire:

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

Beaucoup plus simple!


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

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

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

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

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

        return params;
    }

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

    return this.queryStringParams[key];
  };
}

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


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 d'utiliser URI.js place. 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 l' URI directement, avec ou sans jQuery. Un code similaire aurait l'air en tant que tel, une documentation plus complète here :

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'

Roshambo sur snipplr.com a un script simple pour y parvenir décrit dans Obtenir des paramètres d'URL avec jQuery | Amélioré Avec son script, vous pouvez également extraire facilement les paramètres souhaités.

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 à partir de la chaîne de requête.

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

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

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


Si vous effectuez plus de manipulations d'URL que de simplement analyser la chaîne de requête, vous pouvez trouver URI.js utile. C'est une bibliothèque pour manipuler des 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 les mauvaises chaînes de requête, comme ?&foo&&bar=baz& to ?foo&bar=baz )



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!


Mise à jour: septembre 2018

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

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

Orignal

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

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

Usage:

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


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

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


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=cheezburgeraffiche

0:can
1:cheezburger
i:can
has:cheezburger

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

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

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

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

Vous pouvez maintenant trouver le contenu mis à jour:

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

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 également cette valeur.

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

Du MDN :

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

alert(loadPageVar("name"));

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.


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

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

ou obtenir le tout:

var params = Arg.all();

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


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

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

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

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


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

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






query-string