zapytanie window.location.search jako JSON

Question

Czy istnieje lepszy sposób na przekonwertowanie lokalizacji adresu URL na obiekt? Może po prostu bardziej wydajne lub przycięte w dół? Używam jQuery, ale czysty JS też może działać.

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

Answer 1

Oto czysta funkcja JS. Analizuje część wyszukiwania bieżącego adresu URL i zwraca obiekt. (To trochę rozwlekły dla czytelności, umysłu.)

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

Na związane pamiętać, że nie próbujesz do przechowywania pojedynczych parametrów w „a”, ale w JSON „obiektu”. ;)

Answer 2

Jeśli używasz nowoczesnej przeglądarki to produkować taki sam wynik jak zaakceptowanej odpowiedzi:

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

Chciałem podzielić się z tego rozwiązania, używając trochę ESNext i reduktorem.

Jest to dokładnie to samo, co sugeruje @Carlo, ale jest trochę czystsze, jeśli nie masz problemów z ES6 i reduktorami.

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

Moje podejście, prosty i czysty

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 parsowania po stringify wykonuje zadanie konwersji do formatu JSON z danych tablicowych.

?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

Uwaga --no wątpienia powyżej rozwiązanie działa, ale to przyzwyczajenie obejmować wszystkie podmioty

Zgadnij co chcesz coś takiego -

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

ex -

wyszukiwania Zastąp @ 1 linia z

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

Wyjście masz jest

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

Answer 7

Building na użytkownika @ rafaelbiten pracy ES6 dodałem wsparcie dla parametrów, które mają brak tablic paramatycznych wartości i zapytań o zduplikowanym stylu wpisu.

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

Prawdopodobnie najkrótsza rozwiązanie dla prostych przypadkach:

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