Конвертировать параметры URL в объект JavaScript

Question

У меня есть такая строка:

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

Как я могу преобразовать его в объект JavaScript, подобный этому?

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

Answer 1

Редактировать

Это редактирование улучшает и объясняет ответ на основе комментариев.

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

Пример

Разбор abc=foo&def=%5Basf%5D&xyz=5 в пять шагов:

• decodeURI: abc = foo & def = [asf] & xyz = 5
• Кавычки Escape: те же, что и без кавычек
• Заменить &: abc=foo","def=[asf]","xyz=5
• Заменить =: abc":"foo","def":"[asf]","xyz":"5
• Окружение с локонами и цитатами: {"abc":"foo","def":"[asf]","xyz":"5"}

что является законным JSON.

Улучшенное решение позволяет вводить больше символов в строку поиска. Он использует функцию восстановления для декодирования URI:

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,"\":\"")) + '"}')

Answer 2

2018 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(...params); // {abc: "foo", def: "[asf]", xyz: "5"}

Примечание: Все значения автоматически являются строками согласно спецификации URLSearchParams

Answer 3

Разделить на &, чтобы получить пары имя / значение, затем разделить каждую пару на =.Вот пример:

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

Это адаптировано из Джона Ресига "Поиск и не замена" .

Answer 4

Это простая версия, очевидно, вы захотите добавить проверку ошибок:

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

Answer 5

Я нашел $. String.deparam наиболее полное готовое решение (может делать вложенные объекты и т. Д.).Ознакомьтесь с документацией .

Answer 6

Краткое решение:

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

Answer 7

Другое решение, основанное на новейшем стандарте URLSearchParams (https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)

function getQueryParamsObject() {
  const searchParams = new URLSearchParams(location.search.slice(1));
  return searchParams
    ? _.fromPairs(Array.from(searchParams.entries()))
    : {};
}

Обратите внимание, что в этом решении используется

Array.from (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

и _. FromPairs (https://lodash.com/docs#fromPairs) lodash ради простоты.

Должно быть легко создать более совместимое решениетак как у вас есть доступ к searchParams.entries () итератор.

Answer 8

Предлагаемые решения, которые я нашел до сих пор, не охватывают более сложные сценарии.

Мне нужно было преобразовать строку запроса, например

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

INTO:

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

Answer 9

ES6 один лайнер. Чисто и просто.

var obj = [...new URLSearchParams(location.search).entries()].reduce((sum, [key,val]) => Object.assign({[key]:val}, sum), {});

Answer 10

У меня была такая же проблема, я пробовал здесь решения, но ни один из них действительно не работал, так как у меня были массивы в параметрах URL, например:

?param[]=5&param[]=8&othr_param=abc&param[]=string

Итак, я написал свою собственную функцию JS, которая делает массив из параметра в URI:

/**
 * Creates an object from URL encoded data
 */
var createObjFromURI = function() {
    var uri = decodeURI(location.search.substr(1));
    var chunks = uri.split('&');
    var params = Object();

    for (var i=0; i < chunks.length ; i++) {
        var chunk = chunks[i].split('=');
        if(chunk[0].search("\\[\\]") !== -1) {
            if( typeof params[chunk[0]] === 'undefined' ) {
                params[chunk[0]] = [chunk[1]];

            } else {
                params[chunk[0]].push(chunk[1]);
            }


        } else {
            params[chunk[0]] = chunk[1];
        }
    }

    return params;
}