Existuje způsob načítání hodnot query string bez zásuvného modulu pomocí jQuery (nebo bez něj)?
Pokud ano, jak? Pokud ne, existuje plugin, který to umí?
Aktualizace: září-2018
Můžete použít URLSearchParams, který je jednoduchý a má slušnou (ale ne úplnou) podporu prohlížeče.
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
Původní
K tomuto účelu jQuery nepotřebujete. Můžete použít jen nějaký čistý 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, ' '));
}
Použití:
// 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)
Poznámka: Pokud je parametr přítomen vícekrát (?foo=lorem&foo=ipsum
), získáte první hodnotu (lorem
). Neexistuje na to žádný standard a použití se liší, viz například tato otázka: Autoritativní pozice duplicitních klíčů dotazu HTTP GET.
POZNÁMKA: Funkce rozlišuje velká a malá písmena. Pokud dáváte přednost názvu parametru bez rozlišování velkých a malých písmen, přidejte modifikátor 'i' do RegExp.
Jedná se o aktualizaci na základě nové specifikace URLSearchParams, která má stručněji dosáhnout stejného výsledku. Viz odpověď s názvem "URLSearchParams" níže.
Roshambo na snipplr.com má jednoduchý skript pro dosažení tohoto cíle popsaný v Get URL Parameters with jQuery | Improved. Pomocí jeho skriptu si také snadno vytáhnete jen ty parametry, které chcete.
Zde je podstata:
$.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;
}
Pak stačí získat parametry z řetězce dotazu.
Takže pokud URL/dotazový řetězec byl xyz.com/index.html?lang=de
.
Stačí zavolat var langval = $.urlParam('lang');
a máte to.
Na blogu UZBEKJON je o tom také skvělý příspěvek Get URL parameters &; values with jQuery.
Pokud používáte jQuery, můžete použít knihovnu, například jQuery BBQ: Back Button & Query Library.
...jQuery BBQ poskytuje plnohodnotnou metodu
.deparam()
, spolu se správou stavu hash a pomocnými metodami pro rozbor a sloučení fragmentů / řetězců dotazů.
Edit: Přidání příkladu 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();
}
};
Pokud chcete použít prostý JavaScript, můžete použít...
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;
}
})();
Vzhledem k novému API HTML History a konkrétně history.pushState()
a history.replaceState()
může dojít ke změně URL, což znehodnotí mezipaměť parametrů a jejich hodnot.
Tato verze bude aktualizovat svou vnitřní mezipaměť parametrů při každé změně historie.