it-swarm.com.de

Wie kann ich Abfragezeichenfolgenwerte in JavaScript abrufen?

Gibt es eine Plug-in-freie Möglichkeit, Abfragezeichenfolge Werte über jQuery (oder ohne) abzurufen?

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

2701
Kemal Emin

Update: Sep-2018

Sie können URLSearchParams verwenden, das einfach ist und eine anständige (aber nicht vollständige) Browserunterstützung aufweist .

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

Original

Sie brauchen dafür kein jQuery. Sie können nur etwas 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, ' '));
}

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). Diesbezüglich gibt es keinen Standard und die Verwendung variiert, siehe zum Beispiel diese Frage: Autorisierende Position doppelter HTTP-GET-Abfrageschlüssel .
HINWEIS: Die Funktion unterscheidet zwischen Groß- und Kleinschreibung. 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 noch prägnanter zu erzielen. Siehe Antwort mit dem Titel " URLSearchParams " unten.

7846
Artem Barger

Einige der hier aufgeführten 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 Stil eines assoziativen Arrays ist ausreichend. Wenn Sie nicht mit der HTML 5-Protokoll-API arbeiten, ist dies nur einmal pro Seitenladevorgang erforderlich. Die anderen Vorschläge hier entschlüsseln die URL ebenfalls nicht richtig.

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 einen 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 hier , aber da Array-Stil-Parameter nicht in RFC 3986 definiert sind Ich werde diese Antwort nicht mit dem Quellcode verunreinigen. Für diejenigen, die an einer "verschmutzten" Version interessiert sind, schauen Sie sich die Antwort von Campbeln unten an .

Wie in den Kommentaren erwähnt, ist ; ein zulässiger Begrenzer für key=value Paare. Es würde einen komplizierteren regulären Ausdruck erfordern, um ; oder & zu handhaben, was ich für unnötig halte, da ; selten verwendet wird und ich würde sagen, dass es noch unwahrscheinlicher ist, dass beide verwendet werden. Wenn Sie ; anstelle von & unterstützen müssen, tauschen Sie sie einfach in der regulären Ausdrucksweise aus.


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

Viel einfacher!

1680
Andy E

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-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 verständlich. Es funktioniert nicht, da einige Variablen undefiniert sind.

Sie fangen an, nach Parametern in der URL von ? und auch vom Hash # zu suchen. Dann teilen sie sich für jeden Parameter das Gleichheitszeichen b[f][p]("=") (das wie indexOf aussieht, 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 ja, speichern sie den Wert von d, andernfalls fahren sie einfach fort.

Am Ende wird das Objekt d zurückgegeben, die Behandlung erfolgt mit Escape-Zeichen und dem 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);

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

Split-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

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

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/

655
James

URLSearchParams

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

Es gibt eine von Google vorgeschlagene RLSearchParams polyfill für die stabilen Versionen von IE.

Es ist nicht standardisiert durch W3C , aber es ist ein lebender Standard durch WhatWG .

Sie können es vor Ort verwenden, müssen jedoch das Fragezeichen ? entfernen (z. B. mit .slice(1)):

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 params auch mit einer .searchParams -Eigenschaft 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 können Parameter über die API get(KEY), set(KEY, VALUE), append(KEY, VALUE) lesen/einstellen. Sie können auch alle Werte durchlaufen for (let p of params) {}.

Eine Referenzimplementierung und eine Beispielseite stehen für Audits und Tests zur Verfügung.

559
Paul Sweatte

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 gepflegt, und der Autor empfiehlt, stattdessen RI.js zu verwenden. Das jQuery-Plugin unterscheidet sich darin, dass es sich auf Elemente konzentriert - für die Verwendung mit Zeichenfolgen verwenden Sie einfach URI direkt, mit oder ohne jQuery. Ein ähnlicher Code würde so 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'
400
AlfaTeK

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" , Kurzschlussbewertung
ES6 Destructuring Assignments , Arrow Functions , Template Strings

_"?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 Schlüssel korrekt.
  • Überschreibt multitasten 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
_

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]]})
_
  • Jetzt kehrt zurück arrays stattdessen.
  • Zugriffswerte durch _qd.key[index]_ oder _qd[key][index]_
_> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]
_

Verschlüsselte Zeichen?

Verwenden Sie decodeURIComponent() für den zweiten oder beide Splits.

_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 decodeURIComponent(undefined) den String _"undefined"_ zurückgibt. Die Lösung liegt in der einfachen Verwendung von && , wodurch sichergestellt wird, dass decodeURIComponent() nicht für undefinierte Werte aufgerufen wird. (Siehe "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 vor dem Start der Parsing-Funktion zu überprüfen.

_if (location.search) location.search.substr(1).split("&").forEach(...)
_
235
Qwerty

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

Hier ist der Kern:

$.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 xyz.com/index.html?lang=de war.

Rufen Sie einfach var langval = $.urlParam('lang'); an und Sie haben es.

UZBEKJON hat auch hier einen großartigen Blog-Beitrag, RL-Parameter und -Werte mit jQuery abrufen.

216
brandonjp

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 Hash-Status-Verwaltung sowie den Dienstprogrammmethoden 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 Cache der Parameter jedes Mal, wenn sich der Verlauf ändert.

166
alex

Verwenden Sie einfach zwei Aufteilungen :

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 Zeilen ä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 dieser. 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). - Sie können die folgende etwas vereinfachte und lesbare Version der ersten Option verwenden:

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

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!

94
Ryan Phelan

Wenn Sie mehr URL-Manipulationen vornehmen, als nur den Querystring zu analysieren, finden Sie möglicherweise RI.js hilfreich. Es handelt sich um eine Bibliothek zum Manipulieren von URLs - und sie ist mit allem Schnickschnack ausgestattet. (Sorry 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 "repariert" auch fehlerhafte Query-Ringe wie ?&foo&&bar=baz& bis ?foo&bar=baz)

