it-swarm-vi.com

Làm cách nào tôi có thể nhận các giá trị chuỗi truy vấn trong JavaScript?

Có cách nào lấy plugin chuỗi truy vấn giá trị thông qua jQuery (hoặc không có plugin) không?

Nếu vậy thì thế nào? Nếu không, có một plugin có thể làm như vậy?

javascripturlpluginsquery-string
2701
Kemal Emin

Cập nhật: Tháng 9-2018

Bạn có thể sử dụng URLSearchParams đơn giản và có hỗ trợ trình duyệt tốt .

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

Bản gốc

Bạn không cần jQuery cho mục đích đó. Bạn chỉ có thể sử dụng một số JavaScript thuần túy:

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

Cách sử dụng: 

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


[.__.] Lưu ý: Nếu một tham số xuất hiện nhiều lần (?foo=lorem&foo=ipsum), bạn sẽ nhận được giá trị đầu tiên (lorem). Không có tiêu chuẩn nào về điều này và cách sử dụng khác nhau, hãy xem ví dụ câu hỏi này: Vị trí có thẩm quyền của các khóa truy vấn HTTP GET trùng lặp .
[.__.] LƯU Ý: Chức năng phân biệt chữ hoa chữ thường. Nếu bạn thích tên tham số không phân biệt chữ hoa chữ thường, thêm công cụ sửa đổi 'i' vào RegExp

Đây là bản cập nhật dựa trên thông số URLSearchParams mới để đạt được kết quả tương tự ngắn gọn hơn. Xem câu trả lời có tiêu đề " URLSearchParams " bên dưới.

7640
Artem Barger

Một số giải pháp được đăng ở đây là không hiệu quả. Lặp lại tìm kiếm biểu thức chính quy mỗi khi tập lệnh cần truy cập một tham số là hoàn toàn không cần thiết, một hàm duy nhất để phân tách các tham số thành một đối tượng kiểu mảng kết hợp là đủ. Nếu bạn không làm việc với API Lịch sử HTML 5, điều này chỉ cần thiết một lần cho mỗi lần tải trang. Các đề xuất khác ở đây cũng không thể giải mã URL chính xác.

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

Ví dụ chuỗi truy vấn:

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

Kết quả:

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

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

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

Điều này có thể dễ dàng được cải thiện để xử lý các chuỗi truy vấn kiểu mảng. Một ví dụ về điều này là ở đây , nhưng vì các tham số kiểu mảng không được xác định trong RFC 3986 Tôi sẽ không làm ô nhiễm câu trả lời này bằng mã nguồn. Đối với những người quan tâm đến phiên bản "bị ô nhiễm", hãy xem câu trả lời của campbeln bên dưới .

Ngoài ra, như đã chỉ ra trong các nhận xét, ; là một dấu phân cách pháp lý cho các cặp key=value. Nó sẽ yêu cầu một regex phức tạp hơn để xử lý ; hoặc &, điều mà tôi nghĩ là không cần thiết bởi vì hiếm khi ; được sử dụng và tôi thậm chí còn nói rằng cả hai sẽ không được sử dụng. Nếu bạn cần hỗ trợ ; thay vì &, chỉ cần trao đổi chúng trong regex.

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

Đơn giản hơn nhiều!

1666
Andy E

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

Không có 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('&'));

Với một URL như ?topic=123&name=query+string, sau đây sẽ trả về:

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

Phương pháp Google

Xé mã của Google Tôi đã tìm thấy phương pháp họ sử dụng: 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
}

Nó bị xáo trộn, nhưng đó là điều dễ hiểu. Nó không hoạt động vì một số biến không xác định.

Họ bắt đầu tìm kiếm các tham số trên url từ ? và cũng từ hàm băm #. Sau đó, với mỗi tham số, chúng phân chia thành dấu bằng b[f][p]("=") (trông giống như indexOf, chúng sử dụng vị trí của char để lấy khóa/giá trị). Khi phân tách, họ kiểm tra xem tham số có giá trị hay không, nếu có thì họ lưu trữ giá trị của d, nếu không họ sẽ tiếp tục.

Cuối cùng, đối tượng d được trả về, xử lý thoát và ký hiệu +. Đối tượng này giống như của tôi, nó có hành vi tương tự.

Phương thức của tôi dưới dạng 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);

Sử dụng

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

Kiểm tra hiệu năng (phương pháp phân tách so với phương thức regex) ( jsPerf )

Mã chuẩn bị: khai báo phương thức

Tách mã kiểm tra

var qs = window.GetQueryString(query);

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

Mã kiểm tra Regex

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

Thử nghiệm trong Firefox 4.0 x86 trên Windows Server 2008 R2/7 x64

  • Phương pháp phân tách : 144,780 ± 2,17% nhanh nhất
  • Phương thức Regex : 13.891 ± 0.85% | Chậm hơn 90%
1244
BrunoLM

Phiên bản cải tiến của Câu trả lời của Artem Barger's :

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

Để biết thêm thông tin về cải tiến, xem: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

650
James

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ và Chrome 49+ hỗ trợ URLSearchParams API:

Có một polyfill được đề xuất bởi googleURLSearchParamscho các phiên bản ổn định của IE.

Nó không được chuẩn hóa bởi W3C , nhưng nó là một mức sống của WhatWG .

Bạn có thể sử dụng nó trên vị trí, nhưng bạn cần xóa dấu chấm hỏi ? (ví dụ: với .slice(1)):

let params = new URLSearchParams(location.search);

hoặc là

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

Hoặc tất nhiên trên bất kỳ URL nào:

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

Bạn cũng có thể nhận thông số bằng cách sử dụng thuộc tính tốc ký .searchParams trên đối tượng URL, như sau:

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

Bạn đọc/đặt tham số thông qua API get(KEY), set(KEY, VALUE), append(KEY, VALUE). Bạn cũng có thể lặp lại trên tất cả các giá trị for (let p of params) {}.

A triển khai tham chiếu và a trang mẫu có sẵn để kiểm tra và thử nghiệm.

541
Paul Sweatte

Chỉ là một đề nghị khác. PluginPurlcho phép truy xuất tất cả các phần của URL, bao gồm cả neo, Máy chủ, v.v.

Nó có thể được sử dụng có hoặc không có jQuery.

Cách sử dụng rất đơn giản và tuyệt vời:

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'

Tuy nhiên, kể từ ngày 11 tháng 11 năm 2014, Purl không còn được duy trì và tác giả khuyên nên sử dụng URI.js thay vào đó. Plugin jQuery khác ở chỗ nó tập trung vào các yếu tố - để sử dụng với các chuỗi, chỉ cần sử dụng trực tiếp URI, có hoặc không có jQuery. Mã tương tự sẽ trông như vậy, tài liệu đầy đủ hơn ở đây :

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'
398
AlfaTeK

tl; dr

Một giải pháp nhanh, hoàn thành , xử lý các khóa đa trị và các ký tự được mã hóa .

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

Tất cả mã này là gì ...
[.__.] "null-hợp nhất" , đánh giá ngắn mạch
[.__.] ES6 Phân công các bài tập , Hàm mũi tên , Chuỗi mẫu

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


