window.location.search查詢爲JSON

Question

有沒有更好的方法將URL的location.search轉換爲對象？也許只是更有效率或削減？我使用jQuery，但純JS也可以工作。

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

Answer 1

這是一個純JS功能。解析當前URL的搜索部分並返回一個對象。 （這是一個有點冗長的可讀性，腦海。）

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

相關提示，你不想要的單參數存儲在「一個JSON」，但在「對象」。 ;）

Answer 2

如果您正在使用最新的瀏覽器這產生相同的結果爲接受的答案：

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

只是想分享使用位ESNext和減速器的這一解決方案。

它與@Carlo的建議基本相同，但如果您對ES6和reducer感到滿意，它會更簡潔一些。

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

我的方法，簡單，乾淨

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解析字符串化確實轉換成JSON與陣列數據的作業。

?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

注意 --No疑問，上述解決方案的工作，但它不會覆蓋所有的運營商

猜你會想這樣的事情 -

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

前 -

與覆蓋搜索@一號線

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

輸出，你得到的是

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

Answer 7

大廈@ rafaelbiten的ES6工作，我添加了對具有PARAMS支持沒有值和查詢重複條目樣式的參數數組。

的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

可能是簡單的情況下，最短的解決方案：

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