76
rodneyrehm

Ich mag Ryan Phelans Lösung . Aber ich sehe keinen Grund dafür, jQuery 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 keine. Erstellen wir also diese Funktion, wenn sie nicht existiert:

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 ist mehr oder weniger von Ryan Phelan, wird jedoch anders verpackt: eindeutiger Name und keine Abhängigkeiten von anderen Javascript-Bibliotheken. Mehr zu dieser Funktion in meinem Blog .

60
Anatoly Mironov

Hier ist eine schnelle Methode, um ein Objekt zu erhalten, das dem Array PHP $ _ GET ä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 x=5&y&z=hello&x=6 gibt dies das Objekt zurück:

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

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 einer beliebigen Stelle im JavaScript-Code auf:

var result = qs('someKey');
52
Sagiv Ofek

Dies sind alles großartige Antworten, aber ich brauchte etwas Robusteres und dachte, dass Sie alle das haben möchten, 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 für die 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>');
46
Bernesto

Von der MDN :

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

alert(loadPageVar("name"));
43
orip

Ich benutze häufig reguläre Ausdrücke, aber nicht dafür.

Es scheint mir einfacher und effizienter zu sein, die Abfragezeichenfolge einmal in meiner Anwendung zu lesen und aus allen Schlüssel/Wert-Paaren ein Objekt zu erstellen, 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=val2 können Sie ihren Wert später in Ihrem Code als search.param1 und search.param2 abrufen.

39
Mic

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: test.htm?i=can&has=cheezburger wird angezeigt

0:can
1:cheezburger
i:can
has:cheezburger
39
shanimal

Die jQuery-Methode von Roshambo hat sich nicht um die Dekodierung der URL gekümmert

http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/

Fügte gerade diese Fähigkeit auch beim Hinzufügen in der Rückkehranweisung hinzu

return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;

Jetzt können Sie das aktualisierte Gist finden:

$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}
38
Mohammad Arif
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
38
Jet

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
Tomamais

Hier ist meine Bearbeitung zu diese ausgezeichnete 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 geändert? Mit der URL http://sb.com/reg/step1?param= werden die gleichen Ergebnisse erzielt. Aber mit der URL http://sb.com/reg/step1?param gibt Brunos Lösung ein Objekt ohne Schlüssel zurück, während meine ein Objekt mit den Werten param und undefined zurückgibt.

36
skaurus

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 Zeilen Code.

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

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

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_; _1_ geht verloren und wird durch _[2,3]_ ersetzt). Es wurden einige geringfügige Leistungsverbesserungen vorgenommen (Neudecodierung von Werten, Neuberechnung der Position "[" usw.) Es wurde 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 jede Menge Kommentare hinzugefügt, um sie lesbar zu machen (oh, und ich habe v innerhalb der lokalen Funktionen wieder verwendet, 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, verarbeitet diese Version einige Maße von "fehlerhaften" Arrays, dh - _person=neek&person[]=jeff&person[]=jim_ oder _person=neek&person=jeff&person=jim_, da 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 zur vorhandenen durch Kommas getrennten Liste der Werte in der Form "Wert1, Wert2, Wert3" hinzugefügt.

Es scheint die Jury ist etwas aus auf wiederholten Schlüsseln, da es keine Spezifikation gibt. In diesem Fall werden mehrere Schlüssel als (falsches) 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;
};
_
31
Campbeln

Dies ist eine Funktion, die ich vor einiger Zeit erstellt habe und mit der ich sehr zufrieden bin. Es wird nicht zwischen Groß- und Kleinschreibung unterschieden - 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 die Neulinge, um besser zu erklären, was los ist.

Ich bin sicher, dass dies optimiert oder anders gemacht werden könnte, um schneller zu arbeiten, aber es funktioniert immer hervorragend für das, 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);
}
31
Clint

Wir haben gerade arg.js veröffentlicht, ein Projekt, das dieses Problem ein für alle Mal lösen soll. 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=true und #hash=true interessieren, können Sie die Methoden Arg.query() und Arg.hash() verwenden.

27
Mat Ryer

Das Problem mit der obersten Antwort auf diese Frage ist, dass die nicht unterstützten Parameter hinter # stehen. Manchmal ist es jedoch erforderlich, diesen Wert auch abzurufen.

Ich habe die Antwort so geändert, dass sie eine vollständige Abfragezeichenfolge mit einem Hash-Zeichen analysiert:

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;
};
27
Ph0en1x
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 verwenden, vorausgesetzt, die URL lautet

http://dummy.com/?stringtext=jquery&stringword=jquerybyexample

var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');
25
gewel
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
  • Reguläres Schlüssel/Wert-Paar (?param=value)
  • Schlüssel ohne Wert (?param: kein Gleichheitszeichen oder Wert)
  • Schlüssel mit leerem Wert (?param=: Gleichheitszeichen, aber kein Wert rechts vom Gleichheitszeichen)
  • Wiederholte Tasten (?param=1&param=2)
  • Entfernt leere Schlüssel (?&&: kein Schlüssel oder Wert)

Code:

  • var queryString = window.location.search || '';
    var keyValPairs = [];
    var params      = {};
    queryString     = queryString.substr(1);
    
    if (queryString.length)
    {
       keyValPairs = queryString.split('&');
       for (pairNum in keyValPairs)
       {
          var key = keyValPairs[pairNum].split('=')[0];
          if (!key.length) continue;
          if (typeof params[key] === 'undefined')
             params[key] = [];
          params[key].Push(keyValPairs[pairNum].split('=')[1]);
       }
    }
    

So rufen Sie an:

  • params['key'];  // returns an array of values (1..n)
    

Ausgabe:

  • key            ["value"]
    keyemptyvalue  [""]
    keynovalue     [undefined, "nowhasvalue"]
    
20
vol7ron

