Разбор строки запроса URL-адреса в массив

Я хочу создать функцию, которая анализирует строку запроса URL-адреса (параметры и значения) из текущего URL-адреса (например, document.location) и сохраняет каждую пару значений ключа (параметр = значение) как отдельный элемент в массиве.

Так, например, если URL-адрес: http://example.com?product=shoes&price=59.99&color=red

Затем возвращается: параметры = ["продукт = обувь", "цена = 59,99", "цвет = красный"];

Какие-либо предложения?

Спасибо,

Вам действительно нужны строки типа «name = value» в вашем массиве? Или вам нужны фактические значения объектов, на которые можно ссылаться?

Kevin Boucher 27.04.2018 19:47
location.href.split('?')[1].split('&')
jcubic 27.04.2018 19:47

Просто строки, но я хочу, чтобы у массива было имя, на которое можно ссылаться. Также я хочу, чтобы у функции было имя.

cap 27.04.2018 20:00

Если вы используете location.href, вы можете использовать вместо него location.search.slice(1).split('&').

Stephen P 27.04.2018 20:00
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
1 351
2

Ответы 2

Вы можете использовать методы .slice() и .split() String:

let str = 'http://example.com?product=shoes&price=59.99&color=red';

let parser = url => url.slice(url.indexOf('?') + 1).split('&');
               
console.info(parser(str));

Вы также можете создать объект с парами ключ / значение, используя .reduce():

let str = 'http://example.com?product=shoes&price=59.99&color=red';

let parser = url => url.slice(url.indexOf('?') + 1)
                       .split('&')
                       .reduce((a, c) => {
                         let [key, value] = c.split('=');
                         a[key] = value;
                         return a;
                       }, {});

console.info(parser(str));

Документы:

  • String.prototype.slice()
  • String.prototype.indexOf()
  • String.prototype.split()
  • Array.prototype.reduce()

Спасибо, это здорово. Но как мне дать имя функции и массиву?

cap 27.04.2018 19:59

Это проблематично для URL с идентификатором фрагмента #.

Evert 27.04.2018 20:05

@Evert Да, вы правы, но мой ответ относится к формату, упомянутому OP.

Mohammad Usman 27.04.2018 20:07

В зависимости от требований вашего браузера вы можете использовать объект URLSearchParams:

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

var params = new URLSearchParams(location.search);

Или, если вам нужно сделать это вручную, вы можете разделить строку location.search:

var qs = location.search.replace('?', '');  // get querystring and remove question marks
var pairs = qs.split('&');                  // split on ampersand
var items = {};                             // declare object to store key/value pairs

// Loop through pairs and extract the key and the value (and append them to the object)
for (var i = 0; i < pairs.length; i++) {
    items[pairs[i].split('=')[0]] = pairs[i].split('=')[1];
}

console.info(items);

Другие вопросы по теме