Jak uzyskać wartość z parametrów GET?

Większość implementacji, które widziałem, pomija URL-dekodowanie nazw i wartości.

Oto ogólna funkcja użytkowa, która również poprawnie dekoduje URL:

function getQueryParams(qs) {
    qs = qs.split('+').join(' ');

    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }

    return params;
}

//var query = getQueryParams(document.location.search);
//alert(query.foo);

Źródło

function gup( name, url ) {
    if (!url) url = location.href;
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( url );
    return results == null ? null : results[1];
}
gup('q', 'hxxp://example.com/?q=abc')

Jest to łatwy sposób na sprawdzenie tylko jednego parametru:

Przykładowy URL:

    http://myserver/action?myParam=2

Przykład Javascript:

    var myParam = location.search.split('myParam=')[1]

Jeśli w adresie URL istnieje "myParam"... zmienna myParam będzie zawierać "2", w przeciwnym razie będzie niezdefiniowana.

Może chcesz domyślną wartość, w takim przypadku:

    var myParam = location.search.split('myParam=')[1] ? location.search.split('myParam=')[1] : 'myDefaultValue';

Update: to działa lepiej:

    var url = "http://www.example.com/index.php?myParam=384&login=admin"; // or window.location.href for current url
    var captured = /myParam=([^&]+)/.exec(url)[1]; // Value is in [1] ('384' in our case)
    var result = captured ? captured : 'myDefaultValue';

I działa poprawnie, nawet gdy URL jest pełen parametrów.

Dostawcy przeglądarek zaimplementowali natywny sposób, aby to zrobić poprzez URL i URLSearchParams.

let url = new URL('http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5');
let searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('c'));  // outputs "m2-m3-m4-m5"

Obecnie obsługiwane w Firefox, Opera, Safari i Chrome. Z obsługą Edge już wkrótce .

Https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

Https://url.spec.whatwg.org/

Eric Bidelman, inżynier w Google, zaleca korzystanie z tego polyfill dla nieobsługiwanych przeglądarek.

Możesz uzyskać ciąg zapytania w location.search, Następnie możesz podzielić wszystko po znaku zapytania:

var params = {};

if (location.search) {
    var parts = location.search.substring(1).split('&');

    for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=');
        if (!nv[0]) continue;
        params[nv[0]] = nv[1] || true;
    }
}

// Now you can get the parameters you want like so:
var abc = params.abc;

Znalazłem to wieki temu, bardzo proste:

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

Więc nazwij to tak:

var fType = getUrlVars()["type"];

Napisałem prostsze i eleganckie rozwiązanie.

var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];

Oto rozwiązanie rekurencyjne, które nie ma regex i ma minimalną mutację(tylko obiekt params jest zmutowany, co moim zdaniem jest nieuniknione w JS).

Jest super bo to:

• jest rekurencyjny
• obsługuje wiele parametrów o tej samej nazwie
• dobrze radzi sobie z zniekształconymi łańcuchami parametrów (brakujące wartości, itd.)
• nie łamie się, jeśli w wartości
• wykonuje dekodowanie URL
• i na koniec jest super, bo to...argh!!!

Kod:

var get_params = function(search_string) {

  var parse = function(params, pairs) {
    var pair = pairs[0];
    var parts = pair.split('=');
    var key = decodeURIComponent(parts[0]);
    var value = decodeURIComponent(parts.slice(1).join('='));

    // Handle multiple parameters of the same name
    if (typeof params[key] === "undefined") {
      params[key] = value;
    } else {
      params[key] = [].concat(params[key], value);
    }

    return pairs.length == 1 ? params : parse(params, pairs.slice(1))
  }

  // Get rid of leading ?
  return search_string.length == 0 ? {} : parse({}, search_string.substr(1).split('&'));
}

var params = get_params(location.search);

// Finally, to get the param you want
params['c'];

Zobacz to

function getURLParameters(paramName)
{
    var sURL = window.document.URL.toString();
    if (sURL.indexOf("?") > 0)
    {
        var arrParams = sURL.split("?");
        var arrURLParams = arrParams[1].split("&");
        var arrParamNames = new Array(arrURLParams.length);
        var arrParamValues = new Array(arrURLParams.length);

        var i = 0;
        for (i = 0; i<arrURLParams.length; i++)
        {
            var sParam =  arrURLParams[i].split("=");
            arrParamNames[i] = sParam[0];
            if (sParam[1] != "")
                arrParamValues[i] = unescape(sParam[1]);
            else
                arrParamValues[i] = "No Value";
        }

        for (i=0; i<arrURLParams.length; i++)
        {
            if (arrParamNames[i] == paramName)
            {
                //alert("Parameter:" + arrParamValues[i]);
                return arrParamValues[i];
            }
        }
        return "No Parameters Found";
    }
}

