Wie kann ich Abfragezeichenfolgenwerte in JavaScript abrufen?


2697

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?


Ich benutze das Plugin getUrlParam in beschrieben jQuery-Plugin - getUrlParam (Version 2) .
Koma

69
Eine einfache Javascript- Lösung ohne RegEx: css-tricks.com/snippets/javascript/get-url-variables
Lorenzo Polidori

6
Obwohl die Top-Lösung für die Frage aufgrund der hervorragenden Beobachtung, dass jQuery nicht benötigt wird, ihre Beliebtheit verdient, ist ihre Methode zum Erstellen neuer regulärer Ausdrücke und zum erneuten Parsen der Abfragezeichenfolge für jeden gewünschten Parameter äußerst ineffizient. Weitaus effizientere (und vielseitigere) Lösungen gibt es schon seit langer Zeit, zum Beispiel in diesem Artikel, der hier abgedruckt ist: htmlgoodies.com/beyond/javascript/article.php/11877_3755006_3/…
Joseph Myers

1
Mögliches Duplikat der JavaScript-

4
Joseph, die "ausgezeichnete Beobachtung, dass jQuery nicht benötigt wird"? Natürlich wird es nicht benötigt. Alles, was jQuery macht, macht JavaScript. Die Leute verwenden jQuery nicht, weil es Dinge tut, die JavaScript nicht kann. Der Punkt von jQuery ist Bequemlichkeit.
Vladimir Kornea

Antworten:


8325

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.


131
Wie geht diese Funktion damit um? http://www.mysite.com/index.php?x=x1&x=x2&x=x3Der Wert des Feldes xist nicht eindeutig.
dpp

94
Dies gilt auch nicht für mehrwertige Schlüssel , die ebenfalls vollkommen legal sind.
Hurrymaplelad

17
Warum würden Sie dafür einen regulären Ausdruck verwenden?
Ry-

28
Bei einer Abfrage von würde der ?mykey=0&m.+key=1Aufruf 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. 01name.replace()"\\$&"location.searchlocation.href
Gilly3

7
Sie benötigen jQuery nicht für diesen oder einen anderen Zweck. Sie brauchen es einfach nicht wirklich.
Gztomas

1708

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=valuePaare. 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.


Wenn Sie eine serverseitige Vorverarbeitungssprache verwenden, möchten Sie möglicherweise die nativen JSON-Funktionen verwenden, um das schwere Heben für Sie zu erledigen. In PHP können Sie beispielsweise schreiben:

<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

Viel einfacher!

AKTUALISIERT

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]);
        }
    }
})();

11
Wenn Sie eine stark ajaxierte App verwenden, verwenden Sie möglicherweise den Hash (#), um "die Zurück-Schaltfläche zu aktivieren". In diesem Fall ändert sich der Querystring ständig (siehe Facebook). .. obwohl diese Lösungen Dinge ignorieren, die nach den # anways kommen ...
Nick Franceschina

100
@Nick: Alles, was sich nach dem Hash befindet, befindet sich in der window.location.hashEigenschaft, die von der window.location.searchEigenschaft getrennt ist. Wenn sich der Hash ändert, hat dies keinerlei Auswirkungen auf den Querystring.
Andy E

27
Vergessen Sie nicht, dass dies ;ein gesetzlicher Begrenzer für GET- key=valuePaare ist. Es ist selten, aber die Implementierung dauert 5 Sekunden.
Alex

4
Um fair zu sein, wird von RFC3986 kein bestimmtes Format für die Abfragezeichenfolge definiert. ?a=b&c=dist konventionell und eine W3C-Empfehlung für Webformulare, aber die URI-Spezifikation definiert nur query = *( pchar / "/" / "?" ).
Matthew Gilliard

21
Für diejenigen von uns einen ziemlich strengen Aufbau JSHint mit tauschen die while(match = search.exec(query))mitwhile((match = search.exec(query)) !== null)
craigts

1283

ES2015 (ES6)

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;
                }, {}
            )
        : {}
};

Ohne jQuery

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+stringfolgt wird Folgendes zurückgegeben:

qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)

Google-Methode

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 dzurü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&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