Wenn Sie Browserify verwenden, können Sie das url -Modul aus 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 Manual & Documentation

BEARBEITEN: Sie können die URL - Schnittstelle verwenden, die in fast allen neuen Browsern verwendet wird und bei denen es sich um Code handelt Wenn Sie mit einem alten Browser arbeiten, können Sie ein Polyfill wie dieses verwenden. Im Folgenden finden Sie ein Codebeispiel für die 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 es 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"
20
nkh

Ich habe eine kleine Bibliothek mit den hier aufgeführten Techniken entwickelt, um eine benutzerfreundliche Drop-In-Lösung für alle Probleme zu erstellen. Es kann hier gefunden werden:

https://github.com/Nijikokun/query-js

Verwendung

Abrufen eines bestimmten Parameters/Schlüssels:

query.get('param');

Verwenden des Builders zum Abrufen des gesamten Objekts:

var storage = query.build();
console.log(storage.param);

und Tonnen mehr ... überprüfen Sie den Github-Link für weitere Beispiele.

Funktionen

  1. Zwischenspeicherung von Decodierung und Parametern
  2. Unterstützt Hash-Abfragezeichenfolgen #hello?page=3
  3. Unterstützt das Weiterleiten benutzerdefinierter Abfragen
  4. Unterstützt Array-/Objektparameter user[]="jim"&user[]="bob"
  5. Unterstützt Leerverwaltung &&
  6. Unterstützt Deklarationsparameter ohne Werte name&hello="world"
  7. Unterstützt wiederholte Parameter param=1&param=2
  8. Saubere, kompakte und lesbare Quelle 4kb
  9. AMD, Require, Node -Unterstützung
20
Nijikokun

Einzeilig, um die Abfrage zu erhalten:

var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];
20
Anoop

Eine sehr leichte jQuery-Methode:

var qs = window.location.search.replace('?','').split('&'),
    request = {};
$.each(qs, function(i,v) {
    var initial, pair = v.split('=');
    if(initial = request[pair[0]]){
        if(!$.isArray(initial)) {
            request[pair[0]] = [initial]
        }
        request[pair[0]].Push(pair[1]);
    } else {
        request[pair[0]] = pair[1];
    }
    return;
});
console.log(request);

Und um zum Beispiel zu alarmieren? Q

alert(request.q)
17
Roi

Hier ist meine Version des Parsing-Codes für Abfragezeichenfolgen auf GitHub .

Jquery. * Wird "vorangestellt", aber die Parsing-Funktion selbst verwendet jQuery nicht. Es ist ziemlich schnell, aber immer noch offen für ein paar einfache Leistungsoptimierungen.

Es unterstützt auch Listen- und Hash-Tabellen-Kodierungen in der URL, wie zB:

arr[]=10&arr[]=20&arr[]=100

oder

hash[key1]=hello&hash[key2]=moto&a=How%20are%20you

jQuery.toQueryParams = function(str, separator) {
    separator = separator || '&'
    var obj = {}
    if (str.length == 0)
        return obj
    var c = str.substr(0,1)
    var s = c=='?' || c=='#'  ? str.substr(1) : str; 

    var a = s.split(separator)
    for (var i=0; i<a.length; i++) {
        var p = a[i].indexOf('=')
        if (p < 0) {
            obj[a[i]] = ''
            continue
        }
        var k = decodeURIComponent(a[i].substr(0,p)),
            v = decodeURIComponent(a[i].substr(p+1))

        var bps = k.indexOf('[')
        if (bps < 0) {
            obj[k] = v
            continue;
        } 

        var bpe = k.substr(bps+1).indexOf(']')
        if (bpe < 0) {
            obj[k] = v
            continue;
        }

        var bpv = k.substr(bps+1, bps+bpe-1)
        var k = k.substr(0,bps)
        if (bpv.length <= 0) {
            if (typeof(obj[k]) != 'object') obj[k] = []
            obj[k].Push(v)
        } else {
            if (typeof(obj[k]) != 'object') obj[k] = {}
            obj[k][bpv] = v
        }
    }
    return obj;

}
16
Vadim

Folgendes verwende ich:

/**
 * Examples:
 * getUrlParams()['myparam']    // url defaults to the current page
 * getUrlParams(url)['myparam'] // url can be just a query string
 *
 * Results of calling `getUrlParams(url)['myparam']` with various urls:
 * example.com                               (undefined)
 * example.com?                              (undefined)
 * example.com?myparam                       (empty string)
 * example.com?myparam=                      (empty string)
 * example.com?myparam=0                     (the string '0')
 * example.com?myparam=0&myparam=override    (the string 'override')
 *
 * Origin: http://stackoverflow.com/a/23946023/2407309
 */
function getUrlParams (url) {
    var urlParams = {} // return value
    var queryString = getQueryString()
    if (queryString) {
        var keyValuePairs = queryString.split('&')
        for (var i = 0; i < keyValuePairs.length; i++) {
            var keyValuePair = keyValuePairs[i].split('=')
            var paramName = keyValuePair[0]
            var paramValue = keyValuePair[1] || ''
            urlParams[paramName] = decodeURIComponent(paramValue.replace(/\+/g, ' '))
        }
    }
    return urlParams // functions below
    function getQueryString () {
        var reducedUrl = url || window.location.search
        reducedUrl = reducedUrl.split('#')[0] // Discard fragment identifier.
        var queryString = reducedUrl.split('?')[1]
        if (!queryString) {
            if (reducedUrl.search('=') !== false) { // URL is a query string.
                queryString = reducedUrl
            }
        }
        return queryString
    } // getQueryString
} // getUrlParams

Wenn Sie im letzten Fall 'override' anstelle von '0' zurückgeben, ist dies mit PHP konsistent. Funktioniert in IE7.

12
Vladimir Kornea

Ich würde für diese Operation lieber split() anstelle von Regex verwenden:

function getUrlParams() {
    var result = {};
    var params = (window.location.search.split('?')[1] || '').split('&');
    for(var param in params) {
        if (params.hasOwnProperty(param)) {
            var paramParts = params[param].split('=');
            result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");
        }
    }
    return result;
}
11
Eneko Alonso

Dieser funktioniert gut

function getQuerystring(key) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == key) {
            return pair[1];
        }
    }
}

entnommen aus hier

11
IT ppl

Für diejenigen, die eine kurze Methode (mit Einschränkungen) wollen:

location.search.split('myParameter=')[1]
10
George

Liefert alle Querystring-Parameter einschließlich der Checkbox-Werte (Arrays).

In Anbetracht der korrekten und normalen Verwendung von GET-Parametern fehlt mir bei den meisten Funktionen die Unterstützung für Arrays und das Entfernen der Hash-Daten.

Also schrieb ich diese Funktion:

function qs(a){
 if(!a)return {};
 a=a.split('#')[0].split('&');
 var b=a.length,c={},d,k,v;
 while(b--){
  d=a[b].split('=');
  k=d[0].replace('[]',''),v=decodeURIComponent(d[1]||'');
  c[k]?typeof c[k]==='string'?(c[k]=[v,c[k]]):(c[k].unshift(v)):c[k]=v;
 }
 return c
}

Bei Verwendung von Kurzoperatoren & while-- loop sollte die Leistung sehr gut sein.

Support:

  1. Leere Werte ( key =/key )
  2. Schlüsselwert ( Schlüssel = Wert )
  3. Arrays ( key [] = value )
  4. Hash ( das Hash-Tag wird aufgeteilt )

Anmerkungen:

Objektarrays werden nicht unterstützt (key [key] = value)

Wenn das Leerzeichen + ist, bleibt es ein +.

Fügen Sie bei Bedarf .replace(/\+/g, " ") hinzu.

Verwendung:

qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')

Rückgabe:

{
    "empty": "",
    "key": "value",
    "array": [
        "1",
        "2"
    ]
}

Demo:

http://jsfiddle.net/ZQMrt/1/

Info

Wenn Sie etwas nicht verstehen oder die Funktion nicht lesen können, fragen Sie einfach. Gerne erkläre ich, was ich hier gemacht habe.

Wenn Sie der Meinung sind, dass die Funktion nicht lesbar und nicht wartbar ist, schreibe ich die Funktion gerne für Sie um. Beachten Sie jedoch, dass Kurz- und Bitoperatoren immer schneller sind als eine Standardsyntax (lesen Sie dazu möglicherweise Kurz- und Bitoperatoren in das ECMA-262-Buch oder verwenden Sie Ihre Lieblingssuchmaschine). Das Umschreiben des Codes in einer standardmäßigen lesbaren Syntax bedeutet einen Leistungsverlust.

10
cocco
function getUrlVar(key){
    var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); 
    return result && unescape(result[1]) || ""; 
}

https://Gist.github.com/1771618

8
alkos333

Diese Funktion konvertiert den Querystring in ein JSON-ähnliches Objekt und verarbeitet auch wertlose und mehrwertige Parameter:

"use strict";
function getQuerystringData(name) {
    var data = { };
    var parameters = window.location.search.substring(1).split("&");
    for (var i = 0, j = parameters.length; i < j; i++) {
        var parameter = parameters[i].split("=");
        var parameterName = decodeURIComponent(parameter[0]);
        var parameterValue = typeof parameter[1] === "undefined" ? parameter[1] : decodeURIComponent(parameter[1]);
        var dataType = typeof data[parameterName];
        if (dataType === "undefined") {
            data[parameterName] = parameterValue;
        } else if (dataType === "array") {
            data[parameterName].Push(parameterValue);
        } else {
            data[parameterName] = [data[parameterName]];
            data[parameterName].Push(parameterValue);
        }
    }
    return typeof name === "string" ? data[name] : data;
}

Wir überprüfen undefined auf parameter[1], da decodeURIComponent die Zeichenfolge "undefiniert" zurückgibt, wenn die Variable undefined ist, und das ist falsch.

Verwendungszweck:

"use strict";
var data = getQuerystringData();
var parameterValue = getQuerystringData("parameterName");
6
Albireo

Versuche dies:

String.prototype.getValueByKey = function(k){
    var p = new RegExp('\\b'+k+'\\b','gi');
    return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p)+k.length+1).substr(0,this.substr(this.search(p)+k.length+1).search(/(&|;|$)/))) : "";
};

Dann nenne es so:

if(location.search != "") location.search.getValueByKey("id");

Sie können dies auch für Cookies verwenden:

if(navigator.cookieEnabled) document.cookie.getValueByKey("username");

Dies funktioniert nur für Zeichenfolgen, die key=value[&|;|$]... haben, und funktioniert nicht für Objekte/Arrays.

Wenn Sie nicht verwenden möchten String.prototype ... verschieben Sie es in eine Funktion und übergeben Sie den String als Argument

6
user981090

Ich habe diesen Code (JavaScript) verwendet, um zu ermitteln, was über die URL übertragen wird:

function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                vars[key] = value;
            });
            return vars;
        }

Um den Wert dann einer Variablen zuzuweisen, müssen Sie nur angeben, welchen Parameter Sie erhalten möchten, dh wenn die URL example.com/?I=1&p=2&f=3 ist.

Sie können dies tun, um die Werte zu erhalten:

var getI = getUrlVars()["I"];
var getP = getUrlVars()["p"];
var getF = getUrlVars()["f"];

dann wären die Werte:

getI = 1, getP = 2 and getF = 3
6
user2579312

Der folgende Code erstellt ein Objekt mit zwei Methoden:

  1. isKeyExist: Überprüfen Sie, ob ein bestimmter Parameter vorhanden ist
  2. getValue: Liefert den Wert eines bestimmten Parameters.

