Wie kann ich Abfrage-String-Werte in JavaScript erhalten?

Question

Gibt es eine Plugin-freie Möglichkeit zum Abrufen von Abfragezeichenfolge Werte über jQuery (oder ohne)?

Wenn ja, wie? Wenn nicht, gibt es ein Plugin, das dies tun kann?

Answer 1

Aktualisierung: Januar 2022

Verwendung von Proxy() ist mehr leistungsfähig als mit Object.fromEntries() und besser unterstützt

const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"

Aktualisierung: Juni 2021

Für einen speziellen Fall, in dem Sie alle Abfrageparameter benötigen:

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

Aktualisierung: Sep-2018

Sie können verwenden URLSearchParams die einfach ist und eine Angemessene (aber nicht vollständige) Browserunterstützung .

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

Original

Dafür brauchen Sie kein jQuery. Sie können einfach reines JavaScript verwenden:

function getParameterByName(name, 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, ' '));
}

Verwendung:

// 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 mehrfach vorhanden ist ( ?foo=lorem&foo=ipsum ), erhalten Sie den ersten Wert ( lorem ). Es gibt keinen Standard dafür und die Verwendungsweisen variieren, siehe zum Beispiel diese Frage: Maßgebliche Position der Schlüssel für doppelte HTTP-GET-Abfragen .

HINWEIS: Bei der Funktion wird zwischen Groß- und Kleinschreibung unterschieden. Wenn Sie die Groß-/Kleinschreibung des Parameternamens nicht beachten möchten, Modifikator 'i' zu RegExp hinzufügen

HINWEIS: Wenn Sie einen eslint-Fehler "no-useless-escape" erhalten, können Sie die name = name.replace(/[\[\]]/g, '\\$&'); mit name = name.replace(/[[\]]/g, '\\$&') .

---

Dies ist eine Aktualisierung auf der Grundlage der neuen URLSearchParams Spezifikationen um das gleiche Ergebnis in kürzerer Zeit zu erreichen. Siehe Antwort mit dem Titel " URLSearchParams " unten.

Answer 2

Einige der hier vorgestellten Lösungen sind ineffizient. Die Suche mit regulären Ausdrücken jedes Mal zu wiederholen, wenn das Skript auf einen Parameter zugreifen muss, ist völlig unnötig. Eine einzige Funktion zur Aufteilung der Parameter in ein Objekt im Stil eines assoziativen Arrays ist ausreichend. Wenn Sie nicht mit der HTML 5 History API arbeiten, ist dies nur einmal pro Seitenladung notwendig. Die anderen Vorschläge hier scheitern auch daran, die URL korrekt zu 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 Querystring:

?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 aquí aber da Parameter im Array-Stil nicht in RFC 3986 Ich werde diese Antwort nicht mit dem Quellcode verunreinigen. Für diejenigen, die an einer "verschmutzten" Version interessiert sind, siehe die Antwort von campbeln unten .

Außerdem wurde in den Kommentaren darauf hingewiesen, ; ist ein zulässiges Begrenzungszeichen für key=value Paare. Es würde eine kompliziertere Regex erfordern, um mit ; o & was meiner Meinung nach unnötig ist, da es selten vorkommt, dass ; verwendet wird, und ich würde sagen, dass es noch unwahrscheinlicher ist, dass beide verwendet werden. Wenn Sie Folgendes unterstützen müssen ; anstelle von & tauschen Sie sie einfach in der Regex aus.

---

Wenn Sie eine serverseitige Vorverarbeitungssprache verwenden, können Sie deren systemeigene JSON-Funktionen nutzen, um die schwere Arbeit für Sie zu erledigen. In PHP können Sie zum Beispiel schreiben:

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

Viel einfacher!

AKTUALISIERT

Eine neue Fähigkeit wäre, wiederholte Parameter wie folgt abzurufen myparam=1&myparam=2 . Es gibt keine Spezifikation Die meisten der derzeitigen Ansätze verfolgen jedoch die Erzeugung eines Arrays.

myparam = ["1", "2"]

Das ist also der Ansatz zur Bewältigung des Problems:

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

Answer 3

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

Mit einer URL wie ?topic=123&name=query+string wird folgendes zurückgegeben:

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

---

Google-Verfahren

Beim Durchforsten des Codes von Google 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
}

Sie ist verschleiert, aber sie ist verständlich. Es funktioniert nicht, weil einige Variablen undefiniert sind.

Sie beginnen mit der Suche nach Parametern in der Url von ? und auch von der Raute # . Dann werden sie für jeden Parameter durch das Gleichheitszeichen getrennt b[f][p]("=") (was aussieht wie indexOf Sie verwenden die Position des Zeichens, um den Schlüssel/Wert zu erhalten). Nach der Aufteilung wird geprüft, ob der Parameter einen Wert hat oder nicht, wenn ja, wird der Wert von d sonst machen sie einfach weiter.

Letztendlich ist der Gegenstand d wird zurückgegeben, wobei das Escaping und die + Zeichen. 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);

Uso

//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: Methodenerklärung

Split-Test-Code

var qs = window.GetQueryString(query);

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

Regex Test Code

var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

Testen in Firefox 4.0 x86 auf Windows Server 2008 R2 / 7 x64

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

Answer 4

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

Es gibt eine von Google vorgeschlagene URLSearchParams Polyfill für die stabilen Versionen des IE.

Sie ist nicht standardisiert durch W3C aber es ist ein Lebensstandard nach WhatWG .

Sie können es verwenden für location :

const params = new URLSearchParams(location.search);

oder

const params = (new URL(location)).searchParams;

Oder natürlich auf jeder URL:

const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);

Sie können params auch mit einer Kurzform abrufen .searchParams Eigenschaft des URL-Objekts, etwa so:

const params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2" 

Sie lesen/setzen Parameter über die get(KEY) , set(KEY, VALUE) , append(KEY, VALUE) API. Sie können auch über alle Werte iterieren for (let p of params) {} .

A Referenzimplementierung und eine Beispielseite sind für Audits und Tests verfügbar.

Answer 5

Verbesserte Version von 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/