Leistungstest (Split-Methode gegen Regex-Methode) ( jsPerf )

Vorbereitungscode: Methodendeklaration

Testcode teilen

var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

Regex-Testcode

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

  • Split-Methode : 144.780 ± 2,17% am schnellsten
  • Regex-Methode : 13.891 ± 0,85% | 90% langsamer

1
Dies ist auch ein guter Ansatz, bei dem Zeichenfolgen aufgeteilt werden, anstatt reguläre Ausdrücke zu verwenden. Es gibt jedoch ein paar Dinge, auf die hingewiesen werden sollte :-) 1. unescapeist 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.
Andy E

55
Neugierig, warum Sie dies zu einem jQuery-Plugin machen würden, wenn es keinen jQuery-spezifischen Code enthält?
Zachleat

63
@zachleat Wenn Sie kein Framework haben, werden Ihre Funktionen nur über Ihren Code verteilt. Wenn Sie jQuery erweitern, haben Sie einen Bereich für Ihre Funktionen, der nicht irgendwo in Ihrem Code herumschwebt. Ich denke das ist der einzige Grund.
BrunoLM

6
Hier ist die jQuery-Version, die so optimiert wurde, dass sie JSLint besteht (zumindest das sich halb bewegende Ziel von JSLint.com am 15.06.2011). Meistens nur Dinge bewegen, um The Crockford zu besänftigen.
Patridge

3
Wie @BenjaminGruenbaum scherzte, sehe ich auch keinen Sinn darin, die Leistung der URL-Analyse zu bewerten. Wenn dies zu einem isomorphen JavaScript-Modul gemacht wurde, das von Node aufgerufen werden könnte, um beispielsweise Protokolle zu analysieren, dann ja. Die Verwendung zum Extrahieren von URL-Parametern window.locationführt jedoch zu Leistungsproblemen, da der Client, der zur URL navigiert, weitaus teurer ist.
Dan Dascalescu

659

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/


23
Wenn Sie es etwas kürzer machen möchten, können Sie die ternäre Bedingung beseitigen und sie durch einen Kurzschluss in der letzten Zeile ersetzen return match && decodeURIComponent(match[1].replace(/\+/g, ' '));.
Andy E

Es wird zurückgegeben, nullwenn dem Parameter nicht '=' folgt. Sie können vorab festlegen if (!RegExp('[?&]'+name+'(&.*)?$').exec(window.location.search)) return false;, dass es zurückgegeben wird, boolean falsewenn der Parameter überhaupt nicht vorhanden ist.
Commonpike

9
Ich würde das newPräfix beim Erstellen der Regex verwenden:var match = new RegExp('...
Patrick Berkeley

2
IE11-Fehler: IE beschließt, dem zurückgegebenen Wert das ASCII-Zeichen 8206 voranzustellen (hex: 200E - das "Zeichen von links nach rechts"). Ich habe über 6 Stunden damit verbracht, dies zu finden! therapeutische Entlüftung .... zu beheben, bis zum Ende der letzten Zeile zu .replace('\u200E', '')
heften

Zumindest in Chrome auf einem Mac (möglicherweise auch in anderen Browsern) wurde der letzte Wert mit einem '/' versehen. Also habe ich den regulären Ausdruck so geändert, dass er ignoriert wird. var results = new RegExp('[\\?&]' + name + '=([^&#/]*)').exec(url);
CaseyB

594

URLSearchParams

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- .searchParamsEigenschaft 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.


Diese beiden Downvoter haben wahrscheinlich (wie ich es gerade getan habe) die Tatsache übersehen, dass Sie .getstatt nur.
Nakilon

20
Sie müssen nicht tatsächlich slice(1)auf .search, können Sie es direkt nutzen können. URLSearchParams kann die führenden verarbeiten ?.
Jason C

URLSearchParamsist nicht gut, weil es nicht die tatsächlichen Werte der Parameter einer URL zurückgibt.
Melab

Dies new URL('https://example.com?foo=1&bar=2') funktioniert nicht für Android URLfile:///android_asset/...
Shah

@ Melab ist immer noch gut darin, dass es eine einfache API für all die seltsamen Regexing in den anderen Antworten hier bietet. Aber es macht mich auch komisch, dass id standardmäßig nicht window.location.search ausführt und dass es keine Möglichkeit gibt, die aktuelle URL zu aktualisieren.
Damon

400

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 URIdirekt, 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'


238

tl; dr

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

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]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> qd.a[1]    // "5"
> qd["a"][1] // "5"



