Window.location.search запрос как JSON
Есть ли лучший способ конвертировать URL location.search как объект? Может быть, просто более эффективно или урезано? Я использую jQuery, но чистая JS тоже может работать.
var query = window.location.search.substring(1), queryPairs = query.split('&'), queryJSON = {};
$.each(queryPairs, function() { queryJSON[this.split('=')[0]] = this.split('=')[1]; });
Ответы
Ответ 1
Здесь - чистая JS-функция. Проводит поисковую часть текущего URL-адреса и возвращает объект. (Это немного подробный для читаемости, ум.)
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;
}
В соответствующей заметке вы не пытаетесь сохранить одиночные параметры в "JSON", а в "объекте".;)
Ответ 2
Если вы используете современный браузер, это дает тот же результат, что и принятый ответ:
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;
}, {})
}
Ответ 3
Вероятно, самое короткое решение для простых случаев:
location.search
.slice(1)
.split('&')
.map(p => p.split('='))
.reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});
Ответ 4
Мой подход, простой и чистый
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 ) );
Ответ 5
Просто хотел поделиться этим решением, используя немного ESNext и редуктор.
Это в значительной степени то же самое, что было предложено компанией @Carlo, но немного чище, если вам нравится ES6 и редукторы.
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);
Ответ 6
Основываясь на работе @rafaelbiten ES6, я добавил поддержку параметров, у которых нет значений и массивов параметров запроса в стиле дублирующихся записей.
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);
Ответ 7
JSON Parse after stringify выполняет преобразование в json с данными массива.
?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();
Ответ 8
Примечание. Не сомневайтесь, что решение работает, но оно не будет охватывать все операторы
Угадайте, что вы хотели бы что-то вроде этого -
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 -
Переопределить поиск @1-я строка с помощью
search = "abc=foo&def=%5Basf%5D&xyz=5&foo=b%3Dar";
Вы получите
Object {abc: "foo", def: "[asf]", xyz: "5", foo: "b=ar"}
Ответ 9
Если кто-то ищет только доступ к параметрам поискового запроса, используйте эту функцию:
function getQueryStringValue (key)
{
return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"))
}
Легко использовать, просто вызовите getQueryStringValue(term)
Ответ 10
Также обратите внимание, что есть API для запроса/управления параметрами поиска с помощью: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
var params = new URLSearchParams(window.location.search)
for (let p of params) {
console.log(p);
}