var QSParam = new function() {
       var qsParm = {};
       var query = window.location.search.substring(1);
       var params = query.split('&');
       for (var i = 0; i < params.length; i++) {
           var pos = params[i].indexOf('=');
           if (pos > 0) {
               var key = params[i].substring(0, pos);
               var val = params[i].substring(pos + 1);
               qsParm[key] = val;
           }
       }
       this.isKeyExist = function(query){
           if(qsParm[query]){
               return true;
           }
           else{
              return false;
           }
       };
       this.getValue = function(query){
           if(qsParm[query])
           {
               return qsParm[query];
           }
           throw "URL does not contain query "+ query;
       }
};
6
Anoop

Die folgende Funktion gibt eine Objektversion Ihres queryString zurück. Sie können einfach obj.key1 und obj.key2 schreiben, um auf die Werte von key1 und key2 im Parameter zuzugreifen.

function getQueryStringObject()
{
    var querystring = document.location.search.replace('?','').split( '&' );
    var objQueryString={};
    var key="",val="";
    if(typeof querystring == 'undefined')
    {
        return (typeof querystring);
    }
    for(i=0;i<querystring.length;i++)
    {
        key=querystring[i].split("=")[0];
        val=querystring[i].split("=")[1];
        objQueryString[key] = val;
    }
    return objQueryString;
}

Und um diese Funktion zu nutzen, können Sie schreiben

var obj= getQueryStringObject();
alert(obj.key1);
5
Imdad

Hier ist meine eigene Meinung dazu. Diese erste Funktion dekodiert eine URL-Zeichenfolge in ein Objekt mit Name/Wert-Paaren:

url_args_decode = function (url) {
  var args_enc, el, i, nameval, ret;
  ret = {};
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  // strip off initial ? on search and split
  args_enc = el.search.substring(1).split('&');
  for (i = 0; i < args_enc.length; i++) {
    // convert + into space, split on =, and then decode 
    args_enc[i].replace(/\+/g, ' ');
    nameval = args_enc[i].split('=', 2);
    ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);
  }
  return ret;
};

Und als zusätzlichen Bonus können Sie, wenn Sie einige der Argumente ändern, diese zweite Funktion verwenden, um das Array von Argumenten wieder in die URL-Zeichenfolge einzufügen:

url_args_replace = function (url, args) {
  var args_enc, el, name;
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  args_enc = [];
  // encode args to go into url
  for (name in args) {
    if (args.hasOwnProperty(name)) {
      name = encodeURIComponent(name);
      args[name] = encodeURIComponent(args[name]);
      args_enc.Push(name + '=' + args[name]);
    }
  }
  if (args_enc.length > 0) {
    el.search = '?' + args_enc.join('&');
  } else {
    el.search = '';
  }
  return el.href;
};
5
BMitch

Ich habe hier eine kleine URL-Bibliothek für meine Bedürfnisse erstellt: https://github.com/Mikhus/jsurl

Dies ist eine häufigere Methode zum Bearbeiten der URLs in JavaScript. Mittlerweile ist es sehr leicht (minimiert und mit <1 KB komprimiert) und verfügt über eine sehr einfache und saubere API. Und es braucht keine andere Bibliothek, um zu arbeiten.

In Bezug auf die erste Frage ist es sehr einfach zu tun:

var u = new Url; // Current document URL
// or
var u = new Url('http://user:[email protected]:8080/some/path?foo=bar&bar=baz#anchor');

// Looking for query string parameters
alert( u.query.bar);
alert( u.query.foo);

// Modifying query string parameters
u.query.foo = 'bla';
u.query.woo = ['hi', 'hey']

alert(u.query.foo);
alert(u.query.woo);
alert(u);
5
Mikhus

Wenn Sie Parameter im Array-Stil möchten, unterstützt RL.js beliebig verschachtelte Parameter im Array-Stil sowie Zeichenfolgenindizes (Maps). Es übernimmt auch die URL-Dekodierung.

url.get("val[0]=zero&val[1]=one&val[2]&val[3]=&val[4]=four&val[5][0]=n1&val[5][1]=n2&val[5][2]=n3&key=val", {array:true});
// Result
{
    val: [
        'zero',
        'one',
        true,
        '',
        'four',
        [ 'n1', 'n2', 'n3' ]
    ]
    key: 'val'
}
4
Kevin Cox

Es gibt viele Lösungen zum Abrufen von URI-Abfragewerten. Ich bevorzuge diese, da sie kurz ist und hervorragend funktioniert:

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}
4
BlueMark

Eine einfache Lösung mit einfachem JavaScript und regulären Ausdrücken :

alert(getQueryString("p2"));

function getQueryString (Param) {
    return decodeURI("http://www.example.com/?p1=p11&p2=p2222".replace(new RegExp("^(?:.*[&?]" + encodeURI(Param).replace(/[.+*]/g, "$&") + "(?:=([^&]*))?)?.*$", "i"), "$1"));
}

JsFiddle

4

Es gibt ein nettes kleines url-Dienstprogramm für dieses mit etwas kühlem Zucker:

http://www.example.com/path/index.html?silly=willy#chucky=cheese

url();            // http://www.example.com/path/index.html?silly=willy#chucky=cheese
url('domain');    // example.com
url('1');         // path
url('-1');        // index.html
url('?');         // silly=willy
url('?silly');    // willy
url('?poo');      // (an empty string)
url('#');         // chucky=cheese
url('#chucky');   // cheese
url('#poo');      // (an empty string)

Schauen Sie sich weitere Beispiele an und laden Sie sie hier herunter: https://github.com/websanova/js-url#url

4
Rob

Dies ist die einfachste und kleinste Funktion, mit der JavaScript den Wert eines Intans-String-Parameters von der URL abruft

/* THIS FUNCTION IS TO FETCH INT PARAMETER VALUES */

