Конвертировать параметры URL в объект JavaScript - PullRequest
Новая
       81

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

164 голосов
/ 28 декабря 2011

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

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

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

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

Ответы [ 26 ]

1 голос
/ 27 апреля 2017

Вот моя быстрая и грязная версия, в основном это разделение параметров URL, разделенных символом «&», на элементы массива, а затем итерация по этому массиву с добавлением пар ключ / значение, разделенных символом «=», в объект. Я использую decodeURIComponent () для перевода закодированных символов в их обычные строковые эквиваленты (таким образом,% 20 становится пробелом,% 26 становится '&' и т. Д.): 

function deparam(paramStr) {
    let paramArr = paramStr.split('&');     
    let paramObj = {};
    paramArr.forEach(e=>{
        let param = e.split('=');
        paramObj[param[0]] = decodeURIComponent(param[1]);
    });
    return paramObj;
}

пример: 

deparam('abc=foo&def=%5Basf%5D&xyz=5')

возвращает 

{
    abc: "foo"
    def:"[asf]"
    xyz :"5"
}

Единственная проблема заключается в том, что xyz является строкой, а не числом (из-за использования decodeURIComponent ()), но помимо этого это неплохая отправная точка.

1 голос
/ 08 февраля 2019

Для узла вы можете использовать следующее: 

const querystring = require('querystring');

querystring.parse('abc=foo&def=%5Basf%5D&xyz=5&foo=b%3Dar');
// returns the object

Документация: https://nodejs.org/api/querystring.html

1 голос
/ 28 декабря 2018

Если вы используете URI.js, вы можете использовать:

https://medialize.github.io/URI.js/docs.html#static-parseQuery

var result = URI.parseQuery("?foo=bar&hello=world&hello=mars&bam=&yup");
result === {
  foo: "bar",
  hello: ["world", "mars"],
  bam: "",
  yup: null
};
0 голосов
/ 13 ноября 2012

ПЕРВЫЙ, ТЫ ДОЛЖЕН ОПРЕДЕЛИТЬ, ЧТО ТАКОЕ ПОЛУЧИТЬ ВАР: 

function getVar()
{
    this.length = 0;
    this.keys = [];
    this.push = function(key, value)
    {
        if(key=="") key = this.length++;
        this[key] = value;
        this.keys.push(key);
        return this[key];
    }
}

Чем только что прочитал: 

function urlElement()
{
    var thisPrototype = window.location;
    for(var prototypeI in thisPrototype) this[prototypeI] = thisPrototype[prototypeI];
    this.Variables = new getVar();
    if(!this.search) return this;
    var variables = this.search.replace(/\?/g,'').split('&');
    for(var varI=0; varI<variables.length; varI++)
    {
        var nameval = variables[varI].split('=');
        var name = nameval[0].replace(/\]/g,'').split('[');
        var pVariable = this.Variables;
        for(var nameI=0;nameI<name.length;nameI++)
        {
            if(name.length-1==nameI) pVariable.push(name[nameI],nameval[1]);
            else var pVariable = (typeof pVariable[name[nameI]] != 'object')? pVariable.push(name[nameI],new getVar()) : pVariable[name[nameI]];
        }
    }
}

и используйте как: 

var mlocation = new urlElement();
mlocation = mlocation.Variables;
for(var key=0;key<mlocation.keys.length;key++)
{
    console.log(key);
    console.log(mlocation[mlocation.keys[key]];
}
0 голосов
/ 25 октября 2016

Мне также нужно было иметь дело с + в части запроса URL ( decodeURIComponent не ), поэтому я адаптировал код Вольфганга, чтобы он стал: 

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

InВ моем случае я использую jQuery для получения параметров формы, готовых к URL, а затем этот трюк для создания объекта из него, а затем я могу легко обновить параметры объекта и перестроить URL запроса, например: 

var objForm = JSON.parse('{"' + $myForm.serialize().replace(/\+/g, ' ').replace(/&/g, '","').replace(/=/g,'":"') + '"}',
             function(key, value) { return key===""?value:decodeURIComponent(value)});
objForm.anyParam += stringToAddToTheParam;
var serializedForm = $.param(objForm);
0 голосов
/ 27 ноября 2017

Построение поверх Ответ Майка Каузера Я сделал эту функцию, которая учитывает несколько параметров с одним и тем же ключом (foo=bar&foo=baz), а также разделенные запятыми параметры (foo=bar,baz,bin).Он также позволяет искать определенный ключ запроса. 

function getQueryParams(queryKey) {
    var queryString = window.location.search;
    var query = {};
    var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split('=');
        var key = decodeURIComponent(pair[0]);
        var value = decodeURIComponent(pair[1] || '');
        // Se possui uma vírgula no valor, converter em um array
        value = (value.indexOf(',') === -1 ? value : value.split(','));

        // Se a key já existe, tratar ela como um array
        if (query[key]) {
            if (query[key].constructor === Array) {
                // Array.concat() faz merge se o valor inserido for um array
                query[key] = query[key].concat(value);
            } else {
                // Se não for um array, criar um array contendo o valor anterior e o novo valor
                query[key] = [query[key], value];
            }
        } else {
            query[key] = value;
        }
    }

    if (typeof queryKey === 'undefined') {
        return query;
    } else {
        return query[queryKey];
    }
}

Пример ввода: foo.html?foo=bar&foo=baz&foo=bez,boz,buz&bar=1,2,3

Пример вывода 

{
    foo: ["bar","baz","bez","boz","buz"],
    bar: ["1","2","3"]
}
Страница:
...