[javascript] URL 매개 변수를 JavaScript 객체로 변환하는 방법

JAVASCRIPT / 글쓴이

다음과 같은 문자열이 있습니다.

abc=foo&def=%5Basf%5D&xyz=5

이와 같은 JavaScript 객체로 변환하려면 어떻게해야합니까?

{
  abc: 'foo',
  def: '[asf]',
  xyz: 5
}

답변

편집하다

이 편집은 주석을 기반으로 답변을 개선하고 설명합니다.

var search = location.search.substring(1);
JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}')

예

abc=foo&def=%5Basf%5D&xyz=55 단계로 구문 분석 하십시오.

  • decodeURI : abc = foo & def = [asf] & xyz = 5
  • 따옴표 탈출 : 따옴표가 없으므로 동일
  • 대체 : abc=foo","def=[asf]","xyz=5
  • 교체 = : abc":"foo","def":"[asf]","xyz":"5
  • curlies와 따옴표가있는 서라운드 : {"abc":"foo","def":"[asf]","xyz":"5"}

이것은 합법적 인 JSON입니다.

개선 솔루션은 검색 문자열에서 더 많은 문자 수 있습니다. URI 디코딩에 reviver 함수를 사용합니다.

var search = location.search.substring(1);
JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, value) { return key===""?value:decodeURIComponent(value) })

예 

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

준다

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

원래 답변

원 라이너 :

