Czy istnieje sposób bez wtyczek do pobierania wartości ciągu zapytania za pomocą jQuery (lub bez)?

Jeśli tak to jak? Jeśli nie, czy istnieje wtyczka, która może to zrobić?

Aktualizacja: wrzesień 2018 r

Możesz użyć URLSearchParams, który jest prosty i ma przyzwoitą (ale nie pełną) obsługę przeglądarki .

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

Oryginalny

W tym celu nie potrzebujesz jQuery. Możesz użyć tylko czystego 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, ' '));
}

Stosowanie:

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

Uwaga: Jeśli parametr występuje kilka razy ( ?foo=lorem&foo=ipsum), otrzymasz pierwszą wartość ( lorem). Nie ma w tym standardu, a zastosowania różnią się, patrz na przykład pytanie: Autorytatywna pozycja duplikatów kluczy zapytań HTTP GET .
UWAGA: W funkcji rozróżniana jest wielkość liter. Jeśli wolisz nazwę parametru bez rozróżniania wielkości liter, dodaj modyfikator „i” do RegExp

Jest to aktualizacja oparta na nowych specyfikacjach URLSearchParams, aby bardziej zwięźle osiągnąć ten sam wynik. Zobacz odpowiedź zatytułowaną „ URLSearchParams ” poniżej.

Niektóre zamieszczone tutaj rozwiązania są nieefektywne. Powtarzanie wyszukiwania wyrażeń regularnych za każdym razem, gdy skrypt musi uzyskać dostęp do parametru, jest całkowicie niepotrzebne, wystarczy jedna funkcja do podzielenia parametrów na obiekt w stylu tablicy asocjacyjnej. Jeśli nie pracujesz z interfejsem API historii HTML 5, jest to konieczne tylko raz na ładowanie strony. Inne sugestie również nie mogą poprawnie odkodować adresu URL.

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

Przykład kwerendy:

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

Wynik:

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

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

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

Można to łatwo poprawić, aby obsługiwać również ciągi zapytań w stylu tablicowym. Przykładem tego jest tutaj , ale ponieważ parametry stylu tablicowego nie są zdefiniowane w RFC 3986, nie będę zanieczyszczać tej odpowiedzi kodem źródłowym. Dla osób zainteresowanych wersją „zanieczyszczoną” zapoznaj się z odpowiedzią Campbeln poniżej .

Ponadto, jak wskazano w komentarzach, ;jest prawnym ogranicznikiem dla key=valuepar. Wymagałoby to bardziej skomplikowanego wyrażenia regularnego do obsługi ;lub &, co moim zdaniem jest niepotrzebne, ponieważ ;jest używane rzadko, a powiedziałbym, że jeszcze bardziej mało prawdopodobne, aby oba były używane. Jeśli potrzebujesz wsparcia ;zamiast &, po prostu zamień je w wyrażeniu regularnym.

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

O wiele prostsze!

AKTUALIZACJA

Nową funkcją byłoby odzyskiwanie powtarzających się parametrów w następujący sposób myparam=1&myparam=2. Nie ma specyfikacji , jednak większość obecnych podejść opiera się na generowaniu tablicy.

myparam = ["1", "2"]

Oto podejście do zarządzania:

let urlParams = {};
(window.onpopstate = function () {
    let 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)) {
        if (decode(match[1]) in urlParams) {
            if (!Array.isArray(urlParams[decode(match[1])])) {
                urlParams[decode(match[1])] = [urlParams[decode(match[1])]];
            }
            urlParams[decode(match[1])].push(decode(match[2]));
        } else {
            urlParams[decode(match[1])] = decode(match[2]);
        }
    }
})();

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

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

W przypadku adresu URL typu ?topic=123&name=query+stringzwrócony zostanie następujący:

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

Metoda Google

Rozdzierając kod Google znalazłem metodę, której używają: 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
}

Jest zaciemniony, ale zrozumiały. To nie działa, ponieważ niektóre zmienne są niezdefiniowane.

