Vraag Hoe kan ik tekenreekswaarden in JavaScript krijgen?


Is er een plug-inloze manier van ophalen? zoekreeks waarden via jQuery (of zonder)?

Zo ja, hoe? Zo nee, is er een plugin die dit kan doen?


2703


oorsprong


antwoorden:


U hebt jQuery voor dat doel niet nodig. Je kunt gewoon wat pure JavaScript gebruiken:

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

Gebruik:

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


Opmerking: als een parameter meerdere keren aanwezig is (?foo=lorem&foo=ipsum), krijgt u de eerste waarde (lorem). Hier is geen standaard over en gebruiksmogelijkheden variëren, zie bijvoorbeeld deze vraag: Gezaghebbende positie van dubbele HTTP GET-query sleutels.
OPMERKING: de functie is hoofdlettergevoelig. Als u een niet-hoofdlettergevoelige parameternaam verkiest, voeg 'i' modifier toe aan RegExp


Dit is een update op basis van het nieuwe URLSearchParams specificaties om hetzelfde resultaat beknopter te bereiken. Zie antwoord getiteld "URLSearchParams"hieronder.


7017



Sommige van de hier geposte oplossingen zijn inefficiënt. Het herhalen van het zoeken naar reguliere uitdrukkingen telkens wanneer het script toegang tot een parameter nodig heeft, is volstrekt onnodig, één enkele functie om de parameters op te splitsen in een object met associatieve arraystijl is voldoende. Als u niet met de HTML 5 History API werkt, hoeft u dit slechts eenmaal per pagina te laden. De andere suggesties hier slagen er ook niet in om de URL correct te decoderen.

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.plaats.search.substring(1);

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

Voorbeeld querystring:

?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

Resultaat:

 urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
// -> "front"

alert("empty" in urlParams);
// -> true

Dit zou gemakkelijk kunnen worden verbeterd om array-stijl query-strings ook te verwerken. Een voorbeeld hiervan is hier, maar omdat array-stijlparameters niet gedefinieerd zijn in RFC 3986 Ik zal dit antwoord niet vervuilen met de broncode. Voor diegenen die geïnteresseerd zijn in een "vervuilde" versie, bekijk het antwoord van campbeln hieronder.

Ook, zoals opgemerkt in de opmerkingen, ; is een wettelijk scheidingsteken voor key=value paren. Het zou een meer gecompliceerde regex vereisen om te verwerken ; of &, wat ik denk dat overbodig is omdat het zeldzaam is dat ; wordt gebruikt en ik zou zeggen dat het nog onwaarschijnlijker is dat beide zullen worden gebruikt. Als je moet steunen ; in plaats van &, wissel ze gewoon in de regex.


  Als u een taal voor de voorbewerking van de server gebruikt, wilt u mogelijk de eigen JSON-functies gebruiken om het zware werk voor u te doen. In PHP kun je bijvoorbeeld schrijven:

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

Veel eenvoudiger!


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

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

Met een URL zoals ?topic=123&name=query+string, het volgende zal terugkeren:

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

Google-methode

Toen ik de code van Google scheurde, vond ik de methode die ze gebruiken: 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
}

Het is versluierd, maar het is begrijpelijk.

Ze beginnen naar parameters op de URL te zoeken ? en ook van de hash #. Vervolgens splitsen ze voor elke parameter in het gelijkteken b[f][p]("=") (die eruit ziet indexOf, ze gebruiken de positie van de char om de sleutel / waarde te krijgen). Nadat het gesplitst is, controleren ze of de parameter een waarde heeft of niet, als ze dan de waarde van hebben d, anders gaan ze gewoon door.

Uiteindelijk het object d is teruggekeerd, omgaan met ontsnappen en de + teken. Dit object is net als het mijne, het heeft hetzelfde gedrag.


Mijn methode als een jQuery-plug-in

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

Gebruik

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

Prestatietest (split-methode tegen regex-methode) (jsPerf)

Voorbereidingscode: methodeverklaring

Testcode splitsen

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 op Windows Server 2008 R2 / 7 x64

  • Split methode: 144.780 ± 2.17% snelste
  • Regex-methode: 13.891 ± 0.85% | 90% langzamer

1194



Verbeterde versie van Het antwoord van Artem Barger:

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

Zie voor meer informatie over verbetering: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/


636



URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ en Chrome 49+ ondersteunen de URLSearchParams API:

