window.location.search truy vấn dưới dạng JSON

Question

Có cách nào tốt hơn để chuyển đổi location.search của URL thành đối tượng không? Có lẽ chỉ hiệu quả hơn hoặc cắt bớt? Tôi đang sử dụng jQuery, nhưng JS thuần túy cũng có thể hoạt động.

var query = window.location.search.substring(1), queryPairs = query.split('&'), queryJSON = {}; 
$.each(queryPairs, function() { queryJSON[this.split('=')[0]] = this.split('=')[1]; }); 

Answer 1

Đây là hàm JS thuần túy. Phân tích phần tìm kiếm của URL hiện tại và trả về một đối tượng. (Đó là một chút chi tiết về khả năng đọc, suy nghĩ.)

function searchToObject() { 
    var pairs = window.location.search.substring(1).split("&"), 
    obj = {}, 
    pair, 
    i; 

    for (i in pairs) { 
    if (pairs[i] === "") continue; 

    pair = pairs[i].split("="); 
    obj[ decodeURIComponent(pair[0]) ] = decodeURIComponent(pair[1]); 
    } 

    return obj; 
} 

Trên ghi chú liên quan, bạn không cố gắng lưu trữ các thông số duy nhất trong "một đối tượng". ;)

Answer 2

Nếu bạn đang sử dụng trình duyệt hiện đại này tạo ra kết quả tương tự như câu trả lời được chấp nhận:

function searchToObject(search) { 
    return search.substring(1).split("&").reduce(function(result, value) { 
    var parts = value.split('='); 
    if (parts[0]) result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]); 
    return result; 
    }, {}) 
} 

Answer 3

Chỉ muốn chia sẻ giải pháp này sử dụng một chút ESNext và giảm tốc.

Nó thực hiện khá nhiều gợi ý tương tự bởi @Carlo nhưng nó sạch hơn một chút nếu bạn thấy thoải mái với ES6 và bộ giảm tốc.

const urlSearchData = searchString => { 
    if (!searchString) return false; 

    return searchString 
     .substring(1) 
     .split('&') 
     .reduce((result, next) => { 
      let pair = next.split('='); 
      result[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]); 

      return result; 
     }, {}); 
}; 

const searchData = urlSearchData(window.location.search); 

Answer 4

Tiếp cận của tôi, đơn giản và sạch

var params = "?q=Hello World&c=Awesome"; 
 

 
params = "{\"" + 
 
     params 
 
     .replace(/\?/gi, "") 
 
     .replace(/\&/gi, "\",\"") 
 
     .replace(/\=/gi, "\":\"") + 
 
     "\"}"; 
 
    
 
params = JSON.parse(params); 
 

 
alert(decodeURIComponent(params.q)); 
 
alert(decodeURIComponent(params.c));

Answer 5

JSON Parse sau stringify hiện công việc chuyển đổi đến một json với dữ liệu mảng.

?key1=val1&key2[]=val2.1&key2[]=val2.2&key2[]=val2.3&

{ 
    'key1' : 'val1', 
    'key2' : [ 'val2.1', 'val2.2', 'val2.3' ] 
} 

function QueryParamsToJSON() {    
 
    var list = location.search.slice(1).split('&'), 
 
     result = {}; 
 

 
    list.forEach(function(keyval) { 
 
     keyval = keyval.split('='); 
 
     var key = keyval[0]; 
 
     if (/\[[0-9]*\]/.test(key) === true) { 
 
      var pkey = key.split(/\[[0-9]*\]/)[0]; 
 
      if (typeof result[pkey] === 'undefined') { 
 
       result[pkey] = []; 
 
      } 
 
      result[pkey].push(decodeURIComponent(keyval[1] || '')); 
 
     } else { 
 
      result[key] = decodeURIComponent(keyval[1] || ''); 
 
     } 
 
    }); 
 

 
    return JSON.parse(JSON.stringify(result)); 
 
} 
 

 
var query_string = QueryParamsToJSON();

Answer 6

Note --no nghi ngờ trên giải pháp hoạt động, nhưng nó sẽ không bao gồm tất cả các nhà khai thác

Đoán bạn muốn một cái gì đó như thế này -

var search = location.search; 
var trimmedSearch = search.substring(1); 

var searchObj = trimmedSearch?JSON.parse(
    '{"' + trimmedSearch.replace(/&/g, '","').replace(/=/g,'":"') + '"}', 
    function(key, value) { 
     return key===""?value:decodeURIComponent(value) 
    } 
) 
: 
{} 

console.log(searchObj); 

cũ -

tìm kiếm Override dòng @ 1 với

search = "abc=foo&def=%5Basf%5D&xyz=5&foo=b%3Dar"; 

Output bạn nhận được là

Object {abc: "foo", def: "[asf]", xyz: "5", foo: "b=ar"} 

Answer 7

xây dựng trên @ rafaelbiten của ES6 làm việc, tôi đã thêm hỗ trợ cho các params có không có mảng tham số giá trị và truy vấn nào của kiểu nhập trùng lặp.

JSFiddle: https://jsfiddle.net/w922xefs/

const queryStringToJSObject = searchString => { 
    if (!searchString) return null; 

    return searchString 
    .replace(/^\?/, '') // Only trim off a single leading interrobang. 
    .split('&') 
    .reduce((result, next) => { 
     if (next === "") { 
     return result; 
     } 
     let pair = next.split('='); 
     let key = decodeURIComponent(pair[0]); 
     let value = typeof pair[1] !== "undefined" && decodeURIComponent(pair[1]) || undefined; 
     if (result.hasOwnProperty(key)) { // Check to see if this property has been met before. 
     if (Array.isArray(result[key])) { // Is it already an array? 
      result[key].push(value); 
     } 
     else { // Make it an array. 
      result[key] = [result[key], value]; 
     } 
     } 
     else { // First time seen, just add it. 
     result[key] = value; 
     } 

     return result; 
    }, {} 
); 
}; 

// Simple read of query string 
const searchData = queryStringToJSObject(window.location.search); 

Answer 8

lẽ là giải pháp ngắn nhất đối với trường hợp đơn giản:

location.search 
    .slice(1) 
    .split('&') 
    .map(p => p.split('=')) 
    .reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});