Lesen Sie mehr ... über die Vanilla JavaScript-Lösung.

Um auf verschiedene Teile einer URL zuzugreifen, verwenden Sie location.(search|hash)

Einfachste (Dummy-) Lösung

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
  • Behandelt leere Schlüssel richtig.
  • Überschreibt mehrere Schlüssel mit dem zuletzt gefundenen Wert.
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

Mehrwertige Schlüssel

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]]})
  • Gibt jetzt stattdessen Arrays zurück .
  • Zugriff auf Werte durch qd.key[index]oderqd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

Codierte Zeichen?

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"]



Aus Kommentaren

* !!! 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(...)

1
Nett. Das einzige, was ich ändern würde - ist, wenn es nicht mehr als einen Wert für einen Schlüssel gibt, muss es kein Array sein. Verwenden Sie das Array nur, wenn mehr als ein Wert pro Schlüssel vorhanden ist.
Pavel Nikolov

2
@PavelNikolov Ich denke, es würde Schwierigkeiten verursachen, manchmal ein Array und manchmal einen Wert zu bekommen. Sie müssten zuerst danach suchen, jetzt überprüfen Sie nur noch die Länge, da Sie sowieso Zyklen zum Abrufen dieser Werte verwenden. Auch dies sollte hier die einfachste, aber funktionalste Lösung sein.
Qwerty

@katsh Ja, in der Tat funktioniert es in> = IE9. Sie können jedoch Ihren Javascript-Prozessor unterrichten, array.forEach()indem Sie bestimmten Code am Anfang Ihres Skripts einfügen. Siehe Polyfill developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Qwerty

1
Aus Gründen der Lesbarkeit etwas abgeflacht, in eine Funktion umgewandelt und den geteilten Aufruf wiederverwendet: function parseQueryString () {var qd = {}; location.search.substr (1) .split ("&"). forEach (Funktion (Element) {var parts = item.split ("="); var k = parts [0]; var v = decodeURIComponent (parts [ 1]); (k in qd)? Qd [k] .push (v): qd [k] = [v,]}); return qd; }
Casey

1
decodeDocumentURI (undefined) gibt "undefined" anstelle von undefined zurück. Ein funktionaler, aber nicht sehr eleganter Patch: 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] })
Loop

218

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 .


13
mit jQuery scheint zu bedeuten, die Funktion mit dem jQuery-Objekt zu benennen. Warum ist der Wert auch ungültig 0? Sicher, ich könnte eine strenge Gleichstellungsprüfung verwenden, aber sollte es nicht sein null?
Alex

Einverstanden. Auf diese Weise funktioniert es genau wie eine normale Javascript-Variablenreferenz (außer dass die Rückgabe von undefiniert möglicherweise genauer wäre).
Isochron

'name' wird nicht richtig maskiert, sondern nur direkt in RegExp eingefügt. Dies schlägt fehl. Wie andere gesagt haben, ist es unglaublich, dass diese Antworten das Rad neu erfinden und so viele Stimmen erhalten, wenn dies in einer gut getesteten Bibliothek implementiert werden sollte.
Triynko

167

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.


100

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;

7
Sehr gepflegt! Es funktioniert jedoch nicht, wenn Sie einen früheren Wert mit einem Schlüsselnamen haben, der mit dem gewünschten endet, z . B. get('value')auf http://the-url?oldvalue=1&value=2.
Rup

3
Wenn Sie jedoch wissen, dass der Parametername erwartet wird, ist dies der schnellere Ansatz.
Martin Borthiry

Bearbeitet: Wenn Sie nur testen, halfob 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 !== undefinedlöst dies.
Philh

Cool! Ich machte einen function get(param){return decodeURIComponent((location.search.split(param+'=')[1]||'').split('&')[0])}
Einzeiler