Đọc thêm ... về giải pháp Vanilla JavaScript.

Để truy cập các phần khác nhau của URL, hãy sử dụng location.(search|hash)

Giải pháp dễ nhất (giả)

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
  • Xử lý chìa khóa trống chính xác.
  • Ghi đè đa phím với cuối cùng giá trị tìm thấy.
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

Khóa đa giá trị

Kiểm tra khóa đơn giản (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]]})
  • Bây giờ trở lại mảng thay thế.
  • Truy cập các giá trị bằng qd.key[index] hoặc qd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

Ký tự được mã hóa?

Sử dụng decodeURIComponent() cho lần phân tách thứ hai hoặc cả hai.

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


Từ ý kiến

* !!! Xin lưu ý rằng decodeURIComponent(undefined) trả về chuỗi "undefined". Giải pháp nằm ở cách sử dụng đơn giản && , đảm bảo rằng decodeURIComponent() không được gọi trên các giá trị không xác định. (Xem "giải pháp hoàn chỉnh" ở trên cùng.)

v = v && decodeURIComponent(v);


[.__.] Nếu chuỗi truy vấn trống (location.search == ""), kết quả có phần sai lệch qd == {"": undefined}. Bạn nên kiểm tra chuỗi truy vấn trước khi khởi chạy chức năng phân tích cú pháp likeo:

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

Roshambo trên snipplr.com có ​​một tập lệnh đơn giản để đạt được điều này được mô tả trongNhận tham số URL với jQuery | Cải thiện. Với kịch bản của anh ta, bạn cũng dễ dàng lấy ra các tham số bạn muốn.

Đây là ý chính:

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

Sau đó, chỉ cần lấy tham số của bạn từ chuỗi truy vấn.

Vì vậy, nếu URL/chuỗi truy vấn là xyz.com/index.html?lang=de.

Chỉ cần gọi var langval = $.urlParam('lang');, và bạn đã có nó.

UZBEKJON cũng có một bài đăng blog tuyệt vời về điều này,Nhận các tham số & giá trị URL với jQuery.

216
brandonjp

Nếu bạn đang sử dụng jQuery, bạn có thể sử dụng thư viện, chẳng hạn như jQuery BBQ: Nút quay lại & Thư viện truy vấn .

... jQuery BBQ cung cấp một phương thức .deparam() đầy đủ, cùng với cả quản lý trạng thái băm và phân tích chuỗi phân đoạn/truy vấn và hợp nhất các phương thức tiện ích.

Chỉnh sửa: Thêm ví dụ Deparam:

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

Nếu bạn chỉ muốn sử dụng JavaScript đơn giản, bạn có thể sử dụng ...

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

})();​

Do API Lịch sử HTML mới và cụ thể là history.pushState() và history.replaceState(), URL có thể thay đổi sẽ làm mất hiệu lực bộ đệm của các tham số và giá trị của chúng.

Phiên bản này sẽ cập nhật bộ đệm nội bộ của các tham số mỗi khi lịch sử thay đổi.

165
alex

Chỉ cần sử dụng hai chia nhỏ :

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

Tôi đã đọc tất cả các câu trả lời trước đó và đầy đủ hơn. Nhưng tôi nghĩ đó là phương pháp đơn giản và nhanh nhất. Bạn có thể kiểm tra jsPerf điểm chuẩn này

Để giải quyết vấn đề trong bình luận của Rup, hãy thêm một phân chia có điều kiện bằng cách thay đổi dòng đầu tiên thành hai dòng bên dưới. Nhưng độ chính xác tuyệt đối có nghĩa là bây giờ chậm hơn regrec (xem 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;
}

Vì vậy, nếu bạn biết bạn sẽ không gặp phải trường hợp phản đối của Rup, thì chiến thắng này. Nếu không, regrec.

Hoặc nếu bạn có quyền kiểm soát chuỗi truy vấn và có thể đảm bảo rằng giá trị bạn đang cố gắng nhận sẽ không bao giờ chứa bất kỳ ký tự được mã hóa URL nào (có những giá trị này sẽ là một ý tưởng tồi) - bạn có thể sử dụng cách sau phiên bản đơn giản hơn và dễ đọc hơn của tùy chọn 1:

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

Đây là nỗ lực của tôi trong việc biến giải pháp tuyệt vời của Andy E thành một plugin jQuery hoàn chỉnh:

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

Cú pháp là:

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

Tốt nhất của cả hai thế giới!

94
Ryan Phelan

Nếu bạn đang thực hiện nhiều thao tác URL hơn là chỉ phân tích chuỗi truy vấn, bạn có thể thấy URI.js hữu ích. Đây là một thư viện để thao tác các URL - và đi kèm với tất cả các chuông và còi. (Xin lỗi vì tự quảng cáo ở đây)

để chuyển đổi chuỗi truy vấn của bạn thành bản đồ:

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

(URI.js cũng "sửa" các truy vấn xấu như ?&foo&&bar=baz& thành ?foo&bar=baz)

76
rodneyrehm

Tôi thích Giải pháp của Ryan Phelan . Nhưng tôi không thấy bất kỳ điểm nào mở rộng jQuery cho điều đó? Không có việc sử dụng chức năng jQuery.

Mặt khác, tôi thích chức năng tích hợp trong Google Chrome: window.location.getParameter.

Vậy tại sao không sử dụng cái này? Được rồi, các trình duyệt khác không có. Vì vậy, hãy tạo chức năng này nếu nó không tồn tại:

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

Hàm này ít nhiều từ Ryan Phelan, nhưng nó được gói khác: tên rõ ràng và không phụ thuộc vào các thư viện javascript khác. Thông tin thêm về chức năng này trên blog của tôi .

59
Anatoly Mironov

Đây là một cách nhanh chóng để có được một đối tượng tương tự như mảng PHP $ _GET :

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

Sử dụng:

var $_GET = get_query();

Đối với chuỗi truy vấn x=5&y&z=hello&x=6, điều này trả về đối tượng:

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

Giữ cho nó đơn giản trong mã JavaScript đơn giản:

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

Gọi nó từ bất cứ nơi nào trong mã JavaScript:

var result = qs('someKey');
52
Sagiv Ofek

Đây là tất cả các câu trả lời tuyệt vời, nhưng tôi cần một cái gì đó mạnh mẽ hơn một chút, và nghĩ rằng tất cả các bạn có thể muốn có những gì tôi tạo ra.

Đây là một phương pháp thư viện đơn giản để phân tích và thao tác các tham số URL. Phương thức tĩnh có các phương thức phụ sau có thể được gọi trên URL chủ đề:

  • gethost
  • getPath
  • nhận được
  • setHash
  • getParams
  • getQuery
  • setParam
  • có được
  • hasParam
  • gỡ bỏ

Thí dụ:

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

Từ MDN :

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

alert(loadPageVar("name"));
43
orip

Tôi sử dụng biểu thức chính quy rất nhiều, nhưng không phải vì điều đó.

