Existe-t-il un moyen sans plugin de récupérer les valeurs de [query string][1] via jQuery (ou sans) ?
Si oui, comment ? Sinon, existe-t-il un plugin permettant de le faire ?
Mise à jour : Sep-2018
Vous pouvez utiliser [URLSearchParams][1] qui est simple et a [un support décent (mais pas complet) pour les navigateurs][5].
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 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)
Note : 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 usages varient, voir par exemple cette question : [Position autorisée des clés de requête HTTP GET dupliquées] (https://stackoverflow.com/questions/1746507/authoritative-position-of-duplicate-http-get-query-keys).
NOTE : La fonction est sensible à la casse. Si vous préférez que le nom du paramètre ne soit pas sensible à la casse, [ajoutez le modificateur 'i' ; à RegExp][2].
Il s'agit d'une mise à jour basée sur les nouvelles spécifications [URLSearchParams specs][3] pour obtenir le même résultat de manière plus succincte. Voir la réponse intitulée " ; [URLSearchParams][4]" ; ci-dessous.
[1] : https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#Browser_compatibility [2] : https://stackoverflow.com/questions/3939715/case-insensitive-regex-in-javascript [3] : https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams [4] : https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript/901144#12151322 [5] : https://caniuse.com/#feat=urlsearchparams
Roshambo, sur snipplr.com, propose un script simple pour y parvenir, décrit dans [Get URL Parameters with jQuery | Improved][1]. Avec ce script, vous pouvez aussi facilement extraire uniquement 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, il suffit de récupérer les paramètres de 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 le tour est joué.
UZBEKJON a également publié un excellent article sur ce sujet, [Get URL parameters & ; values with jQuery][2].
[1] : http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/ [2] : http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
Si vous utilisez jQuery, vous pouvez utiliser une bibliothèque, telle que [jQuery BBQ : Back Button & ; Query Library][1].
...jQuery BBQ fournit une méthode complète
.deparam()
, ainsi qu'une gestion de l'état du hachage, et des méthodes utilitaires d'analyse et de fusion des fragments et des chaînes de requête.
Edit : Ajout de l'exemple 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 utiliser simplement 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 HTML History et plus particulièrement de history.pushState()
et history.replaceState()
, l'URL peut changer, ce qui invalidera le cache des paramètres et leurs valeurs.
Cette version mettra à jour son cache interne de paramètres à chaque fois que l'historique changera.