function getParameterint(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=parseInt(url.replace(param+"=",""));
            alert(n); 
}
getParameteraint("page");
getParameteraint("pagee");

/*THIS FUNCTION IS TO FETCH STRING PARAMETER*/
function getParameterstr(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=url.replace(param+"=","");
            alert(n); 
}
getParameterstr("str");

Quelle und DEMO: http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter- in-javascript.html

4
Code Spy

Es gibt eine robuste Implementierung in der Quelle von Node.js
https://github.com/joyent/node/blob/master/lib/querystring.js

Auch TJs qs parst verschachtelt
https://github.com/visionmedia/node-querystring

4
clyfe

Wenn Sie nderscore.js oder lodash haben, ist ein schneller und schmutziger Weg, dies zu erledigen:

_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));
4
acjay
var getUrlParameters = function (name, url) {
    if (!name) {
        return undefined;
    }

    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    url = url || location.search;

    var regex = new RegExp('[\\?&#]' + name + '=?([^&#]*)', 'gi'), result, resultList = [];

    while (result = regex.exec(url)) {
        resultList.Push(decodeURIComponent(result[1].replace(/\+/g, ' ')));
    }

    return resultList.length ? resultList.length === 1 ? resultList[0] : resultList : undefined;
};
4
kayz1

Ich nahm diese Antwort und fügte die Unterstützung für die optionale Übergabe der URL als Parameter hinzu. greift auf window.location.search zurück. Dies ist natürlich nützlich, um die Parameter der Abfragezeichenfolge von URLs abzurufen, die nicht die aktuelle Seite sind:

(function($, undef) {
  $.QueryString = function(url) {
    var pairs, qs = null, index, map = {};
    if(url == undef){
      qs = window.location.search.substr(1);
    }else{
      index = url.indexOf('?');
      if(index == -1) return {};
      qs = url.substring(index+1);
    }
    pairs = qs.split('&');
    if (pairs == "") return {};
    for (var i = 0; i < pairs.length; ++i)
    {
      var p = pairs[i].split('=');
      if(p.length != 2) continue;
      map[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return map;
  };
})(jQuery);
4
mynameistechno

Ich halte dies für einen präzisen und präzisen Weg, um dies zu erreichen (geändert von http://css-tricks.com/snippets/javascript/get-url-variables/ ):

function getQueryVariable(variable) {

    var query = window.location.search.substring(1),            // Remove the ? from the query string.
        vars = query.split("&");                                // Split all values by ampersand.

    for (var i = 0; i < vars.length; i++) {                     // Loop through them...
        var pair = vars[i].split("=");                          // Split the name from the value.
        if (pair[0] == variable) {                              // Once the requested value is found...
            return ( pair[1] == undefined ) ? null : pair[1];   // Return null if there is no value (no equals sign), otherwise return the value.
        }
    }

    return undefined;                                           // Wasn't found.

}

Dies ist eine sehr einfache Methode, um den Parameterwert (Abfragezeichenfolge) abzurufen.

Verwenden Sie die Funktion gV(para_name), um ihren Wert abzurufen

var a=window.location.search;
a=a.replace(a.charAt(0),""); //Removes '?'
a=a.split("&");

function gV(x){
 for(i=0;i<a.length;i++){
  var b=a[i].substr(0,a[i].indexOf("="));
  if(x==b){
   return a[i].substr(a[i].indexOf("=")+1,a[i].length)}
3
Ankit_Shah55

Wenn Sie keine JavaScript-Bibliothek verwenden möchten, können Sie die JavaScript-Zeichenfolgenfunktionen verwenden, um window.location zu analysieren. Bewahren Sie diesen Code in einer externen .js-Datei auf, und Sie können ihn in verschiedenen Projekten immer wieder verwenden.

// Example - window.location = "index.htm?name=bob";

var value = getParameterValue("name");

alert("name = " + value);

function getParameterValue(param)
{
    var url = window.location;
    var parts = url.split('?');
    var params = parts[1].split('&');
    var val = "";

    for ( var i=0; i<params.length; i++)
    {
        var paramNameVal = params[i].split('=');

        if ( paramNameVal[0] == param )
        {
            val = paramNameVal[1];
        }
    }
    return val;
}
3
Robert Bolton

Am hübschesten, aber einfach:

data = {};
$.each(
    location.search.substr(1).split('&').filter(Boolean).map(function(kvpairs){
        return kvpairs.split('=')
    }),
    function(i,values) {
        data[values.shift()] = values.join('=')
    }
);

Wertelisten wie ?a[]=1&a[]2 werden nicht verarbeitet.

3
Damien

Ich empfehle Dar Lessons als gutes Plugin. Ich habe lange damit gearbeitet. Sie können auch den folgenden Code verwenden. Stellen Sie var queryObj = {}; vor document.ready und setzen Sie den folgenden Code an den Anfang von document.ready. Nach diesem Code können Sie queryObj["queryObjectName"] für jedes Abfrageobjekt verwenden, das Sie haben

var querystring = location.search.replace('?', '').split('&');
for (var i = 0; i < querystring.length; i++) {
    var name = querystring[i].split('=')[0];
    var value = querystring[i].split('=')[1];
    queryObj[name] = value;
}
2
farnoush resa

Der kürzestmögliche Ausdruck in Bezug auf die Größe, um ein Abfrageobjekt zu erhalten, scheint zu sein:

var params = {};
location.search.substr(1).replace(/([^&=]*)=([^&]*)&?/g,
  function () { params[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]); });

Sie können das A -Element verwenden, um einen URI aus einem String in seine location -ähnlichen Komponenten zu zerlegen (um beispielsweise #... zu entfernen):

var a = document.createElement('a');
a.href = url;
// Parse a.search.substr(1)... as above
2
daluege

Verwenden:

  $(document).ready(function () {
      var urlParams = {};
      (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);

          while (match = search.exec(query))
              urlParams[decode(match[1])] = decode(match[2]);
      })();
      if (urlParams["q1"] === 1) {
          return 1;
      }

Bitte überprüfen Sie und teilen Sie mir Ihre Kommentare. Siehe auch So erhalten Sie einen Abfragezeichenfolgewert mit jQuery.

2
Pushkraj

Dadurch werden die Variablen UND Arrays aus einer URL-Zeichenfolge analysiert. Es werden weder Regex noch externe Bibliotheken verwendet.

function url2json(url) {
   var obj={};
   function arr_vals(arr){
      if (arr.indexOf(',') > 1){
         var vals = arr.slice(1, -1).split(',');
         var arr = [];
         for (var i = 0; i < vals.length; i++)
            arr[i]=vals[i];
         return arr;
      }
      else
         return arr.slice(1, -1);
   }
   function eval_var(avar){
      if (!avar[1])
          obj[avar[0]] = '';
      else
      if (avar[1].indexOf('[') == 0)
         obj[avar[0]] = arr_vals(avar[1]);
      else
         obj[avar[0]] = avar[1];
   }
   if (url.indexOf('?') > -1){
      var params = url.split('?')[1];
      if(params.indexOf('&') > 2){
         var vars = params.split('&');
         for (var i in vars)
            eval_var(vars[i].split('='));
      }
      else
         eval_var(params.split('='));
   }
   return obj;
}

Beispiel:

var url = "http://www.x.com?luckyNums=[31,21,6]&name=John&favFoods=[pizza]&noVal"
console.log(url2json(url));

Ausgabe:

[object]
   noVal: ""
   favFoods: "pizza"
   name:     "John"
   luckyNums:
      0: "31"
      1: "21"
      2: "6"
2
Pithikos

Diese Funktion gibt bei Bedarf ein geparstes JavaScript-Objekt mit willkürlich verschachtelten Werten unter Verwendung von Rekursion zurück.

Hier ist ein jsfiddle Beispiel.

[
  '?a=a',
  '&b=a',
  '&b=b',
  '&c[]=a',
  '&c[]=b',
  '&d[a]=a',
  '&d[a]=x',
  '&e[a][]=a',
  '&e[a][]=b',
  '&f[a][b]=a',
  '&f[a][b]=x',
  '&g[a][b][]=a',
  '&g[a][b][]=b',
  '&h=%2B+%25',
  '&i[aa=b',
  '&i[]=b',
  '&j=',
  '&k',
  '&=l',
  '&abc=foo',
  '&def=%5Basf%5D',
  '&ghi=[j%3Dkl]',
  '&xy%3Dz=5',
  '&foo=b%3Dar',
  '&xy%5Bz=5'
].join('');

Gegeben sei eines der obigen Testbeispiele.

var qs = function(a) {
  var b, c, e;
  b = {};
  c = function(d) {
    return d && decodeURIComponent(d.replace(/\+/g, " "));
  };
  e = function(f, g, h) {
    var i, j, k, l;
    h = h ? h : null;
    i = /(.+?)\[(.+?)?\](.+)?/g.exec(g);
    if (i) {
      [j, k, l] = [i[1], i[2], i[3]]
      if (k === void 0) {
        if (f[j] === void 0) {
          f[j] = [];
        }
        f[j].Push(h);
      } else {
        if (typeof f[j] !== "object") {
          f[j] = {};
        }
        if (l) {
          e(f[j], k + l, h);
        } else {
          e(f[j], k, h);
        }
      }
    } else {
      if (f.hasOwnProperty(g)) {
        if (Array.isArray(f[g])) {
          f[g].Push(h);
        } else {
          f[g] = [].concat.apply([f[g]], [h]);
        }
      } else {
        f[g] = h;
      }
      return f[g];
    }
  };
  a.replace(/^(\?|#)/, "").replace(/([^#&=?]+)?=?([^&=]+)?/g, function(m, n, o) {
    n && e(b, c(n), c(o));
  });
  return b;
};
1

Dies funktioniert ... Sie müssen diese Funktion aufrufen, um den Parameter durch Übergabe seines Namens abzurufen.

function getParameterByName(name)
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  alert(results[1]);
  if (results == null)
    return "";
  else
    return results[1];
}
1
sonorita

Schnell, einfach und schnell:

Die Funktion:

function getUrlVar() {
    var result = {};
    var location = window.location.href.split('#');
    var parts = location[0].replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        result [key] = value;
    });
    return result;
}

Verwendung:

var varRequest = getUrlVar()["theUrlVarName"];
1
Shlomi Hassid

Hier ist die String Prototyp-Implementierung:

String.prototype.getParam = function( str ){
    str = str.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp( "[\\?&]*"+str+"=([^&#]*)" );    
    var results = regex.exec( this );
    if( results == null ){
        return "";
    } else {
        return results[1];
    }
}

Beispielaufruf:

var status = str.getParam("status")

str kann eine Abfragezeichenfolge oder eine URL sein

1
krisrak

Siehe dies post oder benutze dies:

<script type="text/javascript" language="javascript">
    $(document).ready(function()
    {
        var urlParams = {};
        (function ()
        {
            var match,
            pl= /\+/g,  // Regular expression 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))
                urlParams[decode(match[1])] = decode(match[2]);
        })();

        if (urlParams["q1"] === 1)
        {
            return 1;
        }
    });
</script>
1
soheil bijavar

Dies verlässlich zu tun ist mehr als man zunächst denkt.

  1. location.search, das in anderen Antworten verwendet wird, ist spröde und sollte vermieden werden. Es wird beispielsweise leer zurückgegeben, wenn jemand Fehler macht und einen Bezeichner #fragment vor den String ?query setzt.
  2. Es gibt eine Reihe von Möglichkeiten, wie URLs im Browser automatisch ausgeblendet werden. Meiner Meinung nach ist decodeURIComponent daher so gut wie obligatorisch.
  3. Viele Abfragezeichenfolgen werden aus Benutzereingaben generiert, was bedeutet, dass die Annahmen über den URL-Inhalt sehr schlecht sind. Einschließlich sehr grundlegender Dinge wie dieser ist jeder Schlüssel einzigartig oder hat sogar einen Wert.

Um dies zu lösen, gibt es hier eine konfigurierbare API mit einer gesunden Dosis von defensive Programmierung . Beachten Sie, dass die Größe halbiert werden kann, wenn Sie bereit sind, einige der Variablen fest zu codieren, oder wenn die Eingabe niemals hasOwnProperty usw. enthalten kann.

Version 1: Gibt ein Datenobjekt mit Namen und Werten für jeden Parameter zurück. Sie werden effektiv desupliziert und es wird immer die erste respektiert, die von links nach rechts gefunden wird.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

    var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

    if (!url || typeof url !== 'string') {
        url = location.href; // more robust than location.search, which is flaky
    }
    if (!paramKey || typeof paramKey !== 'string') {
        paramKey = '&';
    }
    if (!pairKey || typeof pairKey !== 'string') {
        pairKey = '=';
    }
    // when you do not explicitly tell the API...
    if (arguments.length < 5) {
        // it will unescape parameter keys and values by default...
        decode = true;
    }

    queryStart = url.indexOf('?');
    if (queryStart >= 0) {
        // grab everything after the very first ? question mark...
        query = url.substring(queryStart + 1);
    } else {
        // assume the input is already parameter data...
        query = url;
    }
    // remove fragment identifiers...
    fragStart = query.indexOf('#');
    if (fragStart >= 0) {
        // remove everything after the first # hash mark...
        query = query.substring(0, fragStart);
    }
    // make sure at this point we have enough material to do something useful...
    if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
        // we no longer need the whole query, so get the parameters...
        query = query.split(paramKey);
        result = {};
        // loop through the parameters...
        for (i = 0, len = query.length; i < len; i = i + 1) {
            pairKeyStart = query[i].indexOf(pairKey);
            if (pairKeyStart >= 0) {
                name = query[i].substring(0, pairKeyStart);
            } else {
                name = query[i];
            }
            // only continue for non-empty names that we have not seen before...
            if (name && !Object.prototype.hasOwnProperty.call(result, name)) {
                if (decode) {
                    // unescape characters with special meaning like ? and #
                    name = decodeURIComponent(name);
                }
                if (pairKeyStart >= 0) {
                    value = query[i].substring(pairKeyStart + 1);
                    if (value) {
                        if (decode) {
                            value = decodeURIComponent(value);
                        }
                    } else {
                        value = missingValue;
                    }
                } else {
                    value = missingValue;
                }
                result[name] = value;
            }
        }
        return result;
    }
}