Ich musste die zweite Zeile ändern return half !== undefined ? decodeURIComponent(half[1].split('&')[0]) : null;, um sie zum
Laufen

95

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!


76

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)


// src / URI.fragmentURI.js musste geladen werden
JoeB

1
+1 URI.js ist ein tolles kleines Plugin. Sie können auch das var data = URI.parseQuery('?foo=bar&bar=baz&foo=world');gleiche Ergebnis erzielen ( Dokumente ).
Yarin

62

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 .


3
Es sieht so aus, als ob window.location.getParameter () aus Chrome entfernt wurde.
Mhenry1384

54

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=6das Objekt zurückgegeben:

{
  x: "6",
  y: undefined,
  z: "hello"
}

Wenn Sie es als jQuery-Plugin benötigen, ist es hier: (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()
Tim

Vielen Dank. Ich habe das auch benutzt. Ich habe dies vor Ihrer return-Anweisung hinzugefügt: Wenn (param) Ergebnis [param] zurückgibt, kann ich auf diese Weise bei Bedarf auch get_query ('foo')
ausführen

1
Funktioniert nicht, wenn Sie Hashes haben. Zum Beispiel: test.aspx? Test = t1 # default . Wird {test: "t1 # default"} zurückgeben und ich erwarte {test: "t1"}
Bogdan M.

@ BogdanM: in der Tat. location.hrefmüsste durch ersetzt werden location.search.
Dan Dascalescu

53

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');

1
Ich denke, Sie tun etwas Ähnliches wie ich, aber ich denke, mein Ansatz ist viel einfacher stackoverflow.com/a/21152762/985454
Qwerty

Lassen Sie mich Ihnen vorstellen (Trommelwirbel bitte) window.location.search!
ErikE

46

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:

  • getHost
  • getPath
  • getHash
  • setHash
  • getParams
  • getQuery
  • setParam
  • getParam
  • hasParam
  • removeParam

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>');

44

Aus dem MDN :

function loadPageVar (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(loadPageVar("name"));

39

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=cheezburgerangezeigt

0:can
1:cheezburger
i:can
has:cheezburger

9
Ich liebe Ihre Antwort, besonders wie kompakt das Skript ist, aber Sie sollten wahrscheinlich decodeURIComponent verwenden. Siehe xkr.us/articles/javascript/encode-compare und stackoverflow.com/questions/619323/…
pluckyglen

39

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&param2=val2können Sie ihren Wert später in Ihrem Code als search.param1und erhalten search.param2.


38
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

5
Dies ist ein interessanter Ansatz, bei dem ein Array zurückgegeben wird, das Werte aus den angegebenen Parametern enthält. Es gibt mindestens ein Problem: Die URL wird nicht korrekt per URL dekodiert, und es müssten auch die Parameternamen per URL codiert werden, die für die Übereinstimmung verwendet werden. Es funktioniert jedoch mit einfachen Abfragezeichenfolgen in der vorliegenden Form. ps Vergessen Sie nicht, das Schlüsselwort var zu verwenden, wenn Sie Variablen für for- Anweisungen deklarieren .
Andy E

38

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;
}

36

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.


36

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?paramBrunos Lösung ein Objekt ohne Schlüssel zurück, während meine ein Objekt mit Schlüssel paramund undefinedWert zurückgibt .


34

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=barwird erstellt:

{hello:'world', foo:'bar'}

4
Ordentlich. Laut Mozilla funktioniert forEach jedoch nicht mit IE7 oder 8, und ich vermute, dass dies umfallen wird, wenn überhaupt keine Abfragezeichenfolge vorhanden ist. Eine minimale Verbesserung, die mehr Fälle abdecken würde, wäre decodeURIComponentder Wert beim Speichern - und wohl auch der Schlüssel, aber es ist weniger wahrscheinlich, dass Sie dabei ungerade Zeichenfolgen verwenden.
Rup

1
Schön und einfach. Behandelt weder Array-Parameter noch ist ?a&b&cdies wirklich sehr gut lesbar (und im Übrigen meiner ersten Idee ähnlich). Auch das splitist überflüssig, aber ich habe größere Leistungsfische zum Braten als das zweimalige Teilen einer 10-Zeichen-Zeichenfolge.
cod3monk3y

1
Wenn querystring "? hello = world & one = a = b & two = 2" ist, erhalten Sie beim Erfassen des Werts 'one' nur den Teil vor dem ersten '=' im Wert. Sein Wert sollte 'a = b' sein, aber Sie erhalten nur 'a', weil Sie 'one = a = b' auf '=' teilen. das ist einfach fehlerhaft. : ((
Shawn Kovac

2
Ich würde location.search.substr(1)stattdessen verwenden location.href.split('?')[1], um zu vermeiden, dass hash ( #anchor) zusammen mit dem letzten Abfrageparameter abgerufen wird.
Mlt

Ja, ich möchte Sie auch vorstellen location.search!
ErikE

32

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; 1geht 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 vinnerhalb 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[]=jimoder person=neek&person=jeff&person=jimda 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;
};

Zum Abrufen der Werte für Abfragezeichenfolgen können Sie diese Funktion "GetParameterValues" verwenden. In diesem Fall müssen Sie nur den Namen des Abfrage-Stirng-Parameters übergeben und erhalten den Wert $ (document) .ready (function () {var bid = GetParameterValues ​​('token');}); Funktion GetParameterValues ​​(param) {var url = decodeURIComponent (window.location.href); url = url.slice (url.indexOf ('?') + 1) .split ('&'); für (var i = 0; i <url.length; i ++) {var urlparam = url [i] .split ('='); if (urlparam [0] == param) {return urlparam [1]; }}
Mike Clark

1
Ich benutze das jetzt schon eine Weile und es war bisher großartig. Mit Ausnahme der Behandlung von urlencodierten Arrays. Die Verwendung q = decodeURIComponent(window.location.search.substring(1)),hilft auch dabei.
Vladislav Dimitrov

31

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);
}

Es ist auch besser, decodeURI () oder decodeURIComponent () anstelle von unescape () zu wählen. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Adarsh ​​Konchady

27

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=trueund interessieren #hash=true, können Sie die Methoden Arg.query()und Arg.hash()verwenden.


Sie haben mich gerettet Mann .. arg.js ist die Lösung Keine der Lösungen erhält die Werte von # in IE 8 .. :( Jeder, der nach IE8 # sucht, erhält von der Anfrage, dies ist die Lösung ..
Dilip Rajkumar

27

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;
};

1
Das ist interessant, wenn Sie es brauchen, aber es gibt keinen Standard für das Format des Hash-Teils AFAIK, daher ist es nicht fair, dies als Schwäche der anderen Antwort zu bezeichnen.
Rup

2
Ja, ich weiß. Aber in meine App integriere ich die js-Navigation von Drittanbietern, die nach dem Hash-Zeichen einige Parameter hat.
Ph0en1x

Auf der Google-Suchseite folgt auf die Suchabfrage beispielsweise das Hash-Zeichen "#".
etlds

25
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');

Es gibt hier bereits einige Implementierungen dieses Ansatzes. Zumindest müssen Sie die Ergebniswerte von DeciUriComponent () dekodieren. Dies kann sich auch schlecht verhalten, wenn Sie keinen Wert angeben, z ?stringtext&stringword=foo.
Rup

24

Wenn Sie Browserify verwenden, können Sie das urlModul 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"

Die Dokumentation für die urlAPI des Moduls ist hier: nodejs.org/api/url.html
andrezsanchez

Das ist schön für die Entwicklung von nw.js. Browserify wird nicht einmal benötigt, da die meisten Knotenmodule wie in einem nw.js-Fenster funktionieren. Ich habe diesen Code getestet und funktioniert wie ein Zauber ohne Änderung.
Andrew Grothe

OHH das ist großartig! URLSearchParams funktioniert perfekt. Danke vielmals!
Baran Emre

1
sollte wohl am besten gewählt werden, kein Ärger mit benutzerdefinierten Funktionen und zusätzlichen Bibliotheken. Es scheint auch meistens von den Browsern 2019 übernommen zu werden.
TheWhiteLlama
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.