Tôi có vẻ dễ dàng và hiệu quả hơn khi đọc chuỗi truy vấn một lần trong ứng dụng của mình và xây dựng một đối tượng từ tất cả các cặp khóa/giá trị như:

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

Đối với một URL như http://domain.com?param1=val1&param2=val2, bạn có thể nhận giá trị của chúng sau này trong mã của mình là search.param1 và search.param2.

39
Mic

Mã golf:

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

Hiển thị nó!

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

Trên máy Mac của tôi: test.htm?i=can&has=cheezburger hiển thị

0:can
1:cheezburger
i:can
has:cheezburger
39
shanimal

Phương pháp Roshambo jQuery không quan tâm đến việc giải mã URL

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

Chỉ cần thêm khả năng đó trong khi thêm vào câu lệnh return

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

Bây giờ bạn có thể tìm thấy Gist cập nhật:

$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}
38
Mohammad Arif
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
38
Jet

Tôi thích cái này (lấy từ 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;
}

Làm việc tuyệt vời cho tôi.

36
Tomamais

Đây là chỉnh sửa của tôi thành câu trả lời tuyệt vời này - với khả năng phân tích các chuỗi truy vấn với các khóa không có giá trị.

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

QUAN TRỌNG! Tham số cho chức năng đó trong dòng cuối cùng là khác nhau. Đây chỉ là một ví dụ về cách người ta có thể chuyển một URL tùy ý cho nó. Bạn có thể sử dụng dòng cuối cùng từ câu trả lời của Bruno để phân tích URL hiện tại.

Vậy chính xác thì điều gì đã thay đổi? Với url http://sb.com/reg/step1?param= kết quả sẽ giống nhau. Nhưng với url http://sb.com/reg/step1?param Giải pháp của Bruno trả về một đối tượng không có khóa, trong khi của tôi trả về một đối tượng có giá trị khóa param và undefined.

36
skaurus

Tôi cần một đối tượng từ chuỗi truy vấn và tôi ghét rất nhiều mã. Nó có thể không mạnh nhất trong vũ trụ, nhưng đó chỉ là một vài dòng mã.

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

Một URL như this.htm?hello=world&foo=bar sẽ tạo:

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

Đây là phiên bản mở rộng của chuyển đổi "Xử lý chuỗi truy vấn kiểu mảng" được liên kết của Andy E. Đã sửa lỗi (?key=1&key[]=2&key[]=3; 1 bị mất và được thay thế bằng [2,3]), thực hiện một vài cải tiến hiệu suất nhỏ (giải mã lại các giá trị, tính toán lại vị trí "[", v.v.) và thêm một số cải tiến (được chức năng hóa, hỗ trợ cho ?key=1&key=2, hỗ trợ cho ; dấu phân cách). Tôi đã để lại các biến ngắn một cách khó chịu, nhưng đã thêm các bình luận để làm cho chúng dễ đọc hơn (ồ, và tôi đã sử dụng lại v trong các hàm cục bộ, xin lỗi nếu điều đó gây nhầm lẫn;).

Nó sẽ xử lý chuỗi truy vấn sau ...

? test = Hello & person = neek & person [] = jeff & person [] = jim & person [thêm] = john & test3 & nocache = 1398913611264

... biến nó thành một vật thể trông giống như ...

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

Như bạn có thể thấy ở trên, phiên bản này xử lý một số biện pháp của các mảng "không đúng định dạng", tức là - person=neek&person[]=jeff&person[]=jim hoặc person=neek&person=jeff&person=jim là khóa có thể xác định và hợp lệ (ít nhất là trong NameValueCollection.Add ):

Nếu khóa được chỉ định đã tồn tại trong thể hiện NameValueCollection đích, giá trị được chỉ định sẽ được thêm vào danh sách các giá trị được phân tách bằng dấu phẩy hiện có ở dạng "value1, value2, value3".

Có vẻ như bồi thẩm đoàn có phần không hoạt động trên các khóa lặp lại vì không có thông số kỹ thuật. Trong trường hợp này, nhiều khóa được lưu trữ dưới dạng một mảng (giả). Nhưng hãy lưu ý rằng giá trị I không xử lý dựa trên dấu phẩy thành mảng.

Mã: 

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

Đây là một chức năng tôi đã tạo ra một thời gian trước đây và tôi khá hài lòng với. Nó không phải là trường hợp nhạy cảm - đó là tiện dụng. Ngoài ra, nếu QS được yêu cầu không tồn tại, nó chỉ trả về một chuỗi rỗng.

Tôi sử dụng một phiên bản nén của điều này. Tôi đang đăng bài không nén cho các loại người mới để giải thích rõ hơn những gì đang diễn ra.

Tôi chắc chắn rằng điều này có thể được tối ưu hóa hoặc thực hiện khác nhau để hoạt động nhanh hơn, nhưng nó luôn hoạt động tốt cho những gì tôi cần.

Thưởng thức.

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

Chúng tôi vừa phát hành arg.js , một dự án nhằm giải quyết vấn đề này một lần và mãi mãi. Theo truyền thống, nó rất khó khăn nhưng bây giờ bạn có thể làm:

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

hoặc nhận được toàn bộ lô:

var params = Arg.all();

và nếu bạn quan tâm đến sự khác biệt giữa ?query=true và #hash=true thì bạn có thể sử dụng phương thức Arg.query() và Arg.hash().

27
Mat Ryer

Vấn đề với câu trả lời hàng đầu cho câu hỏi đó là các tham số không được hỗ trợ được đặt sau #, nhưng đôi khi cũng cần có giá trị này.

Tôi đã sửa đổi câu trả lời để cho nó phân tích một chuỗi truy vấn đầy đủ bằng dấu băm:

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

Và đây là cách bạn có thể sử dụng chức năng này với giả sử URL là

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

var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');
25
gewel
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
  • Cặp khóa/giá trị thông thường (?param=value)
  • Khóa w/o value (?param: không có dấu hoặc giá trị bằng nhau)
  • Khóa w/giá trị trống (?param=: dấu bằng, nhưng không có giá trị ở bên phải dấu bằng)
  • Khóa lặp lại (?param=1&param=2)
  • Xóa các khóa trống (?&&: không có khóa hoặc giá trị)

Mã số:

  • var queryString = window.location.search || '';
var keyValPairs = [];
var params      = {};
queryString     = queryString.substr(1);

if (queryString.length)
{
   keyValPairs = queryString.split('&');
   for (pairNum in keyValPairs)
   {
      var key = keyValPairs[pairNum].split('=')[0];
      if (!key.length) continue;
      if (typeof params[key] === 'undefined')
         params[key] = [];
      params[key].Push(keyValPairs[pairNum].split('=')[1]);
   }
}

Cách gọi:

  • params['key'];  // returns an array of values (1..n)

Đầu ra:

  • key            ["value"]
keyemptyvalue  [""]
keynovalue     [undefined, "nowhasvalue"]
20
vol7ron

Nếu bạn đang sử dụng Browserify, bạn có thể sử dụng mô-đun url từ Node.js :

var url = require('url');

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

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