Version 2: Gibt ein Datenzuordnungsobjekt mit zwei Arrays identischer Länge zurück, eines für Namen und eines für Werte, mit einem Index für jeden Parameter. Dieser unterstützt doppelte Namen und de-dupliziert sie absichtlich nicht, da Sie dieses Format wahrscheinlich deshalb verwenden möchten.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

   var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

   if (!url || typeof url !== 'string') {
       url = location.href; // more robust than location.search, which is flaky
   }
   if (!paramKey || typeof paramKey !== 'string') {
       paramKey = '&';
   }
   if (!pairKey || typeof pairKey !== 'string') {
       pairKey = '=';
   }
   // when you do not explicitly tell the API...
   if (arguments.length < 5) {
       // it will unescape parameter keys and values by default...
       decode = true;
   }

   queryStart = url.indexOf('?');
   if (queryStart >= 0) {
       // grab everything after the very first ? question mark...
       query = url.substring(queryStart + 1);
   } else {
       // assume the input is already parameter data...
       query = url;
   }
   // remove fragment identifiers...
   fragStart = query.indexOf('#');
   if (fragStart >= 0) {
       // remove everything after the first # hash mark...
       query = query.substring(0, fragStart);
   }
   // make sure at this point we have enough material to do something useful...
   if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
       // we no longer need the whole query, so get the parameters...
       query = query.split(paramKey);
       result = {
           names: [],
           values: []
       };
       // loop through the parameters...
       for (i = 0, len = query.length; i < len; i = i + 1) {
           pairKeyStart = query[i].indexOf(pairKey);
           if (pairKeyStart >= 0) {
               name = query[i].substring(0, pairKeyStart);
           } else {
               name = query[i];
           }
           // only continue for non-empty names...
           if (name) {
               if (decode) {
                   // unescape characters with special meaning like ? and #
                   name = decodeURIComponent(name);
               }
               if (pairKeyStart >= 0) {
                   value = query[i].substring(pairKeyStart + 1);
                   if (value) {
                       if (decode) {
                           value = decodeURIComponent(value);
                       }
                   } else {
                       value = missingValue;
                   }
               } else {
                   value = missingValue;
               }
               result.names.Push(name);
               result.values.Push(value);
           }
       }
       return result;
   }

}

1
Seth Holladay

Dies hat bei mir nicht funktioniert. Ich möchte ?b als b -Parameter zuordnen und nicht ?return als r -Parameter, hier ist meine Lösung .

window.query_param = function(name) {
  var param_value, params;

  params = location.search.replace(/^\?/, '');
  params = _.map(params.split('&'), function(s) {
    return s.split('=');
  });

  param_value = _.select(params, function(s) {
    return s.first === name;
  })[0];

  if (param_value) {
    return decodeURIComponent(param_value[1] || '');
  } else {
    return null;
  }
};
1
Dorian
// Parse query string
var params = {}, queryString = location.hash.substring(1),
    regex = /([^&=]+)=([^&]*)/g,
    m;
while (m = regex.exec(queryString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
0