JSON.parse('{"' + decodeURI("abc=foo&def=%5Basf%5D&xyz=5".replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}')

답변

2020 ES6 / 7 / 8 및 접근

ES6 이상부터 Javascript는이 문제에 대한 성능 솔루션을 만들기 위해 여러 가지 구성을 제공합니다.

여기에는 URLSearchParams 및 반복자 사용이 포함됩니다.

let params = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
params.get("abc"); // "foo"

사용 사례에서 실제로 객체로 변환해야하는 경우 다음 기능을 구현할 수 있습니다.

function paramsToObject(entries) {
  let result = {}
  for(let entry of entries) { // each 'entry' is a [key, value] tupple
    const [key, value] = entry;
    result[key] = value;
  }
  return result;
}

기본 데모

const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
const entries = urlParams.entries(); //returns an iterator of decoded [key,value] tuples
const params = paramsToObject(entries); //{abc:"foo",def:"[asf]",xyz:"5"}

Object.fromEntries 및 스프레드 사용

우리는 사용할 수 Object.fromEntries를 대체 (4 단계에서 현재 인) paramsToObject와 함께 Object.fromEntries(entries).

반복 할 값 쌍은 키가 이름이고 값이 값인 목록 이름-값 쌍입니다.

는 호출하는 대신 스프레드 연산자 를 사용하여 반복 가능한 객체를 URLParams반환 하므로 스펙마다 항목을 생성합니다..entries

const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
const params = Object.fromEntries(urlParams); // {abc: "foo", def: "[asf]", xyz: "5"}

참고 : 모든 값은 URLSearchParams 사양에 따라 자동으로 문자열입니다

여러 개의 동일한 키

으로 @siipe는 지적, 여러 개의 동일한 키 값이 포함 된 문자열은 사용 가능한 마지막 값으로 강제됩니다 foo=first_value&foo=second_value본질적으로 될 것이다 {foo: "second_value"}.

이 답변에 따라 https://stackoverflow.com/a/1746566/1194694 그것으로 무엇을 해야할지 결정하는 데 대한 사양이 없으며 각 프레임 워크가 다르게 작동 할 수 있습니다.

일반적인 사용 사례는 두 개의 동일한 값을 배열로 결합하여 출력 객체를 다음과 같이 만드는 것입니다. 

{foo: ["first_value", "second_value"]}

다음 코드를 사용하면됩니다.

const groupParamsByKey = (params) => [...params.entries()].reduce((acc, tuple) => {
 // getting the key and value from each tuple
 const [key, val] = tuple;
 if(acc.hasOwnProperty(key)) {
    // if the current key is already an array, we'll add the value to it
    if(Array.isArray(acc[key])) {
      acc[key] = [...acc[key], val]
    } else {
      // if it's not an array, but contains a value, we'll convert it into an array
      // and add the current value to it
      acc[key] = [acc[key], val];
    }
 } else {
  // plain assignment if no special case is present
  acc[key] = val;
 }

return acc;
}, {});

const params = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5&def=dude');
const output = groupParamsByKey(params) // {abc: "foo", def: ["[asf]", "dude"], xyz: 5}

답변

ES6 하나의 라이너. 깨끗하고 간단합니다.

Object.fromEntries(new URLSearchParams(location.search));

구체적인 경우에는 다음과 같습니다.

console.log(
  Object.fromEntries(new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5'))
);

스 니펫 확장

답변

에서 &이름 / 값 쌍을 얻으려면을 분할 한 다음에 각 쌍을 분할하십시오 =. 예를 들면 다음과 같습니다.

var str = "abc=foo&def=%5Basf%5D&xy%5Bz=5"
var obj = str.split("&").reduce(function(prev, curr, i, arr) {
    var p = curr.split("=");
    prev[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
    return prev;
}, {});

정규 표현식을 사용하는 또 다른 접근법 :

var obj = {}; 
str.replace(/([^=&]+)=([^&]*)/g, function(m, key, value) {
    obj[decodeURIComponent(key)] = decodeURIComponent(value);
});

이것은 John Resig의 “Search and Do n’t Replace”에서 수정되었습니다 .

답변

간결한 솔루션 :

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

답변

지금까지 찾은 제안 된 솔루션은 더 복잡한 시나리오를 다루지 않습니다.

쿼리 문자열을 다음과 같이 변환해야했습니다.

https://random.url.com?Target=Offer&Method=findAll&filters%5Bhas_goals_enabled%5D%5BTRUE%5D=1&filters%5Bstatus%5D=active&fields%5B%5D=id&fields%5B%5D=name&fields%5B%5D=default_goal_name

다음과 같은 객체로 : 

{
    "Target": "Offer",
    "Method": "findAll",
    "fields": [
        "id",
        "name",
        "default_goal_name"
    ],
    "filters": {
        "has_goals_enabled": {
            "TRUE": "1"
        },
        "status": "active"
    }
}

또는:

https://random.url.com?Target=Report&Method=getStats&fields%5B%5D=Offer.name&fields%5B%5D=Advertiser.company&fields%5B%5D=Stat.clicks&fields%5B%5D=Stat.conversions&fields%5B%5D=Stat.cpa&fields%5B%5D=Stat.payout&fields%5B%5D=Stat.date&fields%5B%5D=Stat.offer_id&fields%5B%5D=Affiliate.company&groups%5B%5D=Stat.offer_id&groups%5B%5D=Stat.date&filters%5BStat.affiliate_id%5D%5Bconditional%5D=EQUAL_TO&filters%5BStat.affiliate_id%5D%5Bvalues%5D=1831&limit=9999

으로: 

{
    "Target": "Report",
    "Method": "getStats",
    "fields": [
        "Offer.name",
        "Advertiser.company",
        "Stat.clicks",
        "Stat.conversions",
        "Stat.cpa",
        "Stat.payout",
        "Stat.date",
        "Stat.offer_id",
        "Affiliate.company"
    ],
    "groups": [
        "Stat.offer_id",
        "Stat.date"
    ],
    "limit": "9999",
    "filters": {
        "Stat.affiliate_id": {
            "conditional": "EQUAL_TO",
            "values": "1831"
        }
    }
}

실제로 여러 솔루션을 컴파일하여 실제로 작동하는 솔루션으로 수정했습니다.

암호:

var getParamsAsObject = function (query) {

    query = query.substring(query.indexOf('?') + 1);

    var re = /([^&=]+)=?([^&]*)/g;
    var decodeRE = /\+/g;

    var decode = function (str) {
        return decodeURIComponent(str.replace(decodeRE, " "));
    };

    var params = {}, e;
    while (e = re.exec(query)) {
        var k = decode(e[1]), v = decode(e[2]);
        if (k.substring(k.length - 2) === '[]') {
            k = k.substring(0, k.length - 2);
            (params[k] || (params[k] = [])).push(v);
        }
        else params[k] = v;
    }

    var assign = function (obj, keyPath, value) {
        var lastKeyIndex = keyPath.length - 1;
        for (var i = 0; i < lastKeyIndex; ++i) {
            var key = keyPath[i];
            if (!(key in obj))
                obj[key] = {}
            obj = obj[key];
        }
        obj[keyPath[lastKeyIndex]] = value;
    }

    for (var prop in params) {
        var structure = prop.split('[');
        if (structure.length > 1) {
            var levels = [];
            structure.forEach(function (item, i) {
                var key = item.replace(/[?[\]\\ ]/g, '');
                levels.push(key);
            });
            assign(params, levels, params[prop]);
            delete(params[prop]);
        }
    }
    return params;
};

답변

이것은 간단한 버전이므로 분명히 오류 검사를 추가하고 싶을 것입니다.

var obj = {};
var pairs = queryString.split('&');
for(i in pairs){
    var split = pairs[i].split('=');
    obj[decodeURIComponent(split[0])] = decodeURIComponent(split[1]);
}