Er is een google-suggestie URLSearchParams polyfill voor de stabiele versies van IE.

Het is niet gestandaardiseerd door W3C, maar het is een levende standaard van WHATWG.

Je kunt het op locatie gebruiken, maar je moet het verwijderen ? vraagteken (bijvoorbeeld met .slice(1)):

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

of

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

Of natuurlijk op elke URL:

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

Je kunt params ook met een steno krijgen .searchParams eigenschap op het URL-object, zoals dit:

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

Je leest / stelt parameters in via get(KEY), set(KEY, VALUE), append(KEY, VALUE) API. U kunt ook alle waarden herhalen for (let p of params) {}.

EEN referentie-implementatie en een voorbeeld pagina zijn beschikbaar voor auditing en testen.


482



Gewoon een andere aanbeveling. De plugin murmelen staat toe om alle delen van de URL op te halen, inclusief anker, host, etc.

Het kan met of zonder jQuery worden gebruikt.

Gebruik is heel eenvoudig en 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'

Vanaf 11 november 2014 is Purl echter niet langer onderhouden en raadt de auteur het gebruik aan URI.js in plaats daarvan. De jQuery-plug-in is anders omdat het zich richt op elementen - voor gebruik met tekenreeksen, gebruik gewoon URI direct, met of zonder jQuery. Vergelijkbare code zou er zo uitzien, meer volledige documenten 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 op snipplr.com heeft een eenvoudig script om dit te bereiken zoals beschreven in URL-parameters ophalen met jQuery | verbeterde. Met zijn script haal je ook eenvoudig de gewenste parameters tevoorschijn.

Hier is de 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;
}

Haal dan gewoon uw parameters uit de query-string.

Dus als de URL / query-string was xyz.com/index.html?lang=de.

Bel gewoon var langval = $.urlParam('lang');en je hebt het.

UZBEKJON heeft hier ook een geweldige blogpost over, URL-parameters en -waarden ophalen met jQuery.


215



tl; Dr.

Een snelle, complete oplossing, wat omgaat meerwaardige toetsen en gecodeerde karakters.

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)})
Multi-gevoerd:
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
})

Wat is al deze code ...
"Null-coalescerende", kortsluiting evaluatie
ES6 Destructuring-opdrachten, Pijl functies, Sjabloonstrings

Voorbeeld:
"?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"



Lees meer ... over de JavaScript-oplossing voor vanille.

Om toegang te krijgen tot verschillende delen van een URL gebruik location.(search|hash)

Eenvoudigste (dummy) oplossing

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
  • handgrepen lege toetsen correct.
  • Overschrijvingen multi-keys met laatste waarde gevonden.
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

Meerwaardige toetsen

Eenvoudige sleutelcontrole (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]]})
  • Keert nu terug arrays in plaats daarvan.
  • Toegang tot waarden via qd.key[index] of qd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

Gecodeerde tekens?

Gebruik decodeURIComponent() voor de tweede of allebei splitst.

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]})
Voorbeeld:
"?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"]



Van opmerkingen

* !!! Let op, dat decodeURIComponent(undefined) geeft tekenreeks terug "undefined". De oplossing ligt in een eenvoudig gebruik van &&, wat ervoor zorgt dat decodeURIComponent() wordt niet aangeroepen op ongedefinieerde waarden. (Zie de "complete oplossing" bovenaan.)

v = v && decodeURIComponent(v);


Als de querystring leeg is (location.search == ""), het resultaat is enigszins misleidend qd == {"": undefined}. Er wordt voorgesteld om de querystring te controleren voordat de parsing-functie wordt gestart, zoals:

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

215



Als u jQuery gebruikt, kunt u een bibliotheek gebruiken, zoals jQuery BBQ: knop Terug en querybibliotheek.

... jQuery BBQ biedt een volledige .deparam() methode, samen met zowel hash-statusbeheer als fragment- / queryreeks parseren en samenvoegen-hulpprogramma's.

Bewerken: Deparam-voorbeeld toevoegen:

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

Als u gewoon JavaScript wilt gebruiken, kunt u ...

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

})();​

Vanwege de nieuwe HTML History API en specifieker history.pushState() en history.replaceState(), de URL kan veranderen waardoor de cache van parameters en hun waarden ongeldig worden.

Deze versie zal zijn interne cache van parameters bijwerken elke keer dat de geschiedenis verandert.


164