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

Nur eine weitere Empfehlung. Das Plugin Leinen ermöglicht es, alle Teile der URL abzurufen, einschließlich Anker, Host, usw.

Es kann mit oder ohne jQuery verwendet werden.

Die Verwendung 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'

Seit dem 11. November 2014 wird Purl jedoch nicht mehr gepflegt und der Autor empfiehlt die Verwendung von URI.js stattdessen. Das jQuery-Plugin unterscheidet sich insofern, als es sich auf Elemente konzentriert - für die Verwendung mit Strings verwenden Sie einfach URI direkt, mit oder ohne jQuery. Ein ähnlicher Code würde wie folgt aussehen, umfassendere Docs aquí :

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'

Answer 2

tl;dr

Eine schnelle, Komplettlösung der die mehrwertige Schlüssel y kodierte Zeichen .

// using ES5   (200 characters)
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)})

// as a function with reduce
function getQueryParams() {
  return location.search
    ? location.search.substr(1).split`&`.reduce((qd, item) => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v); return qd}, {})
    : {}
}

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 das für ein Code...
_"Null-Koaleszenz" , Kurzschlussauswertung
ES6 Destrukturierung von Aufträgen , Pfeil-Funktionen , Vorlage Zeichenfolgen_ ####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]})

• Griffe leere Tasten richtig.

• Überschreibt Multi-Tasten mit zuletzt Wert gefunden.

  "?a=1&b=0&c=3&d&e&a=5"

  queryDict a: "5" b: "0" c: "3" d: undefined e: undefined

Schlüssel mit mehreren Werten

Einfache Schlüsselkontrolle (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]]})

• Jetzt kehrt zurück Arrays stattdessen.

• Zugriff auf Werte durch qd.key[index] o qd[key][index]

  qd a: ["1", "5"] b: ["0"] c: ["3"] d: [undefined] e: [undefined]

Kodierte Zeichen?

Verwenden Sie decodeURIComponent() für die zweite oder beides spaltet.

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

---

# Von Kommentaren **\*!!!** Bitte beachten Sie, dass `decodeURIComponent(undefined)` den String `"undefined"` zurückgibt. Die Lösung liegt in einer einfachen Verwendung von [`&&`][5], die sicherstellt, dass `decodeURIComponent()` nicht bei undefinierten Werten aufgerufen wird. (Siehe die "vollständige Lösung" am Anfang.)_

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 die Parsing-Funktion likeso gestartet wird:

if (location.search) location.search.substr(1).split("&").forEach(...)

Answer 3

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

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 dem Query-String.

Wenn also die URL/Abfragezeichenfolge lautet xyz.com/index.html?lang=de .

Einfach anrufen var langval = $.urlParam('lang'); und schon haben Sie es.

UZBEKJON hat dazu auch einen tollen Blogbeitrag verfasst, URL-Parameter und Werte mit jQuery abrufen .

Answer 4

Wenn Sie jQuery verwenden, können Sie eine Bibliothek, wie z. B. jQuery BBQ: Zurück-Taste & Abfrage-Bibliothek .

...jQuery BBQ bietet eine vollständige .deparam() Methode, zusammen mit der Hash-Zustandsverwaltung und den Methoden zum Parsen und Zusammenführen von Fragmenten und Abfragezeichenfolgen.

Edit: Deparam Beispiel hinzugefügt:

 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 History API und speziell history.pushState() y history.replaceState() kann sich die URL ändern, wodurch der Cache der Parameter und ihrer Werte ungültig wird.

Diese Version aktualisiert ihren internen Parameter-Cache jedes Mal, wenn sich der Verlauf ändert.

Answer 5

Verwenden Sie einfach zwei spaltet :

function get(n) {
    var half = location.search.split(n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

Ich habe alle früheren und ausführlicheren Antworten gelesen. Aber ich denke, das ist die einfachste und schnellste Methode. Sie können in diesem jsPerf überprüfen Benchmark

Um das Problem in Rups Kommentar zu lösen, fügen Sie einen bedingten Split hinzu, indem Sie die erste Zeile durch die beiden folgenden ersetzen. Aber absolute Genauigkeit bedeutet, dass es jetzt langsamer ist als regexp (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 den Gegenfall von Rup stoßen werden, ist dies die beste Lösung. Andernfalls: regexp.

Oder wenn Sie die Kontrolle über den Querystring haben und garantieren können, dass ein Wert, den Sie zu erhalten versuchen, niemals einen URL-codierten Zeichen enthält (diese in einem Wert zu haben, wäre eine schlechte Idee) - können Sie die folgende leicht vereinfachte und lesbare Version der 1. Option verwenden:

    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;