Jak mogę uzyskać wartości ciągu zapytania w JavaScript?
Czy istnieje pozbawiony wtyczek sposób na pobieranie wartości query string za pomocą jQuery (lub bez)?
Jeśli tak, to w jaki sposób? Jeśli nie, czy istnieje wtyczka, która może to zrobić?
Uaktualnienie: wrzesień-2018
Możesz użyć URLSearchParams, który jest prosty i ma przyzwoite (ale nie pełne) wsparcie dla przeglądarek.
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');Original
Nie potrzebujesz jQuery do tego celu. Możesz użyć po prostu czystego JavaScriptu:
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, ' '));
}Użycie:
// 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)
Uwaga: Jeśli parametr jest obecny kilka razy (?foo=lorem&foo=ipsum), otrzymasz pierwszą wartość (lorem). Nie ma standardu na ten temat i zastosowania różnią się, zobacz na przykład to pytanie: Autorytatywna pozycja zduplikowanych kluczy zapytań HTTP GET.
UWAGA: W funkcji rozróżniana jest wielkość liter. Jeśli wolisz, aby w nazwie parametru nie była rozróżniana wielkość liter, dodaj 'i' modyfikator do RegExp.
Jest to aktualizacja oparta na nowych URLSearchParams specs, aby osiągnąć ten sam wynik bardziej zwięźle. Zobacz odpowiedź zatytułowaną "URLSearchParams" poniżej.
Roshambo na snipplr.com ma prosty skrypt do osiągnięcia tego celu opisany w Get URL Parameters with jQuery | Improved. Z jego skryptem możesz również łatwo wyciągnąć tylko te parametry, które chcesz.
Oto sedno sprawy:
$.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;
}Następnie po prostu pobierz swoje parametry z ciągu zapytania.
Więc jeśli URL / ciąg zapytania był xyz.com/index.html?lang=de.
Wystarczy zadzwonić do var langval = $.urlParam('lang');, a ty'masz to.
UZBEKJON ma również świetny wpis na blogu na ten temat, Uzyskaj parametry adresu URL & wartości z jQuery.
Jeśli używasz jQuery, możesz użyć biblioteki, takiej jak jQuery BBQ: Back Button & Query Library.
...jQuery BBQ zapewnia pełną
.deparam()metodę, wraz z zarządzaniem stanem hash, a także fragment / query string parse i merge metody użytkowe.
Edycja: Dodanie przykładu 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();
}
};Jeśli chcesz użyć zwykłego JavaScriptu, możesz użyć...
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;
}
})();Z powodu nowego API historii HTML, a w szczególności history.pushState() i history.replaceState(), adres URL może się zmienić, co spowoduje unieważnienie pamięci podręcznej parametrów i ich wartości.
Ta wersja będzie aktualizować swoją wewnętrzną pamięć podręczną parametrów za każdym razem, gdy zmieni się historia.