ECMAScript 6 rozwiązanie:

var params = window.location.search
  .substring(1)
  .split("&")
  .map(v => v.split("="))
  .reduce((map, [key, value]) => map.set(key, decodeURIComponent(value)), new Map())

Zrobiłem funkcję, która robi to:

var getUrlParams = function (url) {
  var params = {};
  (url + '?').split('?')[1].split('&').forEach(function (pair) {
    pair = (pair + '=').split('=').map(decodeURIComponent);
    if (pair[0].length) {
      params[pair[0]] = pair[1];
    }
  });
  return params;
};

const getUrlParams = url => `${url}?`.split('?')[1]
  .split('&').reduce((params, pair) =>
    ((key, val) => key ? {...params, [key]: val} : params)
    (...`${pair}=`.split('=').map(decodeURIComponent)), {});

Niektóre testy:

console.log(getUrlParams('https://google.com/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('https://google.com/')); // Will log {}
console.log(getUrlParams('a=1&b=2&c')); // Will log {}

Update 3/26/2018, oto implementacja maszynopisu:

const getUrlParams = (search: string) => `${search}?`
  .split('?')[1]
  .split('&')
  .reduce(
    (params: object, pair: string) => {
      const [key, value] = `${pair}=`
        .split('=')
        .map(decodeURIComponent)

      return key.length > 0 ? { ...params, [key]: value } : params
    },
    {}
  )

Super prosty sposób użycia URLSearchParams .

function getParam(param){
  return new URLSearchParams(window.location.search).get(param);
}

Używam biblioteki parseUri . Pozwala ci to zrobić dokładnie to, o co prosisz:

var uri = 'www.test.com/t.html&a=1&b=3&c=m2-m3-m4-m5';
var c = uri.queryKey['c'];
// c = 'm2-m3-m4-m5'

Używam

function getVal(str) {
    var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));
    return v ? v[1] : null;
}

Oto moje rozwiązanie. Jak zalecił Andy E podczas odpowiadania na to pytanie , nie jest to dobre dla wydajności skryptu, jeśli wielokrotnie buduje różne ciągi regex, uruchamia pętle itp., Aby uzyskać pojedynczą wartość. Wymyśliłem więc prostszy skrypt, który zwraca wszystkie parametry GET w jednym obiekcie. Należy wywołać ją tylko raz, przypisać wynik do zmiennej, a następnie, w dowolnym momencie w przyszłości, uzyskać dowolną wartość z tej zmiennej za pomocą odpowiedniego klucza. Zauważ, że zajmuje się również dekodowaniem URI (np. rzeczy takie jak %20) i zastępuje + spacją:

 function getUrlQueryParams(url) {
  var queryString = url.split("?")[1];
  var keyValuePairs = queryString.split("&");
  var keyValue = [];
  var queryParams = {};
  keyValuePairs.forEach(function(pair) {
    keyValue = pair.split("=");
    queryParams[keyValue[0]] = decodeURIComponent(keyValue[1]).replace(/\+/g, " ");
});
  return queryParams;
}

Oto kilka testów skryptu, które możesz zobaczyć:

// Query parameters with strings only, no special characters.
var currentParams = getUrlQueryParams("example.com/foo?number=zero");
alert(currentParams["number"]); // Gives "zero".

// For the URL you stated above...
var someParams = getUrlQueryParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ");
alert(someParams["c"]); // Gives "m2-m3-m4-m5".

// For a query params with URI encoding...
var someParams = getUrlQueryParams("www.example.com/t.html?phrase=a%20long%20shot&location=Silicon+Valley%2C+USA");
alert(someParams["phrase"]); // Gives "a long shot".
alert(someParams["location"]); // Gives "Silicon Valley, USA".

Dla pojedynczej wartości parametru Jak ten indeks.html?msg=1 Użyj następującego kodu,

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search.substring(1);
    var varArray = queryString.split("="); //eg. index.html?msg=1

    var param1 = varArray[0];
    var param2 = varArray[1];

}

Dla wszystkie wartości parametru Użyj następującego kodu,

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search;
    var varArray = queryString.split("&");
    for (var i=0;i<varArray.length;i++) {
      var param = varArray[i].split("=");
        //parameter-value pair
    }
} 

To pytanie ma zbyt wiele odpowiedzi, więc dodaję kolejną.

/**
 * parses and returns URI query parameters 
 * 
 * @param {string} param parm
 * @param {bool?} asArray if true, returns an array instead of a scalar 
 * @returns {Object|Array} 
 */
function getURIParameter(param, asArray) {
    return document.location.search.substring(1).split('&').reduce(function(p,c) {
        var parts = c.split('=', 2).map(function(param) { return decodeURIComponent(param); });
        if(parts.length == 0 || parts[0] != param) return (p instanceof Array) && !asArray ? null : p;
        return asArray ? p.concat(parts.concat(true)[1]) : parts.concat(true)[1];
    }, []);
}

