Pertanyaan Bagaimana saya bisa mendapatkan nilai string kueri di JavaScript?


Apakah ada cara tanpa plugin untuk mengambil string kueri nilai melalui jQuery (atau tanpa)?

Jika ya, bagaimana caranya? Jika tidak, apakah ada plugin yang dapat melakukannya?


2703


asal


Jawaban:


Anda tidak perlu jQuery untuk tujuan itu. Anda dapat menggunakan hanya beberapa JavaScript murni:

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

Pemakaian:

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


Catatan: Jika parameter ditampilkan beberapa kali (?foo=lorem&foo=ipsum), Anda akan mendapatkan nilai pertama (lorem). Tidak ada standar tentang hal ini dan penggunaan bervariasi, lihat misalnya pertanyaan ini: Posisi otoritatif kunci permintaan HTTP GET duplikat.
CATATAN: Fungsi peka terhadap huruf besar kecil. Jika Anda lebih memilih nama parameter case-insensitive, tambahkan pengubah 'i' ke RegExp


Ini adalah pembaruan berdasarkan yang baru Spesifikasi URLSearchParams untuk mencapai hasil yang sama lebih ringkas. Lihat jawaban berjudul "URLSearchParams"di bawah.


7017



Beberapa solusi yang dipasang di sini tidak efisien. Mengulangi pencarian ekspresi reguler setiap kali skrip perlu mengakses parameter sama sekali tidak diperlukan, satu fungsi tunggal untuk membagi parameter ke dalam objek gaya array asosiatif sudah cukup. Jika Anda tidak bekerja dengan API HTML 5 Sejarah, ini hanya diperlukan sekali per pemuatan halaman. Saran lain di sini juga gagal untuk memecahkan kode URL dengan benar.

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

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

Contoh querystring:

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

Hasil:

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

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

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

Ini dapat dengan mudah diperbaiki untuk menangani string query gaya-array juga. Contoh dari ini adalah sini, tetapi karena parameter array-style tidak didefinisikan RFC 3986 Saya tidak akan mencemari jawaban ini dengan kode sumber. Bagi mereka yang tertarik dengan versi "tercemar", lihatlah jawaban campbeln di bawah ini.

Juga, seperti yang ditunjukkan dalam komentar, ; adalah pembatas hukum untuk key=value pasangan. Diperlukan regex yang lebih rumit untuk ditangani ; atau &, yang saya pikir tidak perlu karena itu langka ; digunakan dan saya akan mengatakan bahkan lebih tidak mungkin bahwa keduanya akan digunakan. Jika Anda perlu mendukung ; dari pada &, tukar saja mereka di regex.


  Jika Anda menggunakan bahasa preprocessing sisi server, Anda mungkin ingin menggunakan fungsi JSON asalnya untuk melakukan pengangkatan berat untuk Anda. Misalnya, dalam PHP Anda dapat menulis:

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

Jauh lebih sederhana!


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

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

Dengan URL seperti ?topic=123&name=query+string, berikut ini akan kembali:

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

Metode Google

Merobek kode Google saya menemukan metode yang mereka gunakan: 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
}

Ini dikaburkan, tetapi itu bisa dimengerti.

Mereka mulai mencari parameter pada url dari ? dan juga dari hash #. Kemudian untuk setiap parameter mereka dibagi dalam tanda yang sama b[f][p]("=") (yang terlihat seperti indexOf, mereka menggunakan posisi char untuk mendapatkan kunci / nilai). Setelah membagi mereka memeriksa apakah parameter memiliki nilai atau tidak, jika kemudian mereka menyimpan nilai d, kalau tidak mereka hanya melanjutkan.

Pada akhirnya objek d dikembalikan, penanganan melarikan diri dan + tanda. Objek ini seperti milik saya, itu memiliki perilaku yang sama.


Metode saya sebagai plugin 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);

Pemakaian

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

Tes kinerja (metode terpisah terhadap metode regex) (jsPerf)

Kode persiapan: deklarasi metode

Kode tes Split

var qs = window.GetQueryString(query);

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

Kode pengujian Regex

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

Pengujian di Firefox 4.0 x86 pada Windows Server 2008 R2 / 7 x64

  • Metode perpecahan: 144,780 ± 2,17% tercepat
  • Metode Regex: 13,891 ± 0,85% | 90% lebih lambat

1194



Versi perbaikan dari Jawaban Artem Barger:

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

Untuk informasi lebih lanjut tentang peningkatan, lihat: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/


636



URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ dan Chrome 49+ mendukung URLSearchParams API:

Ada yang disarankan google Isi URLSearchParams untuk versi stabil IE.

Ini tidak distandarisasi oleh W3C, tapi itu standar hidup WhatWG.

Anda dapat menggunakannya di lokasi, tetapi Anda harus menghapusnya ? tanda tanya (misalnya, dengan .slice(1)):

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

atau

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

Atau tentu saja di URL apa pun:

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

Anda bisa mendapatkan params juga menggunakan tulisan cepat .searchParams properti pada objek URL, seperti ini:

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

Anda membaca / mengatur parameter melalui get(KEY), set(KEY, VALUE), append(KEY, VALUE) API. Anda juga dapat melakukan iterasi atas semua nilai for (let p of params) {}.

SEBUAH implementasi referensi dan a halaman sampel tersedia untuk audit dan pengujian.


482



Hanya rekomendasi lain. Plugin Purl memungkinkan untuk mengambil semua bagian URL, termasuk anchor, host, dll.

Ini dapat digunakan dengan atau tanpa jQuery.

Penggunaannya sangat sederhana dan keren:

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'

Namun, pada 11 November 2014, Purl tidak lagi dipelihara dan penulis merekomendasikan untuk menggunakannya URI.js sebagai gantinya. Plugin jQuery berbeda karena berfokus pada elemen - untuk penggunaan dengan string, cukup gunakan URI langsung, dengan atau tanpa jQuery. Kode serupa akan terlihat seperti dokumen yang lebih lengkap sini:

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 di snipplr.com memiliki skrip sederhana untuk mencapai hal ini Dapatkan Parameter URL dengan jQuery | Ditingkatkan. Dengan skripnya Anda juga dengan mudah dapat menarik keluar hanya parameter yang Anda inginkan.

Berikut intinya:

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

Kemudian, dapatkan parameter Anda dari string kueri.

Jadi jika string URL / query itu xyz.com/index.html?lang=de.

Telepon saja var langval = $.urlParam('lang');, dan Anda memilikinya.

UZBEKJON memiliki posting blog yang bagus tentang ini juga, Dapatkan parameter & nilai URL dengan jQuery.


215