Gibt es eine Plugin-freie Möglichkeit, Abfragezeichenfolgenwerte über jQuery (oder ohne) abzurufen ?
Wenn das so ist, wie? Wenn nicht, gibt es ein Plugin, das dies kann?
Gibt es eine Plugin-freie Möglichkeit, Abfragezeichenfolgenwerte über jQuery (oder ohne) abzurufen ?
Wenn das so ist, wie? Wenn nicht, gibt es ein Plugin, das dies kann?
Antworten:
Update: Sep-2018
Sie können URLSearchParams verwenden, das einfach ist und eine anständige (aber nicht vollständige) Browserunterstützung bietet .
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
Original
Zu diesem Zweck benötigen Sie jQuery nicht. Sie können nur reines JavaScript verwenden:
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, ' '));
}
Verwendungszweck:
// 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)
Hinweis: Wenn ein Parameter mehrmals vorhanden ist ( ?foo=lorem&foo=ipsum
), erhalten Sie den ersten Wert ( lorem
). Es gibt keinen Standard dafür und die Verwendung variiert, siehe zum Beispiel diese Frage: Autorisierende Position doppelter HTTP-GET-Abfrageschlüssel .
HINWEIS: Bei der Funktion wird zwischen Groß- und Kleinschreibung unterschieden. Wenn Sie den Parameternamen ohne Berücksichtigung der Groß- und Kleinschreibung bevorzugen, fügen Sie RegExp den Modifikator 'i' hinzu
Dies ist ein Update, das auf den neuen URLSearchParams-Spezifikationen basiert , um das gleiche Ergebnis prägnanter zu erzielen. Siehe Antwort mit dem Titel " URLSearchParams " unten.
http://www.mysite.com/index.php?x=x1&x=x2&x=x3
Der Wert des Feldes x
ist nicht eindeutig.
?mykey=0&m.+key=1
Aufruf statt getParameterByName("m.+key")
zurückkehren . Sie müssen den Metazeichen für reguläre Ausdrücke entkommen, bevor Sie Ihren regulären Ausdruck erstellen können . Und Sie müssen nur einmal aufrufen, indem Sie das globale Flag verwenden und als Ersatzausdruck verwenden. Sie sollten suchen auf der Stelle . Eine Antwort mit über 400 Upvotes sollte diese Details berücksichtigen. 0
1
name
.replace()
"\\$&"
location.search
location.href
Einige der hier veröffentlichten Lösungen sind ineffizient. Das Wiederholen der Suche nach regulären Ausdrücken jedes Mal, wenn das Skript auf einen Parameter zugreifen muss, ist völlig unnötig. Eine einzige Funktion zum Aufteilen der Parameter in ein Objekt im assoziativen Array-Stil reicht aus. Wenn Sie nicht mit der HTML 5-Verlaufs-API arbeiten, ist dies nur einmal pro Seitenladevorgang erforderlich. Die anderen Vorschläge hier können die URL ebenfalls nicht korrekt dekodieren.
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]);
})();
Beispiel für eine Abfrage:
?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty
Ergebnis:
urlParams = {
enc: " Hello ",
i: "main",
mode: "front",
sid: "de8d49b78a85a322c4155015fdce22c4",
empty: ""
}
alert(urlParams["mode"]);
// -> "front"
alert("empty" in urlParams);
// -> true
Dies könnte leicht verbessert werden, um auch Abfragezeichenfolgen im Array-Stil zu verarbeiten. Ein Beispiel hierfür ist hier , aber da in RFC 3986 keine Parameter im Array-Stil definiert sind, werde ich diese Antwort nicht mit dem Quellcode verschmutzen. Für diejenigen, die an einer "verschmutzten" Version interessiert sind, schauen Sie sich die Antwort von campbeln unten an .
Wie in den Kommentaren ausgeführt, ;
ist dies auch ein rechtlicher Begrenzer für key=value
Paare. Es würde eine kompliziertere Regex erfordern, um damit umzugehen, ;
oder &
was ich für unnötig halte, da es selten ;
verwendet wird und ich würde noch unwahrscheinlicher sagen, dass beide verwendet werden würden. Wenn Sie ;
stattdessen Unterstützung benötigen &
, tauschen Sie sie einfach im regulären Ausdruck aus.
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>
Viel einfacher!
Eine neue Funktion wäre das Abrufen wiederholter Parameter wie folgt
myparam=1&myparam=2
. Es gibt keine Spezifikation , jedoch folgen die meisten aktuellen Ansätze der Erzeugung eines Arrays.
myparam = ["1", "2"]
Dies ist also der Ansatz, um es zu verwalten:
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
Eigenschaft, die von der window.location.search
Eigenschaft getrennt ist. Wenn sich der Hash ändert, hat dies keinerlei Auswirkungen auf den Querystring.
;
ein gesetzlicher Begrenzer für GET- key=value
Paare ist. Es ist selten, aber die Implementierung dauert 5 Sekunden.
?a=b&c=d
ist konventionell und eine W3C-Empfehlung für Webformulare, aber die URI-Spezifikation definiert nur query = *( pchar / "/" / "?" )
.
while(match = search.exec(query))
mitwhile((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('&'));
Bei einer URL wie ?topic=123&name=query+string
folgt wird Folgendes zurückgegeben:
qs["topic"]; // 123
qs["name"]; // query string
qs["nothere"]; // undefined (object)
Beim Zerreißen von Googles Code habe ich die Methode gefunden, die sie verwenden: 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
}
Es ist verschleiert, aber es ist verständlich. Es funktioniert nicht, da einige Variablen undefiniert sind.
Sie beginnen, nach Parametern in der URL von ?
und auch aus dem Hash zu suchen #
. Dann teilen sie sich für jeden Parameter das Gleichheitszeichen b[f][p]("=")
(wie es aussieht indexOf
, verwenden sie die Position des Zeichens , um den Schlüssel / Wert zu erhalten). Nach der Aufteilung prüfen sie, ob der Parameter einen Wert hat oder nicht. Wenn dies der Fall ist, speichern sie den Wert von d
, andernfalls fahren sie einfach fort.
Am Ende wird das Objekt d
zurückgegeben, wobei die Flucht und das +
Zeichen behandelt werden. Dieses Objekt ist genau wie meins, es hat das gleiche Verhalten.
Meine Methode als jQuery-Plugin
(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);
Verwendungszweck
//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));
Vorbereitungscode: Methodendeklaration
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");
Testen in Firefox 4.0 x86 unter Windows Server 2008 R2 / 7 x64
unescape
ist eine veraltete Funktion und wird durch ersetzt decodeURIComponent()
. Beachten Sie, dass keine dieser Funktionen a korrekt +
in ein Leerzeichen dekodiert . 2. Sie sollten das Ergebnis als Objekt und nicht als Array deklarieren, da JavaScript per se keine assoziativen Arrays enthält und das von Ihnen deklarierte Array als Objekt behandelt wird, indem Sie ihm trotzdem benannte Eigenschaften zuweisen.
window.location
führt jedoch zu Leistungsproblemen, da der Client, der zur URL navigiert, weitaus teurer ist.
Verbesserte Version der Antwort von Artem Barger :
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
Weitere Informationen zur Verbesserung finden Sie unter: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
.
null
wenn dem Parameter nicht '=' folgt. Sie können vorab festlegen if (!RegExp('[?&]'+name+'(&.*)?$').exec(window.location.search)) return false;
, dass es zurückgegeben wird, boolean false
wenn der Parameter überhaupt nicht vorhanden ist.
new
Präfix beim Erstellen der Regex verwenden:var match = new RegExp('...
.replace('\u200E', '')
var results = new RegExp('[\\?&]' + name + '=([^&#/]*)').exec(url);
Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ und Chrome 49+ unterstützen die URLSearchParams- API:
Für die stabilen Versionen von IE gibt es eine von Google vorgeschlagene URLSearchParams - Polyfüllung .
Es ist nicht von W3C standardisiert , aber es ist ein Lebensstandard von WhatWG .
Sie können es verwenden auf location
:
let params = new URLSearchParams(location.search);
oder
let params = (new URL(location)).searchParams;
Oder natürlich auf einer beliebigen URL:
let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);
Sie können Parameter auch mithilfe einer Kurzschrift- .searchParams
Eigenschaft für das URL-Objekt abrufen :
let params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2"
Sie lesen / eingestellten Parameter durch die get(KEY)
, set(KEY, VALUE)
, append(KEY, VALUE)
API. Sie können auch alle Werte durchlaufen for (let p of params) {}
.
Eine Referenzimplementierung und eine Beispielseite stehen zum Prüfen und Testen zur Verfügung.
.get
statt nur.
slice(1)
auf .search
, können Sie es direkt nutzen können. URLSearchParams kann die führenden verarbeiten ?
.
URLSearchParams
ist nicht gut, weil es nicht die tatsächlichen Werte der Parameter einer URL zurückgibt.
new URL('https://example.com?foo=1&bar=2')
funktioniert nicht für Android URLfile:///android_asset/...
Nur eine weitere Empfehlung. Das Plugin Purl ermöglicht das Abrufen aller Teile der URL, einschließlich Anker, Host usw.
Es kann mit oder ohne jQuery verwendet werden.
Die Bedienung ist sehr einfach und 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'
Ab dem 11. November 2014 wird Purl jedoch nicht mehr beibehalten, und der Autor empfiehlt, stattdessen URI.js zu verwenden. Das jQuery-Plugin unterscheidet sich darin, dass es sich auf Elemente konzentriert - zur Verwendung mit Zeichenfolgen einfach URI
direkt, mit oder ohne jQuery. Ähnlicher Code würde als solcher aussehen, umfassendere Dokumente hier :
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'
Eine schnelle, vollständige Lösung , die mehrwertige Schlüssel und codierte Zeichen verarbeitet .
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)})
Mehrzeilig:
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
})
Was ist all dieser Code ...
"Null-Koaleszenz" , Kurzschlussauswertung
ES6 Destrukturierungszuweisungen , Pfeilfunktionen , Vorlagenzeichenfolgen
"?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"
Um auf verschiedene Teile einer URL zuzugreifen, verwenden Sie 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
Einfache Schlüsselüberprüfung (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]
oderqd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]
Verwenden Sie decodeURIComponent()
für die zweite oder beide Teilungen.
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]})
Beispiel:
"?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"]
* !!! Bitte beachten Sie, dass dies eine decodeURIComponent(undefined)
Zeichenfolge zurückgibt "undefined"
. Die Lösung liegt in einer einfachen Verwendung von &&
, die sicherstellt, dass decodeURIComponent()
keine undefinierten Werte aufgerufen werden. (Siehe die "Komplettlösung" oben.)
v = v && decodeURIComponent(v);
Wenn der Querystring leer ist ( location.search == ""
), ist das Ergebnis etwas irreführend qd == {"": undefined}
. Es wird empfohlen, den Querystring zu überprüfen, bevor Sie die Parsing-Funktion wie folgt starten:
if (location.search) location.search.substr(1).split("&").forEach(...)
array.forEach()
indem Sie bestimmten Code am Anfang Ihres Skripts einfügen. Siehe 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 auf snipplr.com verfügt über ein einfaches Skript, um dies zu erreichen. Dies wird unter Abrufen von URL-Parametern mit jQuery | beschrieben Verbessert . Mit seinem Skript können Sie auch ganz einfach nur die gewünschten Parameter herausholen.
Hier ist das Wesentliche:
$.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;
}
Dann holen Sie sich einfach Ihre Parameter aus der Abfragezeichenfolge.
Also, wenn die URL / Abfragezeichenfolge war xyz.com/index.html?lang=de
.
Rufen var langval = $.urlParam('lang');
Sie einfach an und Sie haben es.
UZBEKJON hat auch einen großartigen Blog-Beitrag dazu: URL-Parameter und -Werte mit jQuery abrufen .
0
? Sicher, ich könnte eine strenge Gleichstellungsprüfung verwenden, aber sollte es nicht sein null
?
Wenn Sie jQuery verwenden, können Sie eine Bibliothek verwenden, z. B. jQuery BBQ: Back Button & Query Library .
... jQuery BBQ bietet eine vollständige
.deparam()
Methode, zusammen mit der Verwaltung des Hash-Status sowie den Methoden zum Parsen und Zusammenführen von Fragment- / Abfragezeichenfolgen.
Bearbeiten: Hinzufügen von Deparam Beispiel:
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();
}
};
Wenn Sie nur einfaches JavaScript verwenden möchten, können Sie ...
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;
}
})();
Aufgrund der neuen HTML-Verlaufs-API und speziell history.pushState()
und history.replaceState()
kann sich die URL ändern, wodurch der Cache der Parameter und ihrer Werte ungültig wird.
Diese Version aktualisiert den internen Parameter-Cache jedes Mal, wenn sich der Verlauf ändert.
Verwenden Sie einfach zwei Splits :
function get(n) {
var half = location.search.split(n + '=')[1];
return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}
Ich habe alle vorherigen und vollständigeren Antworten gelesen. Aber ich denke, das ist die einfachste und schnellste Methode. Sie können diesen jsPerf- Benchmark einchecken
Um das Problem in Rups Kommentar zu lösen, fügen Sie eine bedingte Aufteilung hinzu, indem Sie die erste Zeile in die beiden folgenden ändern. Absolute Genauigkeit bedeutet jedoch, dass es jetzt langsamer als regulärer Ausdruck ist (siehe 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;
}
Wenn Sie also wissen, dass Sie nicht auf Rups Gegenfall stoßen, gewinnt dies. Andernfalls regexp.
Oder wenn Sie die Kontrolle über den Querystring haben und garantieren können, dass ein Wert, den Sie abrufen möchten, niemals URL-codierte Zeichen enthält (diese in einem Wert zu haben, wäre eine schlechte Idee), können Sie die folgende etwas vereinfachte und lesbarere Version verwenden der 1. Option:
function getQueryStringValueByName(name) { var queryStringFromStartOfValue = location.search.split(name + '=')[1]; return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
get('value')
auf http://the-url?oldvalue=1&value=2
.
half
ob dies wahr ist, wird für einen leeren Parameter wie null null zurückgegeben ?param=
. In diesem Fall sollte die leere Zeichenfolge zurückgegeben werden, und die Überprüfung half !== undefined
löst dies.
function get(param){return decodeURIComponent((location.search.split(param+'=')[1]||'').split('&')[0])}
return half !== undefined ? decodeURIComponent(half[1].split('&')[0]) : null;
, um sie zum
Hier ist mein Versuch, Andy E's exzellente Lösung in ein vollwertiges jQuery-Plugin zu verwandeln:
;(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);
Die Syntax lautet:
var someVar = $.getQueryString('myParam');
Beste aus beiden Welten!
Wenn Sie mehr URL - Manipulation tun , als nur die Abfragezeichenfolgeflag Parsen, können Sie feststellen URI.js hilfreich. Es ist eine Bibliothek zum Bearbeiten von URLs - und wird mit allen Schnickschnack geliefert. (Entschuldigung für die Eigenwerbung hier)
So konvertieren Sie Ihren Querystring in eine Karte:
var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
"foo": ["bar", "world"],
"bar": "baz"
}
(URI.js auch „fixe“ schlecht querystrings gerne ?&foo&&bar=baz&
an ?foo&bar=baz
)
Ich mag die Lösung von Ryan Phelan . Aber ich sehe keinen Grund, jQuery dafür zu erweitern? Die jQuery-Funktionalität wird nicht verwendet.
Andererseits gefällt mir die in Google Chrome integrierte Funktion: window.location.getParameter.
Warum also nicht nutzen? Okay, andere Browser haben nicht. Erstellen wir also diese Funktion, wenn sie nicht vorhanden ist:
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];
};
}
Diese Funktion stammt mehr oder weniger von Ryan Phelan, ist jedoch anders verpackt: klarer Name und keine Abhängigkeiten von anderen Javascript-Bibliotheken. Mehr zu dieser Funktion in meinem Blog .
Hier ist ein schneller Weg, um ein Objekt zu erhalten, das dem PHP $ _GET- Array ähnelt :
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;
}
Verwendungszweck:
var $_GET = get_query();
Für die Abfragezeichenfolge wird x=5&y&z=hello&x=6
das Objekt zurückgegeben:
{
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);
und verwenden Sie es wie folgt :$.get_query()
location.href
müsste durch ersetzt werden location.search
.
Halten Sie es einfach in einfachem JavaScript-Code:
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];
}
Rufen Sie es von überall im JavaScript-Code auf:
var result = qs('someKey');
window.location.search
!
Dies sind alles großartige Antworten, aber ich brauchte etwas Robusteres und dachte, Sie alle möchten vielleicht das haben, was ich erstellt habe.
Es ist eine einfache Bibliotheksmethode, die URL-Parameter zerlegt und bearbeitet. Die statische Methode verfügt über die folgenden Untermethoden, die unter der Betreff-URL aufgerufen werden können:
Beispiel:
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]);
}
Zeigen Sie es an!
for (i in a) {
document.write(i + ":" + a[i] + "<br/>");
};
Auf meinem Mac: wird test.htm?i=can&has=cheezburger
angezeigt
0:can
1:cheezburger
i:can
has:cheezburger
Ich benutze häufig reguläre Ausdrücke, aber nicht dafür.
Es erscheint mir einfacher und effizienter, die Abfragezeichenfolge einmal in meiner Anwendung zu lesen und ein Objekt aus allen Schlüssel / Wert-Paaren zu erstellen, wie z.
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;
}();
Für eine URL wie http://domain.com?param1=val1¶m2=val2
können Sie ihren Wert später in Ihrem Code als search.param1
und erhalten 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
Die Roshambo jQuery-Methode kümmerte sich nicht um die Dekodierungs-URL
http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/
Diese Funktion wurde gerade hinzugefügt, während die return-Anweisung hinzugefügt wurde
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
Jetzt finden Sie das aktualisierte Wesentliche:
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}
Ich mag dieses (entnommen aus 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;
}
Funktioniert gut für mich.
Hier ist meine Bearbeitung dieser hervorragenden Antwort - mit der zusätzlichen Möglichkeit, Abfragezeichenfolgen mit Schlüsseln ohne Werte zu analysieren.
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('&'));
WICHTIG! Der Parameter für diese Funktion in der letzten Zeile ist unterschiedlich. Es ist nur ein Beispiel dafür, wie man eine beliebige URL an sie übergeben kann. Sie können die letzte Zeile aus Brunos Antwort verwenden, um die aktuelle URL zu analysieren.
Was genau hat sich also geändert? Mit URL werden die http://sb.com/reg/step1?param=
Ergebnisse gleich sein. Aber mit URL gibt http://sb.com/reg/step1?param
Brunos Lösung ein Objekt ohne Schlüssel zurück, während meine ein Objekt mit Schlüssel param
und undefined
Wert zurückgibt .
Ich brauchte ein Objekt aus der Abfragezeichenfolge und ich hasse viel Code. Es ist vielleicht nicht das robusteste im Universum, aber es sind nur ein paar Codezeilen.
var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
q[i.split('=')[0]]=i.split('=')[1];
});
Eine URL wie this.htm?hello=world&foo=bar
wird erstellt:
{hello:'world', foo:'bar'}
decodeURIComponent
der Wert beim Speichern - und wohl auch der Schlüssel, aber es ist weniger wahrscheinlich, dass Sie dabei ungerade Zeichenfolgen verwenden.
?a&b&c
dies wirklich sehr gut lesbar (und im Übrigen meiner ersten Idee ähnlich). Auch das split
ist überflüssig, aber ich habe größere Leistungsfische zum Braten als das zweimalige Teilen einer 10-Zeichen-Zeichenfolge.
location.search.substr(1)
stattdessen verwenden location.href.split('?')[1]
, um zu vermeiden, dass hash ( #anchor
) zusammen mit dem letzten Abfrageparameter abgerufen wird.
location.search
!
Hier ist eine erweiterte Version von Andy E's verknüpfter "Handle Array-Style Query Strings" -Version. Es wurde ein Fehler behoben ( ?key=1&key[]=2&key[]=3
; 1
geht verloren und wird durch ersetzt [2,3]
), einige kleinere Leistungsverbesserungen vorgenommen (Neukodierung von Werten, Neuberechnung der Position "[" usw.)) und eine Reihe von Verbesserungen hinzugefügt (funktionalisiert, Unterstützung für ?key=1&key=2
, Unterstützung für ;
Trennzeichen). . Ich habe die Variablen ärgerlich kurz gelassen, aber unzählige Kommentare hinzugefügt, um sie lesbar zu machen (oh, und ich habe sie v
innerhalb der lokalen Funktionen wiederverwendet , sorry, wenn das verwirrend ist;).
Es wird die folgende Abfrage verarbeiten ...
? test = Hallo & person = neek & person [] = jeff & person [] = jim & person [extra] = john & test3 & nocache = 1398914891264
... es zu einem Objekt machen, das aussieht wie ...
{
"test": "Hello",
"person": {
"0": "neek",
"1": "jeff",
"2": "jim",
"length": 3,
"extra": "john"
},
"test3": "",
"nocache": "1398914891264"
}
Wie Sie oben sehen können, behandelt diese Version ein gewisses Maß an "fehlerhaften" Arrays, dh - person=neek&person[]=jeff&person[]=jim
oder person=neek&person=jeff&person=jim
da der Schlüssel identifizierbar und gültig ist (zumindest in dotNets NameValueCollection.Add ):
Wenn der angegebene Schlüssel bereits in der Zielinstanz NameValueCollection vorhanden ist, wird der angegebene Wert in der Form "Wert1, Wert2, Wert3" zur vorhandenen durch Kommas getrennten Werteliste hinzugefügt.
Es scheint, dass die Jury bei wiederholten Schlüsseln etwas unzufrieden ist, da es keine Spezifikation gibt. In diesem Fall werden mehrere Schlüssel als (gefälschtes) Array gespeichert. Beachten Sie jedoch, dass ich keine auf Kommas basierenden Werte in Arrays verarbeite.
Der 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)),
hilft auch dabei.
Dies ist eine Funktion, die ich vor einiger Zeit erstellt habe und mit der ich sehr zufrieden bin. Es unterscheidet nicht zwischen Groß- und Kleinschreibung - was praktisch ist. Wenn das angeforderte QS nicht vorhanden ist, wird nur eine leere Zeichenfolge zurückgegeben.
Ich benutze eine komprimierte Version davon. Ich poste unkomprimiert für Anfänger, um besser zu erklären, was los ist.
Ich bin mir sicher, dass dies optimiert oder anders gemacht werden könnte, um schneller zu arbeiten, aber es hat immer gut funktioniert, was ich brauche.
Genießen.
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);
}
Wir haben gerade arg.js veröffentlicht , ein Projekt, das darauf abzielt, dieses Problem ein für alle Mal zu lösen. Es war traditionell so schwierig, aber jetzt können Sie Folgendes tun:
var name = Arg.get("name");
oder das ganze Los bekommen:
var params = Arg.all();
und wenn Sie sich für den Unterschied zwischen ?query=true
und interessieren #hash=true
, können Sie die Methoden Arg.query()
und Arg.hash()
verwenden.
Das Problem mit der Top-Antwort auf diese Frage ist, dass die nicht unterstützten Parameter nach # stehen, aber manchmal auch benötigt wird, um diesen Wert zu erhalten.
Ich habe die Antwort so geändert, dass eine vollständige Abfragezeichenfolge mit einem Hash-Zeichen analysiert werden kann:
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];
}
}
}
Und so können Sie diese Funktion unter der Annahme verwenden, dass die URL lautet
http://dummy.com/?stringtext=jquery&stringword=jquerybyexample
var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');
?stringtext&stringword=foo
.
Wenn Sie Browserify verwenden, können Sie das url
Modul von Node.js verwenden :
var url = require('url');
url.parse('http://example.com/?bob=123', true).query;
// returns { "bob": "123" }
Weiterführende Literatur: URL Node.js v0.12.2 Handbuch & Dokumentation
BEARBEITEN: Sie können die URL- Oberfläche verwenden, die in fast allen neuen Browsern weit verbreitet ist. Wenn der Code in einem alten Browser ausgeführt werden soll, können Sie eine Polyfüllung wie diese verwenden . Hier ist ein Codebeispiel zur Verwendung der URL-Schnittstelle zum Abrufen von Abfrageparametern (auch als Suchparameter bezeichnet).
const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob');
Sie können auch URLSearchParams dafür verwenden. Hier ist ein Beispiel von MDN , um dies mit URLSearchParams zu tun:
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 des Moduls ist hier: nodejs.org/api/url.html