Existe-t-il un moyen sans plug-in de récupérer les valeurs de chaîne de requête via jQuery (ou sans)?
Si c'est le cas, comment? Sinon, existe-t-il un plugin qui peut le faire?
Existe-t-il un moyen sans plug-in de récupérer les valeurs de chaîne de requête via jQuery (ou sans)?
Si c'est le cas, comment? Sinon, existe-t-il un plugin qui peut le faire?
Réponses:
Mise à jour: sept-2018
Vous pouvez utiliser URLSearchParams qui est simple et prend en charge un navigateur décent (mais pas complet) .
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
Original
Vous n'avez pas besoin de jQuery à cet effet. 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 norme à 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 insensible à la casse, ajoutez le modificateur «i» à RegExp
Il s'agit d'une mise à jour basée sur les nouvelles spécifications URLSearchParams pour obtenir le même résultat de manière plus succincte. Voir la réponse intitulée " URLSearchParams " ci-dessous.
http://www.mysite.com/index.php?x=x1&x=x2&x=x3
La valeur du champ x
est ambiguë.
?mykey=0&m.+key=1
, appeler getParameterByName("m.+key")
retournerait 0
au lieu de 1
. Vous devez échapper les métacaractères d'expression régulière name
avant de créer votre expression régulière. Et vous n'avez besoin d'appeler .replace()
qu'une seule fois en utilisant l'indicateur global et en utilisant "\\$&"
comme expression de remplacement. Vous devriez rechercher au location.search
lieu de location.href
. Une réponse avec plus de 400 votes positifs devrait expliquer ces détails.
Certaines des solutions affichées ici sont inefficaces. Répéter la recherche d'expressions régulières à chaque fois que le script doit accéder à un paramètre est complètement inutile, une seule fonction pour diviser 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 échouent également à décoder correctement l'URL.
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 également les chaînes de requête de style tableau. Un exemple de ceci est ici , mais puisque 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 key=value
paires. Cela nécessiterait une expression rationnelle plus compliquée à gérer ;
ou &
, ce qui, à mon avis, n'est pas nécessaire car il est rare qu'il ;
soit utilisé et je dirais encore plus improbable que les deux soient utilisés. Si vous avez besoin de prendre en charge ;
au lieu de &
, échangez-les simplement dans l'expression régulière.
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>
Beaucoup plus simple!
Une nouvelle capacité serait de récupérer les paramètres répétés comme suit
myparam=1&myparam=2
. Il n'y a pas de spécification , cependant, la plupart des approches actuelles suivent la génération d'un tableau.
myparam = ["1", "2"]
Voici donc l'approche pour le gérer:
let urlParams = {};
(window.onpopstate = function () {
let 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)) {
if (decode(match[1]) in urlParams) {
if (!Array.isArray(urlParams[decode(match[1])])) {
urlParams[decode(match[1])] = [urlParams[decode(match[1])]];
}
urlParams[decode(match[1])].push(decode(match[2]));
} else {
urlParams[decode(match[1])] = decode(match[2]);
}
}
})();
window.location.hash
propriété, qui est distincte de la window.location.search
propriété. Si le hachage change, cela n'affecte pas du tout la chaîne de requête.
;
s'agit d'un délimiteur légal pour les key=value
paires GET . C'est rare, mais il faut 5 secondes pour l'implémenter.
?a=b&c=d
est classique et une recommandation du W3C pour les formulaires Web, mais la spécification URI définit simplement query = *( pchar / "/" / "?" )
.
while(match = search.exec(query))
avecwhile((match = search.exec(query)) !== null)
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;
}, {}
)
: {}
};
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
, les éléments suivants seront renvoyés:
qs["topic"]; // 123
qs["name"]; // query string
qs["nothere"]; // undefined (object)
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 à chercher des paramètres sur l'url à ?
partir du hash et aussi #
. Ensuite, pour chaque paramètre, ils se divisent en signe égal b[f][p]("=")
(qui ressemble indexOf
, ils utilisent la position du caractère pour obtenir la clé / valeur). Après l'avoir divisé, ils vérifient si le paramètre a une valeur ou non, si c'est le cas, ils stockent la valeur de d
, sinon ils continuent simplement.
Au final, l'objet d
est retourné, 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¶m2=val"
//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));
Code de préparation: déclaration des méthodes
var qs = window.GetQueryString(query);
var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];
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
unescape
est une fonction obsolète et est remplacée par decodeURIComponent()
, notez qu'aucune de ces fonctions ne décodera correctement a +
en caractère espace. 2. Vous devez déclarer le résultat en tant qu'objet plutôt qu'en tant que tableau, car JavaScript n'a pas de tableaux associatifs en soi et le tableau que vous déclarez est traité comme un objet en lui affectant de toute façon des propriétés nommées.
window.location
rend tout problème de performance inutile, étant donné que le client naviguant vers l'URL est beaucoup, beaucoup plus cher.
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/
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
.
null
si le paramètre n'est pas suivi de '='. Vous pouvez ajouter un préfixe if (!RegExp('[?&]'+name+'(&.*)?$').exec(window.location.search)) return false;
pour le faire revenir boolean false
si le paramètre n'est pas là du tout.
new
préfixe lors de la création de l'expression régulière:var match = new RegExp('...
.replace('\u200E', '')
var results = new RegExp('[\\?&]' + name + '=([^&#/]*)').exec(url);
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.
Il n'est pas normalisé par le W3C , mais c'est un niveau de vie par WhatWG .
Vous pouvez l'utiliser sur location
:
let params = new URLSearchParams(location.search);
ou
let params = (new URL(location)).searchParams;
Ou bien sûr sur n'importe quelle URL:
let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);
Vous pouvez également obtenir des paramètres en utilisant une .searchParams
propriété abrégée 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 / paramètres fixés par la 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 exemple de page sont disponibles pour l'audit et les tests.
.get
au lieu de simplement.
slice(1)
allumer .search
, vous pouvez l'utiliser directement. URLSearchParams peut gérer le début ?
.
URLSearchParams
n'est pas bon car il ne renvoie pas les valeurs réelles des paramètres d'une URL.
new URL('https://example.com?foo=1&bar=2')
ne fonctionne pas pour l'url Androidfile:///android_asset/...
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, depuis le 11 novembre 2014, Purl n'est plus géré et l'auteur recommande d'utiliser plutôt URI.js. Le plugin jQuery est différent en ce 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, 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'
Une solution rapide et complète , qui gère les clés à plusieurs valeurs et les caractères encodés .
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})
//using ES6 (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})
Multi-doublé:
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
})
Qu'est-ce que tout ce code ...
"coalescence nulle" , évaluation des courts-circuits
ES6 Affectations de destruction , fonctions fléchées , 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"
Pour accéder à différentes parties d'une URL, utilisez location.(search|hash)
var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined
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]]})
qd.key[index]
ouqd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]
Utilisez decodeURIComponent()
pour la deuxième ou les deux divisions.
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"]
* !!! Veuillez noter que cela decodeURIComponent(undefined)
renvoie une chaîne "undefined"
. La solution réside dans une utilisation simple de &&
, ce qui garantit qu'il decodeURIComponent()
n'est pas appelé sur des valeurs non dé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 comme:
if (location.search) location.search.substr(1).split("&").forEach(...)
array.forEach()
en injectant du code au début de votre script. voir Polyfill developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
var qd = {}; location.search.substr(1).split("&").forEach( function(item) { var s = item.split("="), k = s[0], v; if(s.length>1) v = decodeURIComponent(s[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v] })
Roshambo sur snipplr.com dispose d'un script simple pour y parvenir décrit dans Obtenir les paramètres d'URL avec jQuery | Amélioré . Avec son script, vous obtenez également facilement les paramètres que vous souhaitez.
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, obtenez simplement vos paramètres à partir de la chaîne de requête.
Donc, si la chaîne URL / requête était xyz.com/index.html?lang=de
.
Appelez simplement var langval = $.urlParam('lang');
, et vous l'avez.
UZBEKJON a également un excellent article sur ce sujet, Obtenez les paramètres et valeurs d'URL avec jQuery .
0
? Bien sûr, je pourrais utiliser un contrôle d'égalité strict, mais ne devrait-il pas en être ainsi null
?
Si vous utilisez jQuery, vous pouvez utiliser une bibliothèque, telle que jQuery BBQ: Back Button & Query Library .
... jQuery BBQ fournit une
.deparam()
méthode complète , ainsi que la gestion de l'état de hachage et des méthodes utilitaires d'analyse et de fusion de chaînes de fragments / requêtes.
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 souhaitez 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 changement d'historique.
Utilisez simplement 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 benchmark jsPerf
Pour résoudre le problème dans le commentaire de Rup, ajoutez un fractionnement conditionnel en remplaçant la première ligne par les deux ci-dessous. Mais la précision absolue signifie qu'il est maintenant plus lent que regexp (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 gagne. Sinon, regexp.
Ou si vous contrôlez 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 URL (les avoir dans une valeur serait une mauvaise idée) - vous pouvez utiliser la version suivante légèrement plus simplifiée et lisible de la 1ère option:
function getQueryStringValueByName(name) { var queryStringFromStartOfValue = location.search.split(name + '=')[1]; return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
get('value')
sur http://the-url?oldvalue=1&value=2
.
half
c'est vrai, cela retourne null pour un paramètre vide comme ?param=
. Il doit retourner la chaîne vide dans ce cas, et la vérification half !== undefined
résout cela.
function get(param){return decodeURIComponent((location.search.split(param+'=')[1]||'').split('&')[0])}
return half !== undefined ? decodeURIComponent(half[1].split('&')[0]) : null;
faire fonctionner
Voici ma tentative pour faire de l'excellente solution d'Andy E un plugin jQuery à part entière:
;(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:
var someVar = $.getQueryString('myParam');
Le meilleur des deux mondes!
Si vous faites plus de manipulation d'URL que d'analyser simplement la chaîne de requête, vous pouvez trouver URI.js utile. Il s'agit d'une bibliothèque pour manipuler les URL - et est livré avec toutes les cloches et les sifflets. (Désolé pour l'auto-publicité ici)
pour 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 aussi « fixe » mauvais querystrings aiment ?&foo&&bar=baz&
à ?foo&bar=baz
)
J'aime la solution de Ryan Phelan . Mais je ne vois aucun intérêt à étendre jQuery pour cela? Il n'y a aucune utilisation de la fonctionnalité jQuery.
D'un autre côté, j'aime la fonction intégrée dans 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 de Ryan Phelan, mais elle est enveloppée différemment: nom clair et aucune dépendance des autres bibliothèques javascript. Plus d'informations sur cette fonction sur mon blog .
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
cela renvoie l'objet:
{
x: "6",
y: undefined,
z: "hello"
}
(function($) { $.extend({ get_query: function (name) { var url = location.href; 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]] = qs[i][1]; } return result; } }); })(jQuery);
et utilisez comme ceci:$.get_query()
location.href
devrait être remplacé par location.search
.
Restez simple avec du 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');
window.location.search
!
Ce sont toutes d'excellentes réponses, mais j'avais besoin de quelque chose d'un peu plus robuste, et j'ai pensé que vous aimeriez tous avoir ce que j'ai créé.
Il s'agit d'une méthode de bibliothèque simple qui effectue la dissection et la manipulation des paramètres d'URL. La méthode statique a les sous-méthodes suivantes qui peuvent être appelées sur l'URL du sujet:
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>');
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
affiche
0:can
1:cheezburger
i:can
has:cheezburger
J'utilise beaucoup d'expressions régulières, mais pas pour ça.
Il me semble plus facile et plus efficace de lire la chaîne de requête une fois dans mon application et de construire 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 comme http://domain.com?param1=val1¶m2=val2
vous pouvez obtenir leur valeur plus tard dans votre code au fur search.param1
et à mesure search.param2
.
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
La méthode Roshambo jQuery ne s'occupait pas de décoder l'URL
http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/
Je viens d'ajouter cette capacité également lors de l'ajout dans la déclaration de retour
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
Vous pouvez maintenant trouver l'essentiel 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;
}
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;
}
Fonctionne très bien pour moi.
Voici ma modification de cette excellente réponse - avec une possibilité supplémentaire d'analyser les chaînes de requête avec des clés sans valeurs.
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 de 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 l'url, les http://sb.com/reg/step1?param=
résultats seront les mêmes. Mais avec l'URL, http://sb.com/reg/step1?param
la solution de Bruno renvoie un objet sans clé, tandis que la mienne renvoie un objet avec clé param
et undefined
valeur.
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 comme this.htm?hello=world&foo=bar
va créer:
{hello:'world', foo:'bar'}
decodeURIComponent
la valeur que vous stockez - et sans doute la clé également, mais vous êtes moins susceptible d'utiliser des chaînes impaires à cet égard.
?a&b&c
mais c'est vraiment très lisible (et d'ailleurs similaire à ma première idée). De plus, split
c'est redondant, mais j'ai des poissons plus performants à faire frire que de diviser deux fois une chaîne de 10 caractères.
location.search.substr(1)
au lieu de location.href.split('?')[1]
pour éviter de prendre hash ( #anchor
) avec le dernier paramètre de requête.
location.search
!
Voici une version étendue de la version liée de "Handle array-style query strings" d'Andy E. Correction d'un bug ( ?key=1&key[]=2&key[]=3
; 1
est perdu et remplacé par [2,3]
), a apporté quelques améliorations mineures aux performances (re-décodage des valeurs, recalcul de la position "[", etc.) et a ajouté un certain nombre d'améliorations (fonctionnalisées, prise en charge ?key=1&key=2
, prise en charge des ;
délimiteurs) . J'ai laissé les variables énormément courtes, mais j'ai ajouté de nombreux commentaires pour les rendre lisibles (oh, et j'ai réutilisé v
dans les fonctions locales, désolé si cela prête à confusion;).
Il gérera la chaîne de requête suivante ...
? test = Bonjour & personne = neek & personne [] = jeff & personne [] = jim & personne [extra] = john & test3 & nocache = 1398914891264
... ce qui en fait 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 une certaine mesure des tableaux "malformés", c'est-à-dire - person=neek&person[]=jeff&person[]=jim
ou alors person=neek&person=jeff&person=jim
que la clé est identifiable et valide (au moins dans NameValueCollection.Add de dotNet ):
Si la clé spécifiée existe déjà dans l'instance NameValueCollection cible, la valeur spécifiée est ajoutée à la liste de valeurs séparée par des virgules existante sous la forme "valeur1, valeur2, valeur3".
Il semble que le jury soit un peu sur les touches répétées car il n'y a aucune spécification. Dans ce cas, plusieurs clés sont stockées dans un (faux) tableau. Mais notez que je ne traite pas les valeurs basées sur des virgules dans des 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;
};
q = decodeURIComponent(window.location.search.substring(1)),
aide à le faire aussi.
C'est une fonction que j'ai créée il y a quelque temps et j'en suis très satisfait. Il 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 publie non compressé pour les types novices pour mieux expliquer ce qui se passe.
Je suis sûr que cela pourrait être optimisé ou fait différemment pour fonctionner plus rapidement, mais cela a toujours fonctionné très bien pour ce dont j'ai besoin.
Prendre plaisir.
function getQSP(sName, sURL) {
var theItmToRtn = "";
var theSrchStrg = location.search;
if (sURL) theSrchStrg = sURL;
var sOrig = theSrchStrg;
theSrchStrg = theSrchStrg.toUpperCase();
sName = sName.toUpperCase();
theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
var theSrchToken = "&" + sName + "=";
if (theSrchStrg.indexOf(theSrchToken) != -1) {
var theSrchTokenLth = theSrchToken.length;
var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
}
return unescape(theItmToRtn);
}
Nous venons de publier arg.js , un projet visant à résoudre ce problème une fois pour toutes. Cela a toujours été si difficile, mais maintenant vous pouvez faire:
var name = Arg.get("name");
ou obtenir le tout:
var params = Arg.all();
et si vous vous souciez de la différence entre ?query=true
et #hash=true
alors vous pouvez utiliser les méthodes Arg.query()
et Arg.hash()
.
Le problème avec la première réponse à cette question est que ce ne sont pas les paramètres pris en charge placés après #, mais parfois il est également nécessaire d'obtenir cette valeur.
J'ai modifié la réponse pour lui permettre d'analyser une chaîne de requête complète avec un signe de hachage é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;
};
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 vous pouvez utiliser cette fonction en supposant que l'URL est
http://dummy.com/?stringtext=jquery&stringword=jquerybyexample
var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');
?stringtext&stringword=foo
.
Si vous utilisez Browserify, vous pouvez utiliser le url
module de Node.js :
var url = require('url');
url.parse('http://example.com/?bob=123', true).query;
// returns { "bob": "123" }
Pour en savoir plus: URL Node.js v0.12.2 Manual & Documentation
EDIT: Vous pouvez utiliser l' interface URL , son assez largement adoptée dans presque tous les nouveaux navigateurs et si le code va s'exécuter sur un ancien navigateur, vous pouvez utiliser un polyfill comme celui-ci . Voici un exemple de code sur la façon d'utiliser l'interface URL pour obtenir des paramètres de requête (également appelés 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 un 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"
url
API du module est ici: nodejs.org/api/url.html