Użycie:

getURIParameter("id")  // returns the last id or null if not present
getURIParameter("id", true) // returns an array of all ids

Radzi sobie z pustymi parametrami( klucze obecne bez "=value"), ekspozycją zarówno skalarnego, jak i opartego na tablicy API pobierania wartości, a także prawidłowym dekodowaniem komponentów URI.

Lub jeśli nie chcesz na nowo wynaleźć koła parsującego URI użyj URI.js

Aby uzyskać wartość parametru o nazwie foo:

new URI((''+document.location)).search(true).foo

To co robi to

1. Konwertuj dokument.lokalizacja do ciągu znaków (jest to obiekt)
2. przekaż ten ciąg do URI.js ' s URI class constructor
3. wywołaj funkcję search (), aby uzyskać część wyszukiwania (zapytania) adresu url
   (podanie true powoduje wyświetlenie obiektu)
4. dostęp do właściwości foo na wynikowym obiekt do uzyskania wartości

Tutaj zamieszczam jeden przykład. Ale jest w jQuery. Mam nadzieję, że pomoże innym:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>

<!-- URL:  www.example.com/correct/?message=done&year=1990-->

<script type="text/javascript">
$(function(){
    $.url.attr('protocol')  // --> Protocol: "http"
    $.url.attr('path')          // --> host: "www.example.com"
    $.url.attr('query')         // --> path: "/correct/"
    $.url.attr('message')   // --> query: "done"
    $.url.attr('year')      // --> query: "1990"
});
</script>

// Read a page's GET URL variables and return them as an associative array.
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;
}

// Usage for URL: http://my.site.com/location?locationId=53cc272c0364aefcb78756cd&shared=false
var id = getUrlVars()["locationId"];

Stąd: http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html

Prosty sposób

