Pertanyaan Bagaimana cara mendapatkan nilai dari parameter GET?


Saya memiliki URL dengan beberapa parameter GET sebagai berikut:

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

Saya harus mendapatkan nilai keseluruhan c. Saya mencoba membaca URL, tetapi saya hanya mendapatkannya m2. Bagaimana saya melakukan ini menggunakan JavaScript?


925
2018-06-11 08:32


asal


Jawaban:


JavaScript sendiri tidak memiliki bawaan untuk menangani parameter string kueri.

Di browser (modern) Anda dapat menggunakan URL obyek;

var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);


Untuk browser yang lebih lama (termasuk Internet Explorer), Anda dapat menggunakan polyfill ini atau kode dari versi asli jawaban ini yang ada sebelum URL:

Anda dapat mengakses location.search, yang akan memberi Anda dari ? karakter di bagian akhir URL atau awal pengidentifikasi fragmen (#foo), mana saja yang lebih dulu.

Kemudian Anda dapat menguraikannya dengan ini:

function parse_query_string(query) {
  var vars = query.split("&");
  var query_string = {};
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var key = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);
    // If first entry with this name
    if (typeof query_string[key] === "undefined") {
      query_string[key] = decodeURIComponent(value);
      // If second entry with this name
    } else if (typeof query_string[key] === "string") {
      var arr = [query_string[key], decodeURIComponent(value)];
      query_string[key] = arr;
      // If third or later entry with this name
    } else {
      query_string[key].push(decodeURIComponent(value));
    }
  }
  return query_string;
}

var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);

Anda bisa mendapatkan string kueri dari URL halaman saat ini dengan:

var query = window.location.search.substring(1);
var qs = parse_query_string(query);

1227
2018-06-11 08:37



Sebagian besar implementasi yang saya lihat kehilangan URL-decoding nama dan nilai-nilai.

Berikut adalah fungsi utilitas umum yang juga melakukan decoding URL yang tepat:

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

225
2017-07-08 18:04



sumber

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

204
2018-06-11 08:38



Ini adalah cara mudah untuk memeriksa satu parameter saja:

URL Contoh:

    http://myserver/action?myParam=2

Contoh Javascript:

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

jika "myParam" ada di URL ... variabel myParam akan berisi "2", jika tidak maka akan tidak terdefinisi.

Mungkin Anda menginginkan nilai default, dalam hal ini:

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

Memperbarui: Ini bekerja lebih baik:

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

Dan itu berfungsi dengan baik bahkan ketika URL penuh dengan parameter.


167
2017-12-02 19:19



Vendor browser telah menerapkan cara asli untuk melakukan ini melalui URL dan 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"

Saat ini didukung di Firefox, Opera, Safari, dan Chrome. Dengan dukungan Edge segera akan datang.

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, seorang insinyur di Google, merekomendasikan menggunakan ini polyfill untuk browser yang tidak didukung.


83
2018-02-18 17:52



Anda bisa mendapatkan string kueri location.search, maka Anda dapat membagi semuanya setelah tanda tanya:

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;

74
2018-06-11 08:37



Saya menemukan ini berabad-abad yang lalu, sangat mudah:

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

Kalau begitu sebut saja seperti ini:

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

69
2017-11-20 14:01



Saya menulis solusi yang lebih sederhana dan elegan.

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

32
2017-10-14 23:03



Berikut ini adalah solusi rekursif yang tidak memiliki regex, dan memiliki mutasi minimal (hanya obyek params yang termutasi, yang saya yakini tidak dapat dihindari dalam JS).

Ini luar biasa karena:

  • Apakah rekursif
  • Menangani banyak parameter dengan nama yang sama
  • Transaksi yang baik dengan string parameter yang salah (nilai yang hilang, seterusnya)
  • Tidak merusak jika '=' ada dalam nilai
  • Melakukan decoding URL
  • Dan terakhir, Ini luar biasa karena ... argh !!!

Kode:

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

27
2018-01-16 01:42



Lihat ini

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

22
2018-01-05 20:18



Solusi ECMAScript 6:

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

17
2018-06-23 13:10