Frage Wie kann ich Abfragezeichenfolgenwerte in JavaScript abrufen?


Gibt es einen plugin-losen Weg zum Abrufen Abfragezeichenfolge Werte über jQuery (oder ohne)?

Wenn das so ist, wie? Wenn nicht, gibt es ein Plugin, das das kann?


2703


Ursprung


Antworten:


Sie brauchen jQuery nicht für diesen Zweck. Sie können nur ein paar reine 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, ' '));
}

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 mehrmals vorhanden ist (?foo=lorem&foo=ipsum), erhalten Sie den ersten Wert (lorem). Es gibt keinen Standard darüber und die Verwendung variiert, siehe zum Beispiel diese Frage: Autorisierende Position von doppelten HTTP GET-Abfrageschlüsseln.
HINWEIS: Bei der Funktion wird zwischen Groß- und Kleinschreibung unterschieden. Wenn Sie den Parameternamen ohne Berücksichtigung der Groß- und Kleinschreibung bevorzugen, füge 'i' Modifikator zu RegExp hinzu


Dies ist ein Update basierend auf dem neuen URLSearchParams-Spezifikationen um das gleiche Ergebnis prägnanter zu erreichen. Siehe Antwort mit dem Titel "URLSearchParams"unten.


7017



Einige der hier veröffentlichten Lösungen sind ineffizient. Das Wiederholen der regulären Ausdruckssuche jedes Mal, wenn das Skript auf einen Parameter zugreifen muss, ist völlig unnötig. Eine einzige Funktion, die Parameter in ein assoziatives Array-Style-Objekt aufzuteilen, reicht aus. Wenn Sie nicht mit der HTML 5-Verlaufs-API arbeiten, ist dies nur einmal pro Seite erforderlich. Die anderen Vorschläge können die URL 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.Lage.search.Teilzeichenfolge(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 Array-artige Abfrage-Strings zu behandeln. Ein Beispiel dafür ist Hier, aber da array-style Parameter nicht definiert sind RFC 3986 Ich werde diese Antwort nicht mit dem Quellcode verschmutzen. Für diejenigen, die an einer "verschmutzten" Version interessiert sind, werfen Sie einen Blick auf die folgende Antwort von campbeln.

Wie in den Kommentaren ausgeführt, ; ist ein zulässiges Trennzeichen für key=value Paare. Es würde eine kompliziertere Regex erfordern ; oder &, was ich für unnötig halte, weil es selten ist ; wird verwendet und ich würde sagen noch unwahrscheinlicher, dass beide benutzt würden. Wenn Sie Unterstützung benötigen ; Anstatt von &, tausche sie einfach in der Regex.


  Wenn Sie eine serverseitige Vorverarbeitungssprache verwenden, möchten Sie möglicherweise die systemeigenen JSON-Funktionen verwenden, um den Schwertransport für Sie durchzuführen. Zum Beispiel können Sie in PHP schreiben:

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

Viel einfacher!


1626



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

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

Google-Methode

Den Code von Google zerreißen Ich fand die Methode, 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.

Sie beginnen nach Parametern auf der URL von zu suchen ? und auch aus dem Hash #. Dann teilen sie sich für jeden Parameter das Gleichheitszeichen auf b[f][p]("=") (Das sieht aus wie indexOfbenutzen sie die Position des Chars, um den Schlüssel / Wert zu erhalten). Wenn sie geteilt werden, prüfen sie, ob der Parameter einen Wert hat oder nicht, wenn er dann den Wert von dsonst gehen sie einfach weiter.

Am Ende das Objekt d zurückgegeben wird, Umgang mit Flucht und die + Schild. Dieses Objekt ist genau wie meines, 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);

Verwendung

//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: Deklaration der Methoden

Geteilter Testcode

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

1194



Verbesserte Version von Artem Bargers Antwort:

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/


636



URLSearchParams

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

Es gibt einen Google-Vorschlag URLSearchParams Polyfill für die stabilen Versionen von IE.

Es ist nicht standardisiert durch W3C, aber es ist ein Lebensstandard von WasWG.

Sie können es vor Ort verwenden, aber Sie müssen das entfernen ? Fragezeichen (zum Beispiel mit .slice(1)):

let params = new URLSearchParams(location.search.slice(1));

oder

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

Oder natürlich auf jeder URL:

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

Sie können Params auch mit einer Kurzschrift erhalten .searchParams Eigenschaft auf dem URL-Objekt, wie folgt:

let 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) {}.

EIN Referenzimplementierung und ein Beispielseite stehen für Auditing und Testing zur Verfügung.


482



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 Nutzung 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 gepflegt und der Autor empfiehlt die Verwendung URI.js stattdessen. Das jQuery-Plugin unterscheidet sich dadurch, dass es sich auf Elemente konzentriert - zur Verwendung mit Strings einfach verwenden URI direkt, mit oder ohne jQuery. Ein ähnlicher Code würde als solcher aussehen, vollere 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'

394



Roshambo auf snipplr.com hat ein einfaches Skript, um dies in beschrieben zu erreichen Erhalte URL-Parameter mit jQuery | Verbessert. Mit seinem Skript können Sie auch einfach die gewünschten Parameter auswählen.

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 Ihre Parameter aus der Abfragezeichenfolge.

Also, wenn der URL / Query-String war xyz.com/index.html?lang=de.

Ruf einfach an var langval = $.urlParam('lang');und du hast es.

UZBEKJON hat auch einen tollen Blogeintrag dazu, Rufen Sie URL-Parameter und -Werte mit jQuery ab.


215