У меня есть такая строка:
abc=foo&def=%5Basf%5D&xyz=5
Как я могу преобразовать его в объект JavaScript, как это?
{
abc: 'foo',
def: '[asf]',
xyz: 5
}
У меня есть такая строка:
abc=foo&def=%5Basf%5D&xyz=5
Как я могу преобразовать его в объект JavaScript, как это?
{
abc: 'foo',
def: '[asf]',
xyz: 5
}
Ответы:
редактировать
Это изменение улучшает и объясняет ответ на основе комментариев.
пример
Разобрать
abc=foo&def=%5Basf%5D&xyz=5
в пять шагов:abc=foo","def=[asf]","xyz=5
abc":"foo","def":"[asf]","xyz":"5
{"abc":"foo","def":"[asf]","xyz":"5"}
который является законным JSON.
Улучшенное решение позволяет более символов в строке поиска. Он использует функцию reviver для декодирования URI:
пример
дает
Оригинальный ответ
Однострочник:
источник
JSON.parse('{"' + decodeURI(location.search.substring(1).replace(/&/g, "\",\"").replace(/=/g, "\":\"")) + '"}')
2020 ES6 / 7/8 и на подходе
Начиная с ES6 и далее, Javascript предлагает несколько конструкций для создания эффективного решения этой проблемы.
Это включает использование URLSearchParams и итераторов
Если ваш вариант использования требует от вас фактического преобразования его в объект, вы можете реализовать следующую функцию:
Основное Демо
Использование Object.fromEntries и распространение
Мы можем использовать Object.fromEntries (который в настоящее время находится на стадии 4), заменив
paramsToObject
наObject.fromEntries(entries)
.Так как
URLParams
возвращает итеративный объект, использование оператора распространения вместо вызова.entries
также приведет к появлению записей согласно его спецификации:Примечание. Все значения автоматически являются строками согласно спецификации URLSearchParams.
Несколько одинаковых клавиш
Как @siipe отметил, строки , содержащие несколько же, ключевые значения будут принуждены к последней доступной стоимости:
foo=first_value&foo=second_value
будет по сути стать:{foo: "second_value"}
.Согласно этому ответу: https://stackoverflow.com/a/1746566/1194694 нет спецификации для решения, что с ним делать, и каждый фреймворк может вести себя по-своему.
Распространенным вариантом использования будет объединение двух одинаковых значений в массив, превращая выходной объект в:
Это может быть достигнуто с помощью следующего кода:
источник
search string
парсер - именно для этого он и предназначен, независимо от того, связан ли он с URL-адресомObject.fromEntries
не работает для повторных ключей. Если мы попытаемся сделать что-то подобное?foo=bar1&foo=bar2
, мы получим только{ foo: 'bar2' }
. Например, объект запроса Node.js анализирует его как{ foo: ['bar1', 'bar2'] }
let temp={};Object.keys(params).map(key=>{temp[key]=urlParams.getAll(key)})
ES6 один лайнер. Чисто и просто.
Для вашего конкретного случая это будет:
источник
?someValue=false
становится{ someValue: "false" }
?foo=bar1&foo=bar2
, мы получим только{ foo: 'bar2' }
. Объект запроса Node.js анализирует его как{ foo: ['bar1', 'bar2'] }
location.search
Разделить,
&
чтобы получить пары имя / значение, а затем разделить каждую пару=
. Вот пример:Другой подход, использующий регулярные выражения:
Это адаптировано из Джона Ресига "Ищите и не заменяйте" .
источник
Краткое решение:
источник
Предложенные мной решения пока не охватывают более сложные сценарии.
Мне нужно было преобразовать строку запроса, как
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
в объект, как:
ИЛИ:
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
В:
Я собрал и адаптировал несколько решений в одно, которое действительно работает:
КОД:
источник
obj=encodeURIComponent(JSON.stringify({what:{ever:','},i:['like']}))
.Это простая версия, очевидно, вы захотите добавить проверку ошибок:
источник
JSON.parse('{"' + decodeURIComponent(query.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}'));
у меня работаетname[]=test1&name[]=test2
и это приведет кname[]=test2
Я нашел $ .String.deparam наиболее полное готовое решение (может делать вложенные объекты и т. Д.). Ознакомьтесь с документацией .
источник
Однострочный подход 2019 года
Для вашего конкретного случая:
Для более общего случая, когда кто-то хочет проанализировать параметры запроса к объекту:
Если вы не можете использовать Object.fromEntries, это также будет работать:
источник
[...new URLSearchParams(window.location.search)].reduce((o, i) => ({ ...o, [i[0]]: i[1] }), {});
Другое решение, основанное на новейшем стандарте URLSearchParams ( https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams )
Обратите внимание, что это решение использует
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 () .
источник
У меня была та же проблема, я попробовал решения здесь, но ни один из них действительно не работал, так как у меня были массивы в параметрах URL, например:
В итоге я написал свою собственную функцию JS, которая делает массив из параметра в URI:
источник
if(chunk[0].search("\\[\\]") !== -1) {
этогоchunk[0]=chunk[0].replace(/\[\]$/,'');
const
вместо того,var
потому что кто-то может сделать,createObjFromURI = 'some text'
и тогда они испортят код. если вы используете,const
то кто-то, работающийcreateObjFromURI = 'some text'
с ошибкой, не может присвоить значение постоянной переменной.Использование ES6, API URL и URLSearchParams API.
источник
ES6 один лайнер (если мы можем назвать это так, видя длинную линию)
[...new URLSearchParams(location.search).entries()].reduce((prev, [key,val]) => {prev[key] = val; return prev}, {})
источник
cur
для некоторой дополнительной ясности..reduce((prev, [key, val]) => {prev[key] = val})
Для Node JS вы можете использовать Node JS API
querystring
:Документация: https://nodejs.org/api/querystring.html
источник
Довольно легко с помощью
URLSearchParams
веб-API JavaScript,Полезные ссылки
источник
Нет родного решения, о котором я знаю. В Dojo есть встроенный метод десериализации, если вы используете эту платформу случайно.
В противном случае вы можете реализовать это самостоятельно довольно просто:
редактировать: добавлен decodeURIComponent ()
источник
Есть легкая библиотека YouAreI.js, которая протестирована и делает это действительно простым.
источник
Один из самых простых способов сделать это с помощью интерфейса URLSearchParam.
Ниже приведен фрагмент рабочего кода:
источник
Это кажется лучшим решением, так как учитывает несколько параметров с одинаковым именем.
Позже я решил преобразовать его в плагин JQuery тоже ...
Теперь первый будет принимать только параметры, а плагин jQuery будет принимать весь URL и возвращать сериализованные параметры.
источник
Вот тот, который я использую:
Основное использование, например.
?a=aa&b=bb
Object {a: "aa", b: "bb"}
Дублирующиеся параметры, например.
?a=aa&b=bb&c=cc&c=potato
Object {a: "aa", b: "bb", c: ["cc","potato"]}
Недостающие ключи, например.
?a=aa&b=bb&=cc
Object {a: "aa", b: "bb"}
Отсутствующие значения, например
?a=aa&b=bb&c
Object {a: "aa", b: "bb"}
Приведенные выше решения JSON / regex генерируют синтаксическую ошибку в этом дурацком URL:
?a=aa&b=bb&c=&=dd&e
Object {a: "aa", b: "bb", c: ""}
источник
Вот моя быстрая и грязная версия, в основном это разделение параметров URL, разделенных символом «&», на элементы массива, а затем итерация по этому массиву с добавлением пар ключ / значение, разделенных символом «=», в объект. Я использую decodeURIComponent () для перевода закодированных символов в их обычные строковые эквиваленты (таким образом,% 20 становится пробелом,% 26 становится '&' и т. Д.):
пример:
возвращается
Единственная проблема заключается в том, что xyz является строкой, а не числом (из-за использования decodeURIComponent ()), но помимо этого это неплохая отправная точка.
источник
источник
Babel
помощью вы можете сделать это хорошо в другой средеИспользование phpjs
источник
Основываясь на ответе Майка Каузера, я создал эту функцию, которая учитывает несколько параметров с одним и тем же ключом (
foo=bar&foo=baz
), а также разделенные запятыми параметры (foo=bar,baz,bin
). Это также позволяет вам искать определенный ключ запроса.Пример ввода:
foo.html?foo=bar&foo=baz&foo=bez,boz,buz&bar=1,2,3
Пример вывода
источник
Если вы используете URI.js, вы можете использовать:
https://medialize.github.io/URI.js/docs.html#static-parseQuery
источник
источник
Сначала вам нужно определить, что такое VAR:
Чем только что прочитал:
и использовать как:
источник
Мне нужно было также разобраться
+
в части запроса URL-адреса ( decodeURIComponent нет ), поэтому я адаптировал код Вольфганга так:В моем случае я использую jQuery для получения параметров формы, готовых к URL, а затем с помощью этого трюка создаю из него объект, а затем я могу легко обновить параметры объекта и перестроить URL запроса, например:
источник
Я делаю это таким образом:
источник
Если вам нужна рекурсия, вы можете использовать крошечную библиотеку js-extension-ling .
Это выведет что-то вроде этого:
Примечание: он основан на функции locutus parse_str ( https://locutus.io/php/strings/parse_str/ ).
источник