Finnes det en plugin-fri måte å hente query string-verdier via jQuery (eller uten)?
Hvis ja, hvordan? Hvis ikke, finnes det en plugin som kan gjøre det?
Oppdatering: september 2018
Du kan bruke URLSearchParams, som er enkelt og har god (men ikke fullstendig) nettleserstøtte.
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
Original
Du trenger ikke jQuery til dette formålet. Du kan bare bruke ren JavaScript:
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, ' '));
}
Bruk:
// 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)
Merk: Hvis en parameter forekommer flere ganger (?foo=lorem&foo=ipsum
), vil du få den første verdien (lorem
). Det finnes ingen standard for dette, og bruken varierer, se for eksempel dette spørsmålet: Authoritative position of duplicate HTTP GET query keys.
MERK: Funksjonen er sensitiv for store og små bokstaver. Hvis du foretrekker et parameternavn som ikke skiller mellom store og små bokstaver, add 'i' modifier to RegExp.
Dette er en oppdatering basert på de nye URLSearchParams-spesifikasjonene for å oppnå det samme resultatet på en mer kortfattet måte. Se svar med tittelen "URLSearchParams" nedenfor.
Roshambo på snipplr.com har et enkelt skript for å oppnå dette beskrevet i Get URL Parameters with jQuery | Improved. Med skriptet hans kan du også enkelt hente ut akkurat de parameterne du ønsker.
Her er kjernen:
$.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;
}
Deretter er det bare å hente parametrene fra spørringsstrengen.
Så hvis URL/spørringsstrengen var xyz.com/index.html?lang=de
.
Bare ring var langval = $.urlParam('lang');
, og du'har det.
UZBEKJON har et flott blogginnlegg om dette også, Få URL-parametere og verdier med jQuery.
Hvis du bruker jQuery, kan du bruke et bibliotek, for eksempel jQuery BBQ: Back Button & Query Library.
...jQuery BBQ gir en full .deparam()
-metode, sammen med både hash state management og fragment / query string parse og merge verktøymetoder.
Rediger: Legge til Deparam Eksempel:
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();
}
};
Hvis du bare vil bruke ren JavaScript, kan du bruke...
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;
}
})();
På grunn av det nye HTML-historikk-API-et og spesielt history.pushState()
og history.replaceState()
, kan URL-en endres, noe som vil ugyldiggjøre hurtigbufferen for parametere og deres verdier.
Denne versjonen vil oppdatere sin interne cache av parametere hver gang historikken endres.