Đọc thêm: URL Node.js v0.12.2 Hướng dẫn & Tài liệu

EDIT: Bạn có thể sử dụng giao diện URL , giao diện này được áp dụng khá rộng rãi trong hầu hết tất cả các trình duyệt mới và nếu mã là sẽ chạy trên một trình duyệt cũ, bạn có thể sử dụng polyfill như thế này . Đây là một ví dụ mã về cách sử dụng giao diện URL để nhận các tham số truy vấn (còn gọi là tham số tìm kiếm)

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

Bạn cũng có thể sử dụng URLSearchParams cho nó, tại đây một ví dụ từ MDN để làm điều đó với 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"
20
nkh

Tôi đã phát triển một thư viện nhỏ bằng cách sử dụng các kỹ thuật được liệt kê ở đây để tạo ra một giải pháp dễ sử dụng, dễ sử dụng cho những rắc rối của bất kỳ ai; Nó có thể được tìm thấy ở đây:

https://github.com/Nijikokun/query-js

Cách sử dụng

Lấy tham số/khóa cụ thể:

query.get('param');

Sử dụng trình xây dựng để tìm nạp toàn bộ đối tượng:

var storage = query.build();
console.log(storage.param);

và nhiều hơn nữa ... kiểm tra liên kết github để biết thêm ví dụ.

Tính năng

  1. Bộ nhớ đệm trên cả giải mã và tham số
  2. Hỗ trợ chuỗi truy vấn băm #hello?page=3
  3. Hỗ trợ chuyển các truy vấn tùy chỉnh
  4. Hỗ trợ tham số mảng/đối tượng user[]="jim"&user[]="bob"
  5. Hỗ trợ quản lý trống &&
  6. Hỗ trợ các tham số khai báo không có giá trị name&hello="world"
  7. Hỗ trợ các tham số lặp lại param=1&param=2
  8. Nguồn sạch, nhỏ gọn và dễ đọc 4kb
  9. Hỗ trợ AMD, Yêu cầu, Nút
20
Nijikokun

Một lớp lót để có được truy vấn:

var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];
20
Anoop

Một phương thức jQuery rất nhẹ:

var qs = window.location.search.replace('?','').split('&'),
    request = {};
$.each(qs, function(i,v) {
    var initial, pair = v.split('=');
    if(initial = request[pair[0]]){
        if(!$.isArray(initial)) {
            request[pair[0]] = [initial]
        }
        request[pair[0]].Push(pair[1]);
    } else {
        request[pair[0]] = pair[1];
    }
    return;
});
console.log(request);

Và để cảnh báo, ví dụ? Q

alert(request.q)
17
Roi

Đây là phiên bản mã phân tích chuỗi truy vấn của tôi trên GitHub .

Đó là "tiền tố" với jquery. *, Nhưng chính hàm phân tích cú pháp không sử dụng jQuery. Nó khá nhanh, nhưng vẫn mở cho một vài tối ưu hóa hiệu suất đơn giản.

Ngoài ra, nó hỗ trợ mã hóa danh sách & bảng băm trong URL, như:

arr[]=10&arr[]=20&arr[]=100

hoặc là

hash[key1]=hello&hash[key2]=moto&a=How%20are%20you

jQuery.toQueryParams = function(str, separator) {
    separator = separator || '&'
    var obj = {}
    if (str.length == 0)
        return obj
    var c = str.substr(0,1)
    var s = c=='?' || c=='#'  ? str.substr(1) : str; 

    var a = s.split(separator)
    for (var i=0; i<a.length; i++) {
        var p = a[i].indexOf('=')
        if (p < 0) {
            obj[a[i]] = ''
            continue
        }
        var k = decodeURIComponent(a[i].substr(0,p)),
            v = decodeURIComponent(a[i].substr(p+1))

        var bps = k.indexOf('[')
        if (bps < 0) {
            obj[k] = v
            continue;
        } 

        var bpe = k.substr(bps+1).indexOf(']')
        if (bpe < 0) {
            obj[k] = v
            continue;
        }

        var bpv = k.substr(bps+1, bps+bpe-1)
        var k = k.substr(0,bps)
        if (bpv.length <= 0) {
            if (typeof(obj[k]) != 'object') obj[k] = []
            obj[k].Push(v)
        } else {
            if (typeof(obj[k]) != 'object') obj[k] = {}
            obj[k][bpv] = v
        }
    }
    return obj;

}
16
Vadim

Đây là những gì tôi đang sử dụng:

/**
 * Examples:
 * getUrlParams()['myparam']    // url defaults to the current page
 * getUrlParams(url)['myparam'] // url can be just a query string
 *
 * Results of calling `getUrlParams(url)['myparam']` with various urls:
 * example.com                               (undefined)
 * example.com?                              (undefined)
 * example.com?myparam                       (empty string)
 * example.com?myparam=                      (empty string)
 * example.com?myparam=0                     (the string '0')
 * example.com?myparam=0&myparam=override    (the string 'override')
 *
 * Origin: http://stackoverflow.com/a/23946023/2407309
 */
function getUrlParams (url) {
    var urlParams = {} // return value
    var queryString = getQueryString()
    if (queryString) {
        var keyValuePairs = queryString.split('&')
        for (var i = 0; i < keyValuePairs.length; i++) {
            var keyValuePair = keyValuePairs[i].split('=')
            var paramName = keyValuePair[0]
            var paramValue = keyValuePair[1] || ''
            urlParams[paramName] = decodeURIComponent(paramValue.replace(/\+/g, ' '))
        }
    }
    return urlParams // functions below
    function getQueryString () {
        var reducedUrl = url || window.location.search
        reducedUrl = reducedUrl.split('#')[0] // Discard fragment identifier.
        var queryString = reducedUrl.split('?')[1]
        if (!queryString) {
            if (reducedUrl.search('=') !== false) { // URL is a query string.
                queryString = reducedUrl
            }
        }
        return queryString
    } // getQueryString
} // getUrlParams

Trả về 'ghi đè' thay vì '0' trong trường hợp cuối cùng làm cho nó phù hợp với PHP. Hoạt động trong IE7.

12
Vladimir Kornea

Tôi thà sử dụng split() thay vì Regex cho thao tác này:

function getUrlParams() {
    var result = {};
    var params = (window.location.search.split('?')[1] || '').split('&');
    for(var param in params) {
        if (params.hasOwnProperty(param)) {
            var paramParts = params[param].split('=');
            result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");
        }
    }
    return result;
}
11
Eneko Alonso

Đối với những người muốn một phương pháp ngắn (có giới hạn):

location.search.split('myParameter=')[1]
10
George

Nhận tất cả các tham số chuỗi truy vấn bao gồm các giá trị hộp kiểm (mảng).

Xem xét việc sử dụng đúng và bình thường các tham số GET, những điều tôi thấy nó còn thiếu, trên hầu hết các chức năng, là hỗ trợ cho mảng và xóa dữ liệu băm.

Vì vậy, tôi đã viết chức năng này:

function qs(a){
 if(!a)return {};
 a=a.split('#')[0].split('&');
 var b=a.length,c={},d,k,v;
 while(b--){
  d=a[b].split('=');
  k=d[0].replace('[]',''),v=decodeURIComponent(d[1]||'');
  c[k]?typeof c[k]==='string'?(c[k]=[v,c[k]]):(c[k].unshift(v)):c[k]=v;
 }
 return c
}

Sử dụng các toán tử tốc ký và vòng lặp while--, hiệu suất sẽ rất tốt.

Hỗ trợ:

  1. Giá trị trống (key =/key)
  2. Giá trị khóa (key = value)
  3. Mảng (khóa [] = value)
  4. Băm (thẻ băm được tách ra)

Ghi chú:

Nó không hỗ trợ mảng đối tượng (key [key] = value)

Nếu không gian là + nó vẫn là +.

Thêm .replace(/\+/g, " ") nếu bạn cần.

Cách sử dụng: 

qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')

Trả về: 

{
    "empty": "",
    "key": "value",
    "array": [
        "1",
        "2"
    ]
}

Bản trình diễn:

http://jsfiddle.net/ZQMrt/1/

Thông tin

Nếu bạn không hiểu điều gì đó hoặc bạn không thể đọc chức năng, hãy hỏi. Tôi rất vui để giải thích những gì tôi đã làm ở đây.

Nếu bạn nghĩ rằng hàm này không thể đọc được và không thể nhầm lẫn, tôi rất vui khi viết lại hàm cho bạn, nhưng hãy xem xét rằng các toán tử tốc ký & bitwise luôn nhanh hơn một cú pháp chuẩn (có thể đọc về các tốc ký và các toán tử bitwise trong ECMA-262 sách hoặc sử dụng công cụ tìm kiếm yêu thích của bạn). Viết lại mã theo cú pháp dễ đọc có nghĩa là mất hiệu suất.

10
cocco

Cái này hoạt động tốt

function getQuerystring(key) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == key) {
            return pair[1];
        }
    }
}

lấy từ ở đây

9
IT ppl
function getUrlVar(key){
    var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); 
    return result && unescape(result[1]) || ""; 
}

https://Gist.github.com/1771618

8
alkos333

Hàm này chuyển đổi chuỗi truy vấn thành một đối tượng giống như JSON, nó cũng xử lý các tham số đa giá trị và đa giá trị:

"use strict";
function getQuerystringData(name) {
    var data = { };
    var parameters = window.location.search.substring(1).split("&");
    for (var i = 0, j = parameters.length; i < j; i++) {
        var parameter = parameters[i].split("=");
        var parameterName = decodeURIComponent(parameter[0]);
        var parameterValue = typeof parameter[1] === "undefined" ? parameter[1] : decodeURIComponent(parameter[1]);
        var dataType = typeof data[parameterName];
        if (dataType === "undefined") {
            data[parameterName] = parameterValue;
        } else if (dataType === "array") {
            data[parameterName].Push(parameterValue);
        } else {
            data[parameterName] = [data[parameterName]];
            data[parameterName].Push(parameterValue);
        }
    }
    return typeof name === "string" ? data[name] : data;
}

Chúng tôi thực hiện kiểm tra undefined trên parameter[1] vì decodeURIComponent trả về chuỗi "không xác định" nếu biến là undefined và điều đó sai.

Sử dụng:

"use strict";
var data = getQuerystringData();
var parameterValue = getQuerystringData("parameterName");
6
Albireo

Thử đi:

String.prototype.getValueByKey = function(k){
    var p = new RegExp('\\b'+k+'\\b','gi');
    return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p)+k.length+1).substr(0,this.substr(this.search(p)+k.length+1).search(/(&|;|$)/))) : "";
};

Sau đó gọi nó như vậy:

if(location.search != "") location.search.getValueByKey("id");

Bạn có thể sử dụng cái này cho cookie cũng:

if(navigator.cookieEnabled) document.cookie.getValueByKey("username");

Điều này chỉ hoạt động đối với các chuỗi có key=value[&|;|$]... sẽ không hoạt động trên các đối tượng/mảng.

Nếu bạn không muốn sử dụng String.prototype ... hãy di chuyển nó đến một hàm và truyền chuỗi dưới dạng đối số

6
user981090

Tôi đã sử dụng mã này (JavaScript) để lấy những gì được truyền qua URL:

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

Sau đó, để gán giá trị cho một biến, bạn chỉ phải chỉ định tham số nào bạn muốn nhận, tức là nếu URL là example.com/?I=1&p=2&f=3

Bạn có thể làm điều này để có được các giá trị:

var getI = getUrlVars()["I"];
var getP = getUrlVars()["p"];
var getF = getUrlVars()["f"];

thì các giá trị sẽ là:

getI = 1, getP = 2 and getF = 3
6
user2579312

Đoạn mã sau sẽ tạo một đối tượng có hai phương thức:

  1. isKeyExist: Kiểm tra xem có tồn tại một tham số cụ thể không
  2. getValue: Nhận giá trị của một tham số cụ thể.

var QSParam = new function() {
       var qsParm = {};
       var query = window.location.search.substring(1);
       var params = query.split('&');
       for (var i = 0; i < params.length; i++) {
           var pos = params[i].indexOf('=');
           if (pos > 0) {
               var key = params[i].substring(0, pos);
               var val = params[i].substring(pos + 1);
               qsParm[key] = val;
           }
       }
       this.isKeyExist = function(query){
           if(qsParm[query]){
               return true;
           }
           else{
              return false;
           }
       };
       this.getValue = function(query){
           if(qsParm[query])
           {
               return qsParm[query];
           }
           throw "URL does not contain query "+ query;
       }
};
6
Anoop

Hàm sau trả về một phiên bản đối tượng của queryString của bạn. Bạn chỉ có thể viết obj.key1 và obj.key2 để truy cập các giá trị của key1 và key2 trong tham số.

function getQueryStringObject()
{
    var querystring = document.location.search.replace('?','').split( '&' );
    var objQueryString={};
    var key="",val="";
    if(typeof querystring == 'undefined')
    {
        return (typeof querystring);
    }
    for(i=0;i<querystring.length;i++)
    {
        key=querystring[i].split("=")[0];
        val=querystring[i].split("=")[1];
        objQueryString[key] = val;
    }
    return objQueryString;
}

Và để sử dụng chức năng này, bạn có thể viết

var obj= getQueryStringObject();
alert(obj.key1);
5
Imdad

Đây là của riêng tôi về điều này. Hàm đầu tiên này giải mã một chuỗi URL thành một đối tượng của các cặp tên/giá trị:

url_args_decode = function (url) {
  var args_enc, el, i, nameval, ret;
  ret = {};
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  // strip off initial ? on search and split
  args_enc = el.search.substring(1).split('&');
  for (i = 0; i < args_enc.length; i++) {
    // convert + into space, split on =, and then decode 
    args_enc[i].replace(/\+/g, ' ');
    nameval = args_enc[i].split('=', 2);
    ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);
  }
  return ret;
};

Và như một phần thưởng bổ sung, nếu bạn thay đổi một số đối số, bạn có thể sử dụng hàm thứ hai này để đưa mảng args trở lại chuỗi URL:

url_args_replace = function (url, args) {
  var args_enc, el, name;
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  args_enc = [];
  // encode args to go into url
  for (name in args) {
    if (args.hasOwnProperty(name)) {
      name = encodeURIComponent(name);
      args[name] = encodeURIComponent(args[name]);
      args_enc.Push(name + '=' + args[name]);
    }
  }
  if (args_enc.length > 0) {
    el.search = '?' + args_enc.join('&');
  } else {
    el.search = '';
  }
  return el.href;
};
5
BMitch

Tôi đã làm một thư viện URL nhỏ cho nhu cầu của mình tại đây: https://github.com/Mikhus/jsurl

Đó là một cách phổ biến hơn để thao tác các URL trong JavaScript. Trong khi đó, nó thực sự rất nhẹ (được thu nhỏ và nén <1 KB) và có API rất đơn giản và sạch sẽ. Và nó không cần bất kỳ thư viện khác để làm việc.

Về câu hỏi ban đầu, rất đơn giản để làm:

var u = new Url; // Current document URL
// or
var u = new Url('http://user:[email protected]:8080/some/path?foo=bar&bar=baz#anchor');

// Looking for query string parameters
alert( u.query.bar);
alert( u.query.foo);

// Modifying query string parameters
u.query.foo = 'bla';
u.query.woo = ['hi', 'hey']

alert(u.query.foo);
alert(u.query.woo);
alert(u);
5
Mikhus

Nếu bạn muốn tham số kiểu mảng URL.js hỗ trợ các tham số kiểu mảng được lồng tùy ý cũng như các chỉ mục chuỗi (bản đồ). Nó cũng xử lý giải mã URL.

url.get("val[0]=zero&val[1]=one&val[2]&val[3]=&val[4]=four&val[5][0]=n1&val[5][1]=n2&val[5][2]=n3&key=val", {array:true});
// Result
{
    val: [
        'zero',
        'one',
        true,
        '',
        'four',
        [ 'n1', 'n2', 'n3' ]
    ]
    key: 'val'
}
4
Kevin Cox

Có nhiều giải pháp để truy xuất các giá trị truy vấn URI, tôi thích giải pháp này vì nó ngắn và hoạt động rất tốt:

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}
4
BlueMark

Một giải pháp đơn giản với JavaScript đơn giản và biểu thức chính quy :

alert(getQueryString("p2"));

function getQueryString (Param) {
    return decodeURI("http://www.example.com/?p1=p11&p2=p2222".replace(new RegExp("^(?:.*[&?]" + encodeURI(Param).replace(/[.+*]/g, "$&") + "(?:=([^&]*))?)?.*$", "i"), "$1"));
}

JsFiddle

4
Saidulu Buchhala

Có một tiện ích url nhỏ xinh cho việc này với một chút đường mát mẻ:

http://www.example.com/path/index.html?silly=willy#chucky=cheese

url();            // http://www.example.com/path/index.html?silly=willy#chucky=cheese
url('domain');    // example.com
url('1');         // path
url('-1');        // index.html
url('?');         // silly=willy
url('?silly');    // willy
url('?poo');      // (an empty string)
url('#');         // chucky=cheese
url('#chucky');   // cheese
url('#poo');      // (an empty string)

Kiểm tra các ví dụ khác và tải xuống tại đây: https://github.com/websanova/js-url#url

4
Rob

Đây là hàm JavaScript đơn giản và nhỏ nhất để lấy giá trị tham số Chuỗi int ans từ URL 

/* THIS FUNCTION IS TO FETCH INT PARAMETER VALUES */

function getParameterint(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=parseInt(url.replace(param+"=",""));
            alert(n); 
}
getParameteraint("page");
getParameteraint("pagee");

/*THIS FUNCTION IS TO FETCH STRING PARAMETER*/
function getParameterstr(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=url.replace(param+"=","");
            alert(n); 
}
getParameterstr("str");

Nguồn và DEMO: http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter-in-javascript.html

4
Code Spy

Có một triển khai mạnh mẽ trong nguồn của Node.js
[.__.] https://github.com/joyent/node/blob/master/lib/queryopes.js

Ngoài ra qs của TJ không phân tích cú pháp params lồng nhau
[.__.] https://github.com/visionmedia/node-queryopes

4
clyfe

Nếu bạn có Underscore.js hoặc lodash , một cách nhanh chóng và bẩn thỉu để thực hiện việc này là:

_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));
4
acjay
var getUrlParameters = function (name, url) {
    if (!name) {
        return undefined;
    }

    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    url = url || location.search;

    var regex = new RegExp('[\\?&#]' + name + '=?([^&#]*)', 'gi'), result, resultList = [];

    while (result = regex.exec(url)) {
        resultList.Push(decodeURIComponent(result[1].replace(/\+/g, ' ')));
    }

    return resultList.length ? resultList.length === 1 ? resultList[0] : resultList : undefined;
};
4
kayz1

Tôi đã lấy câu trả lời này và thêm hỗ trợ cho tùy chọn chuyển URL dưới dạng tham số; rơi trở lại window.location.search. Rõ ràng điều này hữu ích để nhận các tham số chuỗi truy vấn từ các URL không phải là trang hiện tại:

(function($, undef) {
  $.QueryString = function(url) {
    var pairs, qs = null, index, map = {};
    if(url == undef){
      qs = window.location.search.substr(1);
    }else{
      index = url.indexOf('?');
      if(index == -1) return {};
      qs = url.substring(index+1);
    }
    pairs = qs.split('&');
    if (pairs == "") return {};
    for (var i = 0; i < pairs.length; ++i)
    {
      var p = pairs[i].split('=');
      if(p.length != 2) continue;
      map[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return map;
  };
})(jQuery);
4
mynameistechno

Tôi tin rằng đây là một cách chính xác và ngắn gọn để đạt được điều này (được sửa đổi từ http://css-tricks.com/snippets/javascript/get-url-variables/ ):

function getQueryVariable(variable) {

    var query = window.location.search.substring(1),            // Remove the ? from the query string.
        vars = query.split("&");                                // Split all values by ampersand.

    for (var i = 0; i < vars.length; i++) {                     // Loop through them...
        var pair = vars[i].split("=");                          // Split the name from the value.
        if (pair[0] == variable) {                              // Once the requested value is found...
            return ( pair[1] == undefined ) ? null : pair[1];   // Return null if there is no value (no equals sign), otherwise return the value.
        }
    }

    return undefined;                                           // Wasn't found.

}
4
Gabriel Ryan Nahmias

Đây là phương pháp rất đơn giản để lấy giá trị tham số (chuỗi truy vấn)

Sử dụng hàm gV(para_name) để lấy giá trị của nó

var a=window.location.search;
a=a.replace(a.charAt(0),""); //Removes '?'
a=a.split("&");

function gV(x){
 for(i=0;i<a.length;i++){
  var b=a[i].substr(0,a[i].indexOf("="));
  if(x==b){
   return a[i].substr(a[i].indexOf("=")+1,a[i].length)}
3
Ankit_Shah55

Nếu bạn không muốn sử dụng thư viện JavaScript, bạn có thể sử dụng các hàm chuỗi JavaScript để phân tích window.location. Giữ mã này trong tệp .js bên ngoài và bạn có thể sử dụng nó nhiều lần trong các dự án khác nhau.

// Example - window.location = "index.htm?name=bob";

var value = getParameterValue("name");

alert("name = " + value);

function getParameterValue(param)
{
    var url = window.location;
    var parts = url.split('?');
    var params = parts[1].split('&');
    var val = "";

    for ( var i=0; i<params.length; i++)
    {
        var paramNameVal = params[i].split('=');

        if ( paramNameVal[0] == param )
        {
            val = paramNameVal[1];
        }
    }
    return val;
}
3
Robert Bolton

Đẹp nhất nhưng cơ bản:

data = {};
$.each(
    location.search.substr(1).split('&').filter(Boolean).map(function(kvpairs){
        return kvpairs.split('=')
    }),
    function(i,values) {
        data[values.shift()] = values.join('=')
    }
);

Nó không xử lý các danh sách giá trị như ?a[]=1&a[]2

3
Damien

Tôi khuyên bạn nên Bài học Dar như một plugin tốt. Tôi đã làm việc với nó trong một thời gian dài. Bạn cũng có thể sử dụng mã sau đây. Jus đặt var queryObj = {}; trước document. Yet và đặt mã dưới đây vào đầu document. Yet. Sau mã này, bạn có thể sử dụng queryObj["queryObjectName"] cho bất kỳ đối tượng truy vấn nào bạn có

var querystring = location.search.replace('?', '').split('&');
for (var i = 0; i < querystring.length; i++) {
    var name = querystring[i].split('=')[0];
    var value = querystring[i].split('=')[1];
    queryObj[name] = value;
}
2
farnoush resa

Biểu thức ngắn nhất có thể về kích thước để có được một đối tượng truy vấn dường như là:

var params = {};
location.search.substr(1).replace(/([^&=]*)=([^&]*)&?/g,
  function () { params[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]); });

Bạn có thể sử dụng phần tử A để phân tích URI từ một chuỗi thành các thành phần giống như location- của nó (ví dụ để loại bỏ #...):

var a = document.createElement('a');
a.href = url;
// Parse a.search.substr(1)... as above
2
daluege

Sử dụng:

  $(document).ready(function () {
      var urlParams = {};
      (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);

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

Vui lòng kiểm tra và cho tôi biết ý kiến ​​của bạn. Đồng thời tham khảoCách nhận giá trị chuỗi truy vấn bằng jQuery.

2
Pushkraj

Điều này sẽ phân tích các biếnV&AGRAVE;mảng từ một chuỗi URL. Nó không sử dụng regex hoặc bất kỳ thư viện bên ngoài nào.

function url2json(url) {
   var obj={};
   function arr_vals(arr){
      if (arr.indexOf(',') > 1){
         var vals = arr.slice(1, -1).split(',');
         var arr = [];
         for (var i = 0; i < vals.length; i++)
            arr[i]=vals[i];
         return arr;
      }
      else
         return arr.slice(1, -1);
   }
   function eval_var(avar){
      if (!avar[1])
          obj[avar[0]] = '';
      else
      if (avar[1].indexOf('[') == 0)
         obj[avar[0]] = arr_vals(avar[1]);
      else
         obj[avar[0]] = avar[1];
   }
   if (url.indexOf('?') > -1){
      var params = url.split('?')[1];
      if(params.indexOf('&') > 2){
         var vars = params.split('&');
         for (var i in vars)
            eval_var(vars[i].split('='));
      }
      else
         eval_var(params.split('='));
   }
   return obj;
}

Thí dụ:

var url = "http://www.x.com?luckyNums=[31,21,6]&name=John&favFoods=[pizza]&noVal"
console.log(url2json(url));

Đầu ra:

[object]
   noVal: ""
   favFoods: "pizza"
   name:     "John"
   luckyNums:
      0: "31"
      1: "21"
      2: "6"
2
Pithikos

Hàm này sẽ trả về một đối tượng JavaScript được phân tích cú pháp với bất kỳ giá trị lồng nhau tùy ý bằng cách sử dụng đệ quy khi cần thiết.

Đây là jsfiddle ví dụ.

[
  '?a=a',
  '&b=a',
  '&b=b',
  '&c[]=a',
  '&c[]=b',
  '&d[a]=a',
  '&d[a]=x',
  '&e[a][]=a',
  '&e[a][]=b',
  '&f[a][b]=a',
  '&f[a][b]=x',
  '&g[a][b][]=a',
  '&g[a][b][]=b',
  '&h=%2B+%25',
  '&i[aa=b',
  '&i[]=b',
  '&j=',
  '&k',
  '&=l',
  '&abc=foo',
  '&def=%5Basf%5D',
  '&ghi=[j%3Dkl]',
  '&xy%3Dz=5',
  '&foo=b%3Dar',
  '&xy%5Bz=5'
].join('');

Cho bất kỳ ví dụ thử nghiệm ở trên.

var qs = function(a) {
  var b, c, e;
  b = {};
  c = function(d) {
    return d && decodeURIComponent(d.replace(/\+/g, " "));
  };
  e = function(f, g, h) {
    var i, j, k, l;
    h = h ? h : null;
    i = /(.+?)\[(.+?)?\](.+)?/g.exec(g);
    if (i) {
      [j, k, l] = [i[1], i[2], i[3]]
      if (k === void 0) {
        if (f[j] === void 0) {
          f[j] = [];
        }
        f[j].Push(h);
      } else {
        if (typeof f[j] !== "object") {
          f[j] = {};
        }
        if (l) {
          e(f[j], k + l, h);
        } else {
          e(f[j], k, h);
        }
      }
    } else {
      if (f.hasOwnProperty(g)) {
        if (Array.isArray(f[g])) {
          f[g].Push(h);
        } else {
          f[g] = [].concat.apply([f[g]], [h]);
        }
      } else {
        f[g] = h;
      }
      return f[g];
    }
  };
  a.replace(/^(\?|#)/, "").replace(/([^#&=?]+)?=?([^&=]+)?/g, function(m, n, o) {
    n && e(b, c(n), c(o));
  });
  return b;
};
1
Peter T Bosse II

Điều này sẽ hoạt động ... Bạn cần gọi hàm này khi bạn cần lấy tham số bằng cách chuyển tên của nó ...

function getParameterByName(name)
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  alert(results[1]);
  if (results == null)
    return "";
  else
    return results[1];
}
1
sonorita

Nhanh chóng, dễ dàng và nhanh chóng:

Chức năng: 

function getUrlVar() {
    var result = {};
    var location = window.location.href.split('#');
    var parts = location[0].replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        result [key] = value;
    });
    return result;
}

Sử dụng: 

var varRequest = getUrlVar()["theUrlVarName"];
1
Shlomi Hassid

Dưới đây là String triển khai nguyên mẫu:

String.prototype.getParam = function( str ){
    str = str.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp( "[\\?&]*"+str+"=([^&#]*)" );    
    var results = regex.exec( this );
    if( results == null ){
        return "";
    } else {
        return results[1];
    }
}

Cuộc gọi ví dụ:

var status = str.getParam("status")

str có thể là một chuỗi truy vấn hoặc url

1
krisrak

Xem cái này bài hoặc sử dụng cái này:

<script type="text/javascript" language="javascript">
    $(document).ready(function()
    {
        var urlParams = {};
        (function ()
        {
            var match,
            pl= /\+/g,  // Regular expression 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))
                urlParams[decode(match[1])] = decode(match[2]);
        })();

        if (urlParams["q1"] === 1)
        {
            return 1;
        }
    });
</script>
1
soheil bijavar

Làm điều này đáng tin cậy có liên quan nhiều hơn lúc đầu người ta có thể nghĩ.

  1. location.search, được sử dụng trong các câu trả lời khác, rất dễ gãy và nên tránh - ví dụ: nó sẽ trả về sản phẩm nào nếu ai đó vặn vít và đặt mã định danh #fragment trước chuỗi ?query.
  2. Theo tôi, có một số cách URL tự động thoát trong trình duyệt, điều này làm cho decodeURIComponent khá bắt buộc, theo ý kiến ​​của tôi.
  3. Nhiều chuỗi truy vấn được tạo từ đầu vào của người dùng, điều đó có nghĩa là các giả định về nội dung URL rất xấu. Bao gồm những thứ rất cơ bản như thế, mỗi khóa là duy nhất hoặc thậm chí có một giá trị.

Để giải quyết vấn đề này, đây là một API có thể định cấu hình với liều lập trình phòng thủ . Lưu ý rằng nó có thể được tạo một nửa kích thước nếu bạn sẵn sàng mã hóa một số biến hoặc nếu đầu vào không bao giờ có thể bao gồm hasOwnProperty, v.v.

Phiên bản 1: Trả về một đối tượng dữ liệu có tên và giá trị cho mỗi tham số. Nó sao chép một cách hiệu quả chúng và luôn tôn trọng cái đầu tiên được tìm thấy từ trái sang phải.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

    var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

    if (!url || typeof url !== 'string') {
        url = location.href; // more robust than location.search, which is flaky
    }
    if (!paramKey || typeof paramKey !== 'string') {
        paramKey = '&';
    }
    if (!pairKey || typeof pairKey !== 'string') {
        pairKey = '=';
    }
    // when you do not explicitly tell the API...
    if (arguments.length < 5) {
        // it will unescape parameter keys and values by default...
        decode = true;
    }

    queryStart = url.indexOf('?');
    if (queryStart >= 0) {
        // grab everything after the very first ? question mark...
        query = url.substring(queryStart + 1);
    } else {
        // assume the input is already parameter data...
        query = url;
    }
    // remove fragment identifiers...
    fragStart = query.indexOf('#');
    if (fragStart >= 0) {
        // remove everything after the first # hash mark...
        query = query.substring(0, fragStart);
    }
    // make sure at this point we have enough material to do something useful...
    if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
        // we no longer need the whole query, so get the parameters...
        query = query.split(paramKey);
        result = {};
        // loop through the parameters...
        for (i = 0, len = query.length; i < len; i = i + 1) {
            pairKeyStart = query[i].indexOf(pairKey);
            if (pairKeyStart >= 0) {
                name = query[i].substring(0, pairKeyStart);
            } else {
                name = query[i];
            }
            // only continue for non-empty names that we have not seen before...
            if (name && !Object.prototype.hasOwnProperty.call(result, name)) {
                if (decode) {
                    // unescape characters with special meaning like ? and #
                    name = decodeURIComponent(name);
                }
                if (pairKeyStart >= 0) {
                    value = query[i].substring(pairKeyStart + 1);
                    if (value) {
                        if (decode) {
                            value = decodeURIComponent(value);
                        }
                    } else {
                        value = missingValue;
                    }
                } else {
                    value = missingValue;
                }
                result[name] = value;
            }
        }
        return result;
    }
}

Phiên bản 2: Trả về một đối tượng bản đồ dữ liệu với hai mảng có độ dài giống nhau, một cho tên và một cho các giá trị, với một chỉ mục cho mỗi tham số. Cái này hỗ trợ các tên trùng lặp và cố ý không sao chép chúng, vì đó có thể là lý do tại sao bạn muốn sử dụng định dạng này.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

   var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

   if (!url || typeof url !== 'string') {
       url = location.href; // more robust than location.search, which is flaky
   }
   if (!paramKey || typeof paramKey !== 'string') {
       paramKey = '&';
   }
   if (!pairKey || typeof pairKey !== 'string') {
       pairKey = '=';
   }
   // when you do not explicitly tell the API...
   if (arguments.length < 5) {
       // it will unescape parameter keys and values by default...
       decode = true;
   }

   queryStart = url.indexOf('?');
   if (queryStart >= 0) {
       // grab everything after the very first ? question mark...
       query = url.substring(queryStart + 1);
   } else {
       // assume the input is already parameter data...
       query = url;
   }
   // remove fragment identifiers...
   fragStart = query.indexOf('#');
   if (fragStart >= 0) {
       // remove everything after the first # hash mark...
       query = query.substring(0, fragStart);
   }
   // make sure at this point we have enough material to do something useful...
   if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
       // we no longer need the whole query, so get the parameters...
       query = query.split(paramKey);
       result = {
           names: [],
           values: []
       };
       // loop through the parameters...
       for (i = 0, len = query.length; i < len; i = i + 1) {
           pairKeyStart = query[i].indexOf(pairKey);
           if (pairKeyStart >= 0) {
               name = query[i].substring(0, pairKeyStart);
           } else {
               name = query[i];
           }
           // only continue for non-empty names...
           if (name) {
               if (decode) {
                   // unescape characters with special meaning like ? and #
                   name = decodeURIComponent(name);
               }
               if (pairKeyStart >= 0) {
                   value = query[i].substring(pairKeyStart + 1);
                   if (value) {
                       if (decode) {
                           value = decodeURIComponent(value);
                       }
                   } else {
                       value = missingValue;
                   }
               } else {
                   value = missingValue;
               }
               result.names.Push(name);
               result.values.Push(value);
           }
       }
       return result;
   }

}

1
Seth Holladay

Điều này không phù hợp với tôi, tôi muốn khớp ?b vì có tham số b và không khớp với ?return như tham số r, đây là giải pháp của tôi .

window.query_param = function(name) {
  var param_value, params;

  params = location.search.replace(/^\?/, '');
  params = _.map(params.split('&'), function(s) {
    return s.split('=');
  });

  param_value = _.select(params, function(s) {
    return s.first === name;
  })[0];

  if (param_value) {
    return decodeURIComponent(param_value[1] || '');
  } else {
    return null;
  }
};
1
Dorian
// Parse query string
var params = {}, queryString = location.hash.substring(1),
    regex = /([^&=]+)=([^&]*)/g,
    m;
while (m = regex.exec(queryString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
0
Konstantin Tarkus