Hur kan jag få fram värden för frågetecken i JavaScript?

Finns det ett pluginfritt sätt att hämta query string värden via jQuery (eller utan)?

Om så är fallet, hur? Om inte, finns det ett plugin som kan göra det?

Brad Larson
Redigerad fråga 2015ör april 2015 в 12:55
Programmering
plugins query-string javascript url
2009ör maj 2009 в 8:10
22 visningar
Lösning

Uppdatering: september 2018

Du kan använda URLSearchParams som är enkel och har hyfsat (men inte fullständigt) webbläsarstöd.

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

Original

Du behöver inte jQuery för detta ändamål. Du kan använda ren JavaScript:

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

Användning:

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


Observera: Om en parameter förekommer flera gånger (?foo=lorem&foo=ipsum) får du det första värdet (lorem). Det finns ingen standard för detta och användningsområdena varierar, se till exempel denna fråga: [Auktoritativ position för duplicerade HTTP GET-förfrågningsnycklar] (https://stackoverflow.com/questions/1746507/authoritative-position-of-duplicate-http-get-query-keys).
OBS: Funktionen är skiftlägeskänslig. Om du föredrar parameternamn som inte tar hänsyn till stor- och små bokstäver, lägg till 'i' modifiering till RegExp.

Detta är en uppdatering som bygger på den nya URLSearchParams specs för att uppnå samma resultat på ett mer kortfattat sätt. Se svaret "URLSearchParams" nedan.

Martin Tournoij
Redigerat svar 2019ör augusti 2019 в 7:12
Kommentarer (52)

Roshambo på snipplr.com har ett enkelt skript som beskriver detta i Get URL Parameters with jQuery | Improved. Med hans skript kan du också enkelt få fram bara de parametrar du vill ha.

Här är huvuddragen:

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

Hämta sedan bara parametrarna från frågetecken.

Om URL/frågesträngen var xyz.com/index.html?lang=de.

Kalla bara var langval = $.urlParam('lang');, så har du det.

UZBEKJON har ett bra blogginlägg om detta också, Get URL parameters & values with jQuery.

Yahel
Redigerat svar 2016ör februari 2016 в 6:51
Kommentarer (3)

Om du använder jQuery kan du använda ett bibliotek, till exempel jQuery BBQ: Back Button & Query Library.

...jQuery BBQ tillhandahåller en fullständig metod .deparam(), tillsammans med både hash-statushantering och metoder för att analysera och sammanfoga fragment/frågesträngar.

Redigera: Lägg till Deparam-exempel:

Det är en bra idé att göra en ny version av Parparam;

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

            }
        };

Om du vill använda vanlig JavaScript kan du använda...

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

})();​

På grund av det nya HTML History API och särskilt history.pushState() och history.replaceState() kan URL:n ändras, vilket gör att cacheminnet med parametrar och deras värden blir ogiltigt.

Den här versionen uppdaterar sitt interna cacheminne av parametrar varje gång historiken ändras.

Ben Call
Redigerat svar 2014ör oktober 2014 в 4:13
Kommentarer (0)