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?

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.

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.

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

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

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/

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ und Chrome 49+ unterstützen die URLSearchParams- API:

• Chrome Ankündigung und Details
• Opera Ankündigung und Details
• Firefox Ankündigung und Details

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.

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'

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

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"

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

"?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(...)

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 .

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;

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

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

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

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

Aus dem MDN :

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

alert(loadPageVar("name"));

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

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.

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

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

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

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

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"