Возврат значений параметров URL с использованием регулярного выражения в Javascript

Question

Пока я искал способ вернуть значения параметров url, я наткнулся на этот фрагмент кода.

Ссылка: https://html -online.com / article / get-url-parameters-javascript /

function getUrlParts(href) {
    var partsSet = {};
    var parts = href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(a,key,value) {
        partsSet[key] = value;
    });
    return partsSet;
}

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

Answer 1

follows Ответ на ваш вопрос следует, но, пожалуйста, обратите внимание, что в 2019 году вы, вероятно, не должны использовать этот код. Смотрите конец моего ответа для лучшего решения. 100

Regexper демонстрирует, чему будет соответствовать это регулярное выражение:

InНа английском языке вы можете прочитать это как:

1. Один или несколько ? или & символов, за которыми следует
2. группа # 1: один или несколько символов, которые не = или &, затем
3. и =, затем
4. группа № 2: ноль или более символов, которые не &

Группа № 1 фиксирует имена параметров, а группа № 2 фиксирует их значения.

Что касается функции обратного вызова (function(a,key,value) { ...), переданной в replace, давайте спросим MDN:

Вы можете указать функцию в качестве второго параметра. В этом случае функция будет вызвана после того, как будет выполнено совпадение. Результат функции (возвращаемое значение) будет использоваться в качестве строки замены. … Обратите внимание, что функция будет вызываться несколько раз для замены каждого полного совпадения, если регулярное выражение в первом параметре является глобальным.

Аргументы функции следующие:

• match - соответствующая подстрока.
• p1, p2, ... - n -ая строка, найденная группой захвата в скобках, при условиипервый аргумент replace() был объектом RegExp.
• …

(Источник: MDN: String.prototype.replace - указание функции в качестве параметра )

(остальные опущены, поскольку они не относятся к нашему вопросу).

Это говорит нам о том, что функция вызывается для каждого совпадения, т.е. каждая пара имя-значение параметра в строке, и что второй аргумент (p1 или key в вашем коде) содержит строку, захваченную группой # 1, а третий аргумент (p2 / value) содержитстрока, захваченная группой # 2.

Код, который вы нашли, действительно использует replace для егопобочный эффект: Это действительно простой способ перебрать все совпадения в строке.

---

Лучший способ

Как отмечено в сообщении в блоге, на которое вы ссылались, если выДля таргетинга на текущие браузеры вместо анализа строки запроса вручную следует использовать URLSearchParams , предназначенный именно для этой цели:

const query = '?foo=1&bar=2';

const searchParams = new URLSearchParams(query);

// Get a specific param
const foo = searchParams.get('foo');
console.log('got foo:', foo);

// Iterate over all params
searchParams.forEach((val, key) => console.log(key, 'is', val));

URLSearchParams работает в во всех современных браузерах , включая MS Edge ≥ 17 (но не IE). Также существуют полифилы для старых браузеров.