function getParams(url){
        var regex = /[?&]([^=#]+)=([^&#]*)/g,
            params = {},
            match;
        while(match = regex.exec(url)) {
            params[match[1]] = match[2];
        }
        return params;
    }

Następnie wywołaj go jak getParams (url)

// http:localhost:8080/path?param_1=a&param_2=b
var getParamsMap = function () {
    var params = window.location.search.split("&");
    var paramsMap = {};
    params.forEach(function (p) {
        var v = p.split("=");
        paramsMap[v[0]]=decodeURIComponent(v[1]);
    });
    return paramsMap;
};

// -----------------------

console.log(getParamsMap()["param_1"]);  // should log "a"     

Kolejna sugestia.

Są już pewne dobre odpowiedzi, ale znalazłem je niepotrzebnie złożone i trudne do zrozumienia. Jest to krótka, prosta tablica asocjacyjna z nazwami kluczy odpowiadającymi nazwom tokenów w adresie URL.

Dodałem wersję z komentarzami poniżej dla tych, którzy chcą się uczyć.

Uwaga to polega na jQuery ($.każdy) dla swojej pętli, którą polecam zamiast forEach. Uważam, że łatwiej jest zapewnić kompatybilność między przeglądarkami korzystanie z jQuery na całym świecie zamiast podłączania pojedynczych poprawek w celu obsługi tych nowych funkcji, które nie są obsługiwane w starszych przeglądarkach.

Edit: po tym, jak to napisałem, zauważyłem odpowiedź Erica Elliotta, która jest prawie taka sama, chociaż używa forEach, podczas gdy ogólnie jestem przeciw (z powodów podanych powyżej).

function getTokens(){
    var tokens = [];
    var query = location.search;
    query = query.slice(1);
    query = query.split('&');
    $.each(query, function(i,value){    
        var token = value.split('=');   
        var key = decodeURIComponent(token[0]);     
        var data = decodeURIComponent(token[1]);
        tokens[key] = data;
    });
    return tokens;
}

Wersja komentowana:

function getTokens(){
    var tokens = [];            // new array to hold result
    var query = location.search; // everything from the '?' onward 
    query = query.slice(1);     // remove the first character, which will be the '?' 
    query = query.split('&');   // split via each '&', leaving us an array of something=something strings

    // iterate through each something=something string
    $.each(query, function(i,value){    

        // split the something=something string via '=', creating an array containing the token name and data
        var token = value.split('=');   

        // assign the first array element (the token name) to the 'key' variable
        var key = decodeURIComponent(token[0]);     

        // assign the second array element (the token data) to the 'data' variable
        var data = decodeURIComponent(token[1]);

        tokens[key] = data;     // add an associative key/data pair to our result array, with key names being the URI token names
    });

    return tokens;  // return the array
}

Dla poniższych przykładów przyjmiemy ten adres:

http://www.example.com/page.htm?id=4&name=murray

Możesz przypisać tokeny URL do własnych zmienna:

var tokens = getTokens();

Następnie odwołaj się do każdego tokena URL po nazwie w następujący sposób:

document.write( tokens['id'] );

To wydrukuje "4".

Możesz również po prostu odwołać się do nazwy tokena bezpośrednio z funkcji:

document.write( getTokens()['name'] );

...który wydrukuje "murray".

Oto angularJs kod źródłowy do parsowania parametrów zapytania url do obiektu :

function tryDecodeURIComponent(value) {
  try {
    return decodeURIComponent(value);
  } catch (e) {
    // Ignore any invalid uri component
  }
}

function isDefined(value) {return typeof value !== 'undefined';}

function parseKeyValue(keyValue) {
  keyValue = keyValue.replace(/^\?/, '');
  var obj = {}, key_value, key;
  var iter = (keyValue || "").split('&');
  for (var i=0; i<iter.length; i++) {
    var kValue = iter[i];
    if (kValue) {
      key_value = kValue.replace(/\+/g,'%20').split('=');
      key = tryDecodeURIComponent(key_value[0]);
      if (isDefined(key)) {
        var val = isDefined(key_value[1]) ? tryDecodeURIComponent(key_value[1]) : true;
        if (!hasOwnProperty.call(obj, key)) {
          obj[key] = val;
        } else if (isArray(obj[key])) {
          obj[key].push(val);
        } else {
          obj[key] = [obj[key],val];
        }
      }
    }
  };
  return obj;
}

alert(JSON.stringify(parseKeyValue('?a=1&b=3&c=m2-m3-m4-m5')));

Możesz dodać tę funkcję do window.location:

window.location.query = function query(arg){
  q = parseKeyValue(this.search);
  if (!isDefined(arg)) {
    return q;
  }      
  if (q.hasOwnProperty(arg)) {
    return q[arg];
  } else {
    return "";
  }
}

// assuming you have this url :
// http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5

console.log(window.location.query())

// Object {a: "1", b: "3", c: "m2-m3-m4-m5"}

console.log(window.location.query('c'))

// "m2-m3-m4-m5"

Musiałem odczytać zmienną URL GET i wykonać akcję na podstawie parametru url. Szukałam rozwiązania i natknęłam się na ten mały fragment kodu. Zasadniczo odczytuje bieżący adres URL strony, wykonuje pewne Wyrażenie regularne na adresie URL, a następnie zapisuje parametry url w tablicy asocjacyjnej, do której możemy łatwo uzyskać dostęp.

Więc jako przykład, jeśli mieliśmy następujący adres url z javascript na dole w miejscu.

http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July

Wszystko, co musimy zrobić, aby uzyskać parametry id i page mają wywołać to:

Kod będzie brzmiał:

<script type="text/javascript">
var first = getUrlVars()["year"];
var second = getUrlVars()["Month"];

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

Oto co robię:

var uriParams = getSearchParameters();
alert(uriParams.c);


// background functions:

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

  for (var i = 0; i < prmarr.length; i++) {
    var tmparr = prmarr[i].split("=");
    params[tmparr[0]] = tmparr[1];
  }
  return params;
}

window.location.href.split("?")

Następnie Pomiń pierwszy indeks

Array.prototype.slice.call(window.location.href.split("?"), 1) 

Zwraca tablicę parametrów url

var paramArray = Array.prototype.slice.call(window.location.href.split(/[?=]+/), 1);
var paramObject = paramArray.reduce(function(x, y, i, a){ (i%2==0) ?  (x[y] = a[i+1]) : void 0; return x; }, {});

Nieco bardziej zwrotny/hacky, ale również funkcjonalny, paramObject zawiera wszystkie parametry odwzorowane jako obiekt js

function getParamValue(param) {
    var urlParamString = location.search.split(param + "=");
    if (urlParamString.length <= 1) return "";
    else {
        var tmp = urlParamString[1].split("&");
        return tmp[0];
    }
}

To powinno zadziałać w Twoim przypadku, bez względu na to, czy param jest ostatni, czy nie.

Możemy uzyskać wartości parametrów c w prostszy sposób bez zapętlania wszystkich parametrów, zobacz poniższy jQuery, aby uzyskać parametry.

1. Aby uzyskać wartość parametru:

var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";

url.match(**/(c=)[0-9A-Za-z-]+/ig**)[0].replace('c=',"")

(lub)

url.match(**/(c=)[0-z-]+/ig**)[0].replace('c=',"")

Zwraca jako ciąg znaków

"m2-m3-m4-M5"

2. Aby zastąpić wartość parametru:

var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";

url.replace(**/(c=)[0-9A-Za-z-]+/ig, "c=m2345"**)