Zaczynają szukać parametrów w adresie URL od, ?a także od skrótu #. Następnie dla każdego parametru dzielą się na znak równości b[f][p]("=")(który wygląda na to indexOf, że używają pozycji znaku, aby uzyskać klucz / wartość). Po podzieleniu sprawdzają, czy parametr ma wartość, czy nie, a jeśli tak, to przechowują wartość d, w przeciwnym razie po prostu kontynuują.

Ostatecznie obiekt djest zwracany, obsługuje ucieczkę i +znak. Ten obiekt jest podobny do mojego, ma takie samo zachowanie.

Moja metoda jako wtyczki jQuery

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

Stosowanie

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

Test wydajności (metoda podziału względem metody wyrażenia regularnego) ( jsPerf )

Kod przygotowania: deklaracja metod

Podziel kod testowy

var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

Kod testu Regex

var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

Testowanie w przeglądarce Firefox 4.0 x86 w systemie Windows Server 2008 R2 / 7 x64

• Metoda podziału : 147 780 ± 2,17% najszybciej
• Metoda Regex : 13 891 ± 0,85% | 90% wolniej

Ulepszona wersja odpowiedzi Artem Barger :

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

Aby uzyskać więcej informacji na temat ulepszeń, patrz: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ i Chrome 49+ obsługują interfejs API URLSearchParams :

• Ogłoszenie Chrome i szczegóły
• Ogłoszenie Opera i szczegóły
• Ogłoszenie Firefox i szczegóły

Istnieje sugerowany przez Google polifill URLSearchParams dla stabilnych wersji IE.

Nie jest standaryzowany przez W3C , ale jest standardem życia WhatWG .

Możesz go użyć na location:

let params = new URLSearchParams(location.search);

lub

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

Lub oczywiście pod dowolnym adresem URL:

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

Parametry można również uzyskać, używając .searchParamswłaściwości skróconej obiektu URL, jak poniżej:

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

Czytasz / ustawionych parametrów przez get(KEY), set(KEY, VALUE), append(KEY, VALUE)API. Możesz także iterować wszystkie wartości for (let p of params) {}.

Implementacja referencyjna i strona próbki są dostępne do badania i testowania.

Kolejna rekomendacja. Wtyczka Purl umożliwia pobieranie wszystkich części adresu URL, w tym kotwicy, hosta itp.

Można go używać z jQuery lub bez niego.

Użycie jest bardzo proste i fajne:

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'

Jednak od 11 listopada 2014 Purl nie jest już obsługiwany, a autor zaleca zamiast tego użycie URI.js. Wtyczka jQuery różni się tym, że koncentruje się na elementach - do użytku z ciągami, wystarczy użyć URIbezpośrednio, z lub bez jQuery. Podobny kod wyglądałby jako taki, pełniejsze dokumenty tutaj :

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'

tl; dr

Szybkie, kompletne rozwiązanie , które obsługuje klucze wielowartościowe i zakodowane znaki .

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

Co to za cały ten kod ...
„zerowanie koalescencyjne” , ocena zwarcia
ES6 Zadania destrukcyjne , funkcje strzałek , ciągi szablonów

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

Przeczytaj więcej ... o rozwiązaniu Vanilla JavaScript.

Aby uzyskać dostęp do różnych części adresu URL, użyj location.(search|hash)

Najłatwiejsze (obojętne) rozwiązanie

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

• Obsługuje puste klucze poprawnie.
• Zastępuje klawisze wielokrotne z ostatnią znalezioną wartością.

"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

Klucze wielowartościowe

Prosta kontrola klucza (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]]})

• Teraz zamiast tego zwraca tablice .
• Dostęp do wartości przez qd.key[index]lubqd[key][index]

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

Zakodowane postacie?

Użyj decodeURIComponent()do drugiego lub obu podziałów.

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

Z komentarzy

* !!! Uwaga: decodeURIComponent(undefined)zwraca ciąg znaków "undefined". Rozwiązanie polega na prostym użyciu &&, co zapewnia, że decodeURIComponent()nie zostaną wywołane niezdefiniowane wartości. (Zobacz „kompletne rozwiązanie” u góry).

v = v && decodeURIComponent(v);

Jeśli kwerenda jest pusta ( location.search == ""), wynik jest nieco mylący qd == {"": undefined}. Zaleca się sprawdzenie kwerendy przed uruchomieniem funkcji parsowania Like:

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

Roshambo na snipplr.com ma prosty skrypt, aby to osiągnąć, opisany w części Uzyskaj parametry adresu URL za pomocą jQuery | Poprawiła . Dzięki jego skryptowi możesz łatwo wyciągnąć tylko te parametry, które chcesz.

Oto sedno:

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

Następnie po prostu pobierz parametry z ciągu zapytania.

Więc jeśli ciąg adresu URL / zapytania był xyz.com/index.html?lang=de.

Wystarczy zadzwonić var langval = $.urlParam('lang');, a masz to.

UZBEKJON ma również świetny post na blogu, Uzyskaj parametry i wartości URL za pomocą jQuery .

Jeśli używasz jQuery, możesz użyć biblioteki, takiej jak jQuery BBQ: Back Button & Query Library .

... jQuery BBQ zapewnia pełną .deparam()metodę, zarówno zarządzanie stanem skrótu, jak i metody analizy fragmentów / ciągów znaków zapytania i scalania.

Edycja: dodawanie Deparam Przykład:

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

Jeśli chcesz po prostu używać zwykłego JavaScript, możesz użyć ...

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

})();​

Ze względu na nowy interfejs API historii HTML, a konkretnie history.pushState()i history.replaceState(), adres URL może się zmienić, co spowoduje unieważnienie pamięci podręcznej parametrów i ich wartości.

Ta wersja będzie aktualizować swoją wewnętrzną pamięć podręczną parametrów przy każdej zmianie historii.

Wystarczy użyć dwóch podziałów :

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

Czytałem wszystkie poprzednie i bardziej kompletne odpowiedzi. Ale myślę, że jest to najprostsza i szybsza metoda. Możesz sprawdzić ten test porównawczy jsPerf

Aby rozwiązać problem w komentarzu Rupa, dodaj podział warunkowy, zmieniając pierwszy wiersz na dwa poniżej. Ale absolutna dokładność oznacza, że ​​jest teraz wolniejsza niż regexp (patrz 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;
}

Jeśli więc wiesz, że nie spotkasz się z przeciwną sprawą Rupa, wygrywa. W przeciwnym razie wyreżyseruj.

Lub jeśli masz kontrolę nad kwerendą i możesz zagwarantować, że wartość, którą próbujesz uzyskać, nigdy nie będzie zawierać znaków zakodowanych w adresie URL (posiadanie ich w wartości byłoby złym pomysłem) - możesz użyć następującej, nieco bardziej uproszczonej i czytelnej wersji 1. opcji:

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

Oto moje zadanie uczynienia z doskonałego rozwiązania Andy'ego E pełnoprawnej wtyczki jQuery:

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

Składnia jest następująca:

var someVar = $.getQueryString('myParam');

Najlepsze z obu światów!

Jeśli wykonujesz więcej manipulacji adresami URL niż po prostu analizując kwerendę, może być pomocne użycie pliku URI.js. Jest to biblioteka do manipulowania adresami URL - i zawiera wszystkie dzwonki i gwizdy. (Przepraszam za autoreklamę tutaj)

aby przekonwertować kwerendę na mapę:

var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
  "foo": ["bar", "world"],
  "bar": "baz"
}

(URI.js także „naprawia” złych querystrings podoba ?&foo&&bar=baz&się ?foo&bar=baz)

Podoba mi się rozwiązanie Ryana Phelana . Ale nie widzę sensu przedłużania jQuery? Nie ma zastosowania funkcji jQuery.

Z drugiej strony podoba mi się wbudowana funkcja w Google Chrome: window.location.getParameter.

Dlaczego więc tego nie użyć? Ok, inne przeglądarki nie mają. Utwórzmy więc tę funkcję, jeśli nie istnieje:

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

Ta funkcja jest mniej więcej od Ryana Phelana, ale jest opakowana inaczej: czysta nazwa i brak zależności od innych bibliotek javascript. Więcej o tej funkcji na moim blogu .

Oto szybki sposób na uzyskanie obiektu podobnego do tablicy $ _GET PHP :

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

Stosowanie:

var $_GET = get_query();

Dla ciągu zapytania x=5&y&z=hello&x=6zwraca obiekt:

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

Uprość to w prostym kodzie JavaScript:

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

Zadzwoń z dowolnego miejsca w kodzie JavaScript:

var result = qs('someKey');

To są świetne odpowiedzi, ale potrzebowałem czegoś bardziej solidnego i pomyślałem, że wszyscy chcielibyście mieć to, co stworzyłem.

Jest to prosta metoda biblioteczna, która wykonuje sekcję i manipulowanie parametrami adresów URL. Metoda statyczna ma następujące metody podrzędne, które można wywołać w podanym adresie URL:

• getHost
• getPath
• getHash
• setHash
• getParams
• getQuery
• setParam
• getParam
• hasParam
• removeParam

Przykład:

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

Z MDN :

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

alert(loadPageVar("name"));

Kod golfa:

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

Pokaż to!

for (i in a) {
    document.write(i + ":" + a[i] + "<br/>");   
};

Na moim komputerze Mac: test.htm?i=can&has=cheezburgerwyświetla się

0:can
1:cheezburger
i:can
has:cheezburger

Często używam wyrażeń regularnych, ale nie do tego.

Wydaje mi się łatwiejsze i wydajniejsze odczytanie ciągu zapytania w mojej aplikacji i zbudowanie obiektu ze wszystkich par klucz / wartość, takich jak:

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

Dla takiego adresu URL http://domain.com?param1=val1&param2=val2możesz uzyskać jego wartość później w kodzie jako search.param1i search.param2.

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

Metoda RosQybo jQuery nie zajmowała się dekodowaniem adresu URL

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

Właśnie dodałem tę możliwość również podczas dodawania instrukcji return

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

Teraz możesz znaleźć zaktualizowaną treść:

$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}

Podoba mi się ten (pochodzi z 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;
}

Działa świetnie dla mnie.

Oto moja edycja tej doskonałej odpowiedzi - z dodatkową możliwością analizowania ciągów zapytań za pomocą kluczy bez wartości.

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

WAŻNY! Parametr tej funkcji w ostatnim wierszu jest inny. To tylko przykład tego, jak można przekazać do niego dowolny adres URL. Możesz użyć ostatniego wiersza z odpowiedzi Bruno, aby przeanalizować bieżący adres URL.

Co dokładnie się zmieniło? W przypadku adresu URL http://sb.com/reg/step1?param=wyniki będą takie same. Ale z adresem URL http://sb.com/reg/step1?paramrozwiązanie Bruno zwraca obiekt bez kluczy, a mój zwraca obiekt z kluczem parami undefinedwartością.

Potrzebowałem obiektu z ciągu zapytania i nie znoszę dużo kodu. Może nie jest to najbardziej niezawodny we wszechświecie, ale to tylko kilka linii kodu.

var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
    q[i.split('=')[0]]=i.split('=')[1];
});

Adres URL typu this.htm?hello=world&foo=barspowoduje utworzenie:

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

Oto rozszerzona wersja połączonej wersji Andy E. „Obsługuj ciąg zapytania w stylu tablicy”. Naprawiono błąd ( ?key=1&key[]=2&key[]=3; 1został utracony i zastąpiony przez [2,3]), wprowadzono kilka drobnych ulepszeń wydajności (ponowne dekodowanie wartości, ponowne obliczenie pozycji „[” itp.) I dodano szereg ulepszeń (funkcjonalizowany, obsługa ?key=1&key=2, obsługa ;ograniczników) . Zmienne zostawiłem irytująco krótkie, ale dodałem mnóstwo komentarzy, aby były czytelne (och, i ponownie użyłem vfunkcji lokalnych, przepraszam, jeśli jest to mylące;).

Będzie obsługiwał następujące kwerendy ...

? test = Hello & person = neek & person [] = jeff & person [] = jim & person [extra] = John & test3 & nocache = 1398914891264

... przekształcając go w obiekt, który wygląda jak ...

{
    "test": "Hello",
    "person": {
        "0": "neek",
        "1": "jeff",
        "2": "jim",
        "length": 3,
        "extra": "john"
    },
    "test3": "",
    "nocache": "1398914891264"
}

Jak widać powyżej, ta wersja obsługuje pewną miarę tablic „zniekształconych”, tj. - person=neek&person[]=jeff&person[]=jimlub person=neek&person=jeff&person=jimponieważ klucz jest identyfikowalny i ważny (przynajmniej w NameValueCollection.Add dotNet ):

Jeśli określony klucz już istnieje w docelowej instancji NameValueCollection, określona wartość zostanie dodana do istniejącej listy wartości oddzielonych przecinkami w postaci „wartość1, wartość2, wartość3”.

Wygląda na to, że jury ma dość powtarzających się klawiszy, ponieważ nie ma specyfikacji. W takim przypadku wiele kluczy jest przechowywanych jako (fałszywa) tablica. Pamiętaj jednak, że nie przetwarzam wartości na podstawie przecinków w tablice.

Kod:

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

Jest to funkcja, którą stworzyłem jakiś czas temu i jestem z niej całkiem zadowolony. Nie rozróżnia wielkości liter - co jest przydatne. Ponadto, jeśli żądany QS nie istnieje, po prostu zwraca pusty ciąg.

Używam skompresowanej wersji tego. Wysyłam nieskompresowane typy początkujących, aby lepiej wyjaśnić, co się dzieje.

Jestem pewien, że można to zoptymalizować lub zrobić inaczej, aby działało szybciej, ale zawsze działało świetnie dla tego, czego potrzebuję.

Cieszyć się.

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

Właśnie wypuściliśmy arg.js , projekt mający na celu rozwiązanie tego problemu raz na zawsze. Tradycyjnie było to takie trudne, ale teraz możesz zrobić:

var name = Arg.get("name");

lub uzyskanie całej partii:

var params = Arg.all();

a jeśli zależy Ci na różnicy między, ?query=truea #hash=truenastępnie możesz użyć metod Arg.query()i Arg.hash().

Problem z najwyższą odpowiedzią na to pytanie polega na tym, że parametry nie są obsługiwane po #, ale czasem trzeba je również uzyskać.

Zmodyfikowałem odpowiedź, aby parsowała pełny ciąg zapytania ze znakiem skrótu również:

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

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

I w ten sposób możesz użyć tej funkcji, zakładając, że jest to adres URL

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

var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');

Jeśli używasz Browserify, możesz użyć urlmodułu z Node.js :

var url = require('url');

url.parse('http://example.com/?bob=123', true).query;

// returns { "bob": "123" }

Dalsza lektura: URL Node.js v0.12.2 Podręcznik i dokumentacja

EDYCJA: Możesz użyć interfejsu URL , który jest dość powszechnie przyjęty w prawie wszystkich nowych przeglądarkach, a jeśli kod będzie działał w starej przeglądarce, możesz użyć polifillu takiego jak ten . Oto przykład kodu, w jaki sposób korzystać z interfejsu URL, aby uzyskać parametry zapytania (inaczej parametry wyszukiwania)

const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob'); 

Możesz również użyć do tego URLSearchParams, oto przykład z MDN, aby to zrobić z URLSearchParams:

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"