Как получить значение из параметров GET?


1329

У меня есть URL с некоторыми параметрами GET следующим образом:

www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 

Мне нужно получить всю стоимость c. Я пытался прочитать URL, но я получил только m2. Как мне сделать это с помощью JavaScript?


Прежде чем опубликовать новый ответ, учтите, что на этот вопрос уже есть более 50 ответов. Пожалуйста, убедитесь, что ваш ответ содержит информацию, которой нет среди существующих ответов.
— Янник

Ответы:


2004

В самом JavaScript нет ничего встроенного для обработки параметров строки запроса.

Код, работающий в (современном) браузере, вы можете использовать URLобъект (который является частью API, предоставляемого браузерами для JS):

var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);


Для более старых браузеров (включая Internet Explorer) вы можете использовать этот polyfill или код из оригинальной версии этого ответа, предшествующего URL:

Вы можете получить доступ location.search, который даст вам от ?символа до конца URL-адреса или начала идентификатора фрагмента (#foo), в зависимости от того, что произойдет раньше.

Тогда вы можете разобрать это с этим:

function parse_query_string(query) {
  var vars = query.split("&");
  var query_string = {};
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var key = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);
    // If first entry with this name
    if (typeof query_string[key] === "undefined") {
      query_string[key] = decodeURIComponent(value);
      // If second entry with this name
    } else if (typeof query_string[key] === "string") {
      var arr = [query_string[key], decodeURIComponent(value)];
      query_string[key] = arr;
      // If third or later entry with this name
    } else {
      query_string[key].push(decodeURIComponent(value));
    }
  }
  return query_string;
}

var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);

Вы можете получить строку запроса из URL текущей страницы с помощью:

var query = window.location.search.substring(1);
var qs = parse_query_string(query);

Для более старых браузеров вам может понадобиться полифилл дляURL в дополнение к тому, для которого URLSearchParams. Или вы можете избежать этой проблемы, заменив строку var c = url.searchParams.get("c");в ответе выше на var c = new URLSearchParams(window.location.search).get("c");.
— evanrmurphy

parse_query_string завершится с ошибкой для значений, которые содержат '=', как при передаче значения в кодировке base64 в качестве значения. Версия, использующая регулярное выражение ниже, работает лучше.
— Манель Кло

7
@ Jamland - Абсолютно не делай этого. Это сломает вещи. Вот живая демонстрация, которая new URL() ожидает получить правильно закодированный URL в качестве аргумента. decodeURIComponentожидает, что будет передан компонент URL, а не весь URL.
— Квентин

@Quentin Я проверил различные специальные символы и вижу, что вы правы. decodeURIComponentне должен использоваться в этом случае
— Jamland

1
parse_query_stringФункция делает двойное декодирование value. Указанный =@ManelClos выдаваемый адрес можно исправить, добавив второй параметр 2( limit) в vars[i].split().
— Джейк

242

Большинство реализаций, которые я видел, пропускают URL-декодирование имен и значений.

Вот общая полезная функция, которая также выполняет правильное декодирование URL:

function getQueryParams(qs) {
    qs = qs.split('+').join(' ');

    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }

    return params;
}

//var query = getQueryParams(document.location.search);
//alert(query.foo);

3
Этот код не работает. Это создает бесконечный цикл, потому что регулярное выражение скомпилировано в определении цикла, которое сбрасывает текущий индекс. Это работает правильно, если вы поместите регулярное выражение в переменную вне цикла.
— Максавкинс

2
@maxhawkins: в некоторых браузерах это работает, а в других - бесконечный цикл. Вы наполовину правы в этом отношении. Я исправлю код, чтобы быть кросс-браузерным. Спасибо что подметил это!
— Атес Горал

3
@ZiTAL Эта функция должна использоваться с частью запроса в URL, а не со всем URL. Смотрите закомментированный пример использования ниже.
— Атес Горал

1
@ Харви Нечувствительность к регистру не относится к параметрам запроса. Это звучит как специфичная для приложения вещь, которую следует применять вместе или в дополнение к извлечению параметров запроса.
— Атес Горал

7
Почему qs.split('+').join(' ');и нет qs.replace(/\+/g, ' ');?
— FlameStorm

234

источник

function gup( name, url ) {
    if (!url) url = location.href;
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( url );
    return results == null ? null : results[1];
}
gup('q', 'hxxp://example.com/?q=abc')

8
Мне больше нравится эта опция, но я предпочитаю возвращать ноль или результат, но не пустую строку.
— Джейсон Трэшер

1
Похоже, у вас есть несколько дополнительных символов. "\\[" должно быть "\[". Поскольку это обычные строки, [и] не нужно экранировать.
— EricP

Это не чувствительно к регистру. Где бы я добавил «я», чтобы сделать его без учета регистра?
— Зета

alert (gup ('UserID', window.location.href));
— Арун Прасад ES

6
@mottie мертвая ссылка
— invot

202

Это простой способ проверить только один параметр:

Пример URL:

    http://myserver/action?myParam=2

Пример Javascript:

    var myParam = location.search.split('myParam=')[1]

если в URL существует «myParam» ... переменная myParam будет содержать «2», в противном случае она будет неопределенной.

Может быть, вы хотите значение по умолчанию, в этом случае:

    var myParam = location.search.split('myParam=')[1] ? location.search.split('myParam=')[1] : 'myDefaultValue';

Обновление: это работает лучше:

    var url = "http://www.example.com/index.php?myParam=384&login=admin"; // or window.location.href for current url
    var captured = /myParam=([^&]+)/.exec(url)[1]; // Value is in [1] ('384' in our case)
    var result = captured ? captured : 'myDefaultValue';

И это работает правильно, даже если URL полон параметров.


36
Это работает, только если параметр, который вы захватываете, является последним в URL, от которого вы не должны зависеть (даже если вы ожидаете только один параметр). например http://myserver/action?myParam=2&anotherParam=3, даст не "2"но "2&anotherParam=3".
— Ледники

39
(location.search.split('myParam=')[1]||'').split('&')[0]- использовать с несколькими параметрами или, возможно, отсутствует myParam .
— Габор Имре

илиlocation.search.split('myParam=').splice(1).join('').split('&')[0]
— J.Steve

1
Вы можете получить больше точности и разрешить любой порядок параметров, добавив, [?|&]как в[?|&]myParam=([^&]+)
— 1.21 гигаватт

1
Возможно, вам потребуется расшифровать значениеresult = decodeURIComponent(result);
— 1.21 гигаватт

126

Поставщики браузеров реализовали собственный способ сделать это через URL и URLSearchParams.

let url = new URL('http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5');
let searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('c'));  // outputs "m2-m3-m4-m5"

В настоящее время поддерживается в Firefox, Opera, Safari, Chrome и Edge. Список поддержки браузеров смотрите здесь .

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

https://url.spec.whatwg.org/

Эрик Бидельман, инженер из Google, рекомендует использовать это заполнение для неподдерживаемых браузеров.


Согласно ссылкам MDN, Safari поддерживает URL, но не URLSearchParams.
— Марк Томсон

3
@ Маркувер Разве полифилл не позаботится об этом? Кстати, Safari - это современное IE6
— Csaba Toth

Почему new URLSearchParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5").get('a')возвращается nullза мной? (На Chrome стабильно). bи, cкажется, работает хорошо.
— ripper234

Обновленный ответ. В моем исходном ответе неправильно использовался URLSearchParams, поскольку он предназначен только для работы с частью строки запроса в URL.
— cgatian

1
Используйте url.searchParamsвместо этого new URLSearchParams(url.search).
— Кайо Тарифа

86

Я нашел это очень давно:

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,    
    function(m,key,value) {
      vars[key] = value;
    });
    return vars;
  }

Тогда назовите это так:

var fType = getUrlVars()["type"];

7
+1 отличное решение - элегантные, эффективные и интеллектуальные условия использования. Для моих целей лучше, чем другое принятое решение
— Элементаль

короткий + простой + мощный = отличный
— mzy

1
Очень хорошо, он также работает с использованием location.search вместо window.location.href
— Фабио С.

1
@pdxbmw Это бесполезно и должно быть удалено. На первый взгляд код может показаться умным, но не очень хорошо продуман. Улучшения: используйте decodeURIComponent()на значении, потому что это то, с чем вы обычно хотите работать; используйте window.location.searchвместо window.location.href, потому что вас интересуют только параметры, а не весь URL.
— Лейф

2
Предложение @Leif сработало отлично. Я получал идентификатор 142 #, потому что в конце URL был #, сгенерированный при нажатии кнопки. Оставив функцию, как этоvar vars = {}; window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars;
— Андрес Рамос

77

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

var params = {};

if (location.search) {
    var parts = location.search.substring(1).split('&');

    for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=');
        if (!nv[0]) continue;
        params[nv[0]] = nv[1] || true;
    }
}

// Now you can get the parameters you want like so:
var abc = params.abc;

3
Как насчет URL-декодирования имен и значений параметров?
— Атес Горал

Этот подход не обрабатывает массивы. Например, ?array[]=1&array[]=2производит {"array[]": "2"}, что явно неправильно.
— Кафосо

@ Kafoso Здесь нет ясного правильного или неправильного. Прежде всего, повторяющиеся поля с одинаковыми именами не имеют определенного стандартного поведения и должны обрабатываться анализатором. Кроме того, []шаблон имеет значение только в некоторых случаях (например, PHP), но не в других. Так что не «явно неправильно» - просто не реализовано для обработки нестандартного случая, который вам может понадобиться, а может и нет.
— Блист

38

Я написал более простое и элегантное решение.

var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];

Посмотрите на это, две строки точно соответствуют тому, что написано на банке, и не сломаются, если кто-то попытается найти уязвимости, и добавит кучу дополнительных символов и запросов в отличие от пары этих решений. Ура, парень!
— Дэвид Дж

Это делает работу правильно и только в 2 строки. Отличный ответ!
— Андрес Рамос

Я думаю, что это было бы удобно для других, проверка на ноль была включена. Если нет, пример приведен здесь: stackoverflow.com/a/36076822/1945948 (попытка редактирования была отклонена).
— ATW

Не понимаю ... как это отвечает на вопрос о получении параметров из определенной строки, 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5'?
— Майк Грызун

Мне понравился этот ответ, +1 добавили. Просто предложение, вы можете заменить [0-9] на\d
— gmanjon

31

Супер простой способ с использованием URLSearchParams .

function getParam(param){
  return new URLSearchParams(window.location.search).get(param);
}

В настоящее время поддерживается в Chrome, Firefox, Safari, Edge и других .


Получите ошибку: «SCRIPT5009:« URLSearchParams »не определен» при работе в Edge.
— Андреас Престхаммер

@AndreasPresthammer Какая версия края?
— spencer.sm

@ spencer-sm Microsoft Edge 41.16299.820.0
— Андреас Престхаммер

Не работает с предварительно настроенными параметрами URL
— ii iml0sto1

@ iiiml0sto1 Что такое «предварительно проверенные параметры URL»?
— spencer.sm

30

Вот рекурсивное решение, которое не имеет регулярных выражений и имеет минимальную мутацию (мутирует только объект params, что, я считаю, неизбежно в JS).

Это круто, потому что это:

  • Является рекурсивным
  • Обрабатывает несколько параметров с одинаковым именем
  • Хорошо справляется с некорректными строками параметров (отсутствующие значения и т. Д.)
  • Не ломается, если в значении '='
  • Выполняет декодирование URL
  • И, наконец, это круто, потому что это ... аааааа !!!

Код:

var get_params = function(search_string) {

  var parse = function(params, pairs) {
    var pair = pairs[0];
    var parts = pair.split('=');
    var key = decodeURIComponent(parts[0]);
    var value = decodeURIComponent(parts.slice(1).join('='));

    // Handle multiple parameters of the same name
    if (typeof params[key] === "undefined") {
      params[key] = value;
    } else {
      params[key] = [].concat(params[key], value);
    }

    return pairs.length == 1 ? params : parse(params, pairs.slice(1))
  }

  // Get rid of leading ?
  return search_string.length == 0 ? {} : parse({}, search_string.substr(1).split('&'));
}

var params = get_params(location.search);

// Finally, to get the param you want
params['c'];

31
Ты ... ты сказал рекурсивно дважды.
— Dissident Rage

Невозможно найти первый параметр в следующем URL:
— www.mysite.com?first=1&second=2

Привет Марио, вот JSFiddle, показывающий, как он работает с этим URL: jsfiddle.net/q6xfJ - Если вы обнаружили ошибку, возможно, это браузер? При тестировании обратите внимание, что в ответе, который я предоставил, используется location.search, являющийся частью URL-адреса «? First = 1 & second = 2». Приветствия :)
— Jai

45
Я не понимаю, почему что-то хорошо только потому, что это рекурсивно.
— Адам Арольд

6
Хм, я думаю, вы пропустили рекурсивную шутку, Адам. Хотя теперь все будут скучать, потому что edi9999 убрал второй "Рекурсив".
— Джай

27

Я сделал функцию, которая делает это:

var getUrlParams = function (url) {
  var params = {};
  (url + '?').split('?')[1].split('&').forEach(function (pair) {
    pair = (pair + '=').split('=').map(decodeURIComponent);
    if (pair[0].length) {
      params[pair[0]] = pair[1];
    }
  });
  return params;
};

Обновление от 26.05.2017, здесь приведена реализация ES7 (работает с предустановленным этапом babel 0, 1, 2 или 3):

const getUrlParams = url => `${url}?`.split('?')[1]
  .split('&').reduce((params, pair) =>
    ((key, val) => key ? {...params, [key]: val} : params)
    (...`${pair}=`.split('=').map(decodeURIComponent)), {});

Некоторые тесты:

console.log(getUrlParams('https://google.com/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('https://google.com/')); // Will log {}
console.log(getUrlParams('a=1&b=2&c')); // Will log {}

Обновление 26.03.2008, вот реализация Typescript:

const getUrlParams = (search: string) => `${search}?`
  .split('?')[1]
  .split('&')
  .reduce(
    (params: object, pair: string) => {
      const [key, value] = `${pair}=`
        .split('=')
        .map(decodeURIComponent)

      return key.length > 0 ? { ...params, [key]: value } : params
    },
    {}
  )

Обновление 13.02.2009, вот обновленная реализация TypeScript, которая работает с TypeScript 3.

interface IParams { [key: string]: string }

const paramReducer = (params: IParams, pair: string): IParams => {
  const [key, value] = `${pair}=`.split('=').map(decodeURIComponent)

  return key.length > 0 ? { ...params, [key]: value } : params
}

const getUrlParams = (search: string): IParams =>
  `${search}?`.split('?')[1].split('&').reduce<IParams>(paramReducer, {})

На URL без параметров запроса это вернетObject {"": ""}
— Илья Семенов

2
Выглядит достаточно чисто для меня. Остальные ответы просто слишком "волшебны" без достаточного объяснения.
— Леви Робертс

Это потрясающий ответ!
— Спенсер

Спасибо @SpencerBigum!
— Нейт Ферреро

24

Посмотри это

function getURLParameters(paramName)
{
    var sURL = window.document.URL.toString();
    if (sURL.indexOf("?") > 0)
    {
        var arrParams = sURL.split("?");
        var arrURLParams = arrParams[1].split("&");
        var arrParamNames = new Array(arrURLParams.length);
        var arrParamValues = new Array(arrURLParams.length);

        var i = 0;
        for (i = 0; i<arrURLParams.length; i++)
        {
            var sParam =  arrURLParams[i].split("=");
            arrParamNames[i] = sParam[0];
            if (sParam[1] != "")
                arrParamValues[i] = unescape(sParam[1]);
            else
                arrParamValues[i] = "No Value";
        }

        for (i=0; i<arrURLParams.length; i++)
        {
            if (arrParamNames[i] == paramName)
            {
                //alert("Parameter:" + arrParamValues[i]);
                return arrParamValues[i];
            }
        }
        return "No Parameters Found";
    }
}

1
Спасибо. Я новичок в jscript, и это будет очень полезно.
— Брайан Б.

20

Решение ECMAScript 6:

var params = window.location.search
  .substring(1)
  .split("&")
  .map(v => v.split("="))
  .reduce((map, [key, value]) => map.set(key, decodeURIComponent(value)), new Map())

Ницца. К вашему сведению, потому что это карта, использование params.get ("ключ");
— evanmcd

Мне это нравится, но, вероятно, он не получит первый параметр. Я создал функцию на основе вашего примера function urlParams(url) { const [, searchParams = ''] = url.split('?') return searchParams.split('&') .map(v => v.split('=')) .reduce((map, [key = '', value]) => key.length ? map.set(key, decodeURIComponent(value)) : map, new Map()) }
— mah.cr

11

я использую

function getVal(str) {
    var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));
    return v ? v[1] : null;
}

Пожалуйста, добавьте некоторые объяснения. Ваш ответ в настоящее время помечен как "низкого качества" и может быть удален без.
— Йоханнес Яндер

Я обнаружил, что если в конце URL-адреса есть строка типа «#id» и возвращено последнее значение параметра, например «somevalue # id»
— Ayano

@ Аяно window.location.searchне будет включать хэш как #id.
— Fancyoung

@Fancyoung Да, вы правы, я допустил ошибку, которая используется location.hrefдля сопоставления результата вместо. location.searchСпасибо.
— Аяно

11

Я использую библиотеку parseUri . Это позволяет вам делать именно то, что вы просите:

var uri = 'www.test.com/t.html&a=1&b=3&c=m2-m3-m4-m5';
var c = uri.queryKey['c'];
// c = 'm2-m3-m4-m5'

9

Вот мое решение. По совету Энди Э, отвечая на этот вопрос , производительность вашего скрипта не очень хорошая, если он постоянно строит различные строки регулярных выражений, запускает циклы и т. Д. Только для получения одного значения. Итак, я придумал более простой скрипт, который возвращает все параметры GET в одном объекте. Вы должны вызвать его только один раз, присвоить результат переменной, а затем в любой момент в будущем получить любое значение из этой переменной, используя соответствующий ключ. Обратите внимание, что он также заботится о декодировании URI (например,% 20) и заменяет + пробелом:

 function getUrlQueryParams(url) {
  var queryString = url.split("?")[1];
  var keyValuePairs = queryString.split("&");
  var keyValue = [];
  var queryParams = {};
  keyValuePairs.forEach(function(pair) {
    keyValue = pair.split("=");
    queryParams[keyValue[0]] = decodeURIComponent(keyValue[1]).replace(/\+/g, " ");
});
  return queryParams;
}

Итак, вот несколько тестов скрипта для вас:

// Query parameters with strings only, no special characters.
var currentParams = getUrlQueryParams("example.com/foo?number=zero");
alert(currentParams["number"]); // Gives "zero".

// For the URL you stated above...
var someParams = getUrlQueryParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ");
alert(someParams["c"]); // Gives "m2-m3-m4-m5".

// For a query params with URI encoding...
var someParams = getUrlQueryParams("www.example.com/t.html?phrase=a%20long%20shot&location=Silicon+Valley%2C+USA");
alert(someParams["phrase"]); // Gives "a long shot".
alert(someParams["location"]); // Gives "Silicon Valley, USA".

.replace ("+", "") заменит только первое вхождение, которое необходимо использовать .replace (/ \ + / g, "");
— Тони

8

Или, если вы не хотите заново изобретать колесо анализа URI, используйте URI.js

Чтобы получить значение параметра с именем foo:

new URI((''+document.location)).search(true).foo

Что это делает

  1. Преобразовать document.location в строку (это объект)
  2. Передайте эту строку создателю класса URI URI.js.
  3. Вызвать функцию search (), чтобы получить часть URL-адреса для поиска (запроса)
    (передача true указывает, что это нужно для вывода объекта)
  4. Получите доступ к свойству foo полученного объекта, чтобы получить значение

Вот скрипка для этого .... http://jsfiddle.net/m6tett01/12/


8

Для значения одного параметра, такого как index.html? Msg = 1, используйте следующий код:

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search.substring(1);
    var varArray = queryString.split("="); //eg. index.html?msg=1

    var param1 = varArray[0];
    var param2 = varArray[1];

}

Для всех значений параметра используйте следующий код,

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search;
    var varArray = queryString.split("&");
    for (var i=0;i<varArray.length;i++) {
      var param = varArray[i].split("=");
        //parameter-value pair
    }
} 

1
Мне нравится это решение!
— Алемур

8

Здесь я публикую один пример. Но это в jQuery. Надеюсь, это поможет другим:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>

<!-- URL:  www.example.com/correct/?message=done&year=1990-->

<script type="text/javascript">
$(function(){
    $.url.attr('protocol')  // --> Protocol: "http"
    $.url.attr('path')          // --> host: "www.example.com"
    $.url.attr('query')         // --> path: "/correct/"
    $.url.attr('message')   // --> query: "done"
    $.url.attr('year')      // --> query: "1990"
});
</script>

1
Скопировано из вашего другого поста: «Требуется плагин url: plugins.jquery.com/url»
— zeta

8

Кратчайший путь:

new URL(location.href).searchParams.get("my_key");

2
Я бы предпочел использовать new URL(location.href).searchParams.get("my_key")over, URLSearchParamsтак как последний потерпит неудачу при получении первого параметра запроса любого URL.
— Трэвис Кларк

1
Протестировал оба варианта. Я с тобой согласен. Отредактировал ответ.
— Зон

7

на этот вопрос слишком много ответов, поэтому я добавляю еще один.

/**
 * parses and returns URI query parameters 
 * 
 * @param {string} param parm
 * @param {bool?} asArray if true, returns an array instead of a scalar 
 * @returns {Object|Array} 
 */
function getURIParameter(param, asArray) {
    return document.location.search.substring(1).split('&').reduce(function(p,c) {
        var parts = c.split('=', 2).map(function(param) { return decodeURIComponent(param); });
        if(parts.length == 0 || parts[0] != param) return (p instanceof Array) && !asArray ? null : p;
        return asArray ? p.concat(parts.concat(true)[1]) : parts.concat(true)[1];
    }, []);
}

Применение:

getURIParameter("id")  // returns the last id or null if not present
getURIParameter("id", true) // returns an array of all ids

это справляется с пустыми параметрами (эти ключи присутствуют без "=value"), предоставлением как скалярного, так и основанного на массиве API для поиска значений, а также с надлежащим декодированием компонента URI.


7

Самый простой способ с использованием replace()метода:

Из urlStrстроки:

paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

или с текущего URL :

paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

Объяснение:

  • document.URL - интерфейс возвращает местоположение документа (URL страницы) в виде строки.
  • replace()- метод возвращает новую строку с некоторыми или всеми совпадениями шаблона, замененными заменой .
  • /.*param_name=([^&]*).*/- регулярное выражение шаблон , заключенный между косыми чертами, что означает:
    • .* - ноль или более любых символов,
    • param_name= - имя параметра, которое занято,
    • () - группа в регулярном выражении,
    • [^&]* - один или несколько любых символов, кроме & ,
    • | - чередование,
    • $1 - ссылка на первую группу в регулярном выражении.

var urlStr = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
var c = urlStr.replace(/.*c=([^&]*).*|(.*)/, '$1');
var notExisted = urlStr.replace(/.*not_existed=([^&]*).*|(.*)/, '$1');
console.log(`c === '${c}'`);
console.log(`notExisted === '${notExisted}'`);


1
Хорошее решение, но если параметр не найден, возвращается вся строка. Я ожидал бы "неопределенный" в этом случае.
— Пенсан

1
Привет @pensan, спасибо за отличный комментарий. Я просто добавляю к регулярному выражению обработку ситуации, когда параметр не появляется в URL. В этом случае мы получаем пустую строку (не целую строку).
— simhumileco

6

Еще одно предложение.

Уже есть несколько хороших ответов, но я нашел их излишне сложными и трудными для понимания. Это короткий, простой и возвращает простой ассоциативный массив с именами ключей, соответствующими именам токенов в URL.

Я добавил версию с комментариями ниже для тех, кто хочет учиться.

Обратите внимание, что для его цикла используется jQuery ($ .each), который я рекомендую вместо forEach. Я считаю, что проще обеспечить кросс-браузерную совместимость, используя jQuery по всем направлениям, вместо того, чтобы подключать отдельные исправления для поддержки тех функций, которые не поддерживаются в старых браузерах.

Изменить: После того, как я написал это, я заметил ответ Эрика Эллиотта, который почти такой же, хотя он использует forEach, хотя я вообще против (по причинам, изложенным выше).

function getTokens(){
    var tokens = [];
    var query = location.search;
    query = query.slice(1);
    query = query.split('&');
    $.each(query, function(i,value){    
        var token = value.split('=');   
        var key = decodeURIComponent(token[0]);     
        var data = decodeURIComponent(token[1]);
        tokens[key] = data;
    });
    return tokens;
}

Комментируемая версия:

function getTokens(){
    var tokens = [];            // new array to hold result
    var query = location.search; // everything from the '?' onward 
    query = query.slice(1);     // remove the first character, which will be the '?' 
    query = query.split('&');   // split via each '&', leaving us an array of something=something strings

    // iterate through each something=something string
    $.each(query, function(i,value){    

        // split the something=something string via '=', creating an array containing the token name and data
        var token = value.split('=');   

        // assign the first array element (the token name) to the 'key' variable
        var key = decodeURIComponent(token[0]);     

        // assign the second array element (the token data) to the 'data' variable
        var data = decodeURIComponent(token[1]);

        tokens[key] = data;     // add an associative key/data pair to our result array, with key names being the URI token names
    });

    return tokens;  // return the array
}

Для приведенных ниже примеров мы примем этот адрес:

http://www.example.com/page.htm?id=4&name=murray

Вы можете назначить URL-токены своей переменной:

var tokens = getTokens();

Затем обратитесь к каждому URL-токену по имени следующим образом:

document.write( tokens['id'] );

Это напечатало бы "4".

Вы также можете просто обратиться к имени токена непосредственно из функции:

document.write( getTokens()['name'] );

... который напечатал бы "Мюррей".


6
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

// Usage for URL: http://my.site.com/location?locationId=53cc272c0364aefcb78756cd&shared=false
var id = getUrlVars()["locationId"];

Получил отсюда: http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html


6

Простой способ

function getParams(url){
        var regex = /[?&]([^=#]+)=([^&#]*)/g,
            params = {},
            match;
        while(match = regex.exec(url)) {
            params[match[1]] = match[2];
        }
        return params;
    }

затем назовите это как getParams (URL)


5

Мне нужно было прочитать переменную URL GET и выполнить действие, основанное на параметре url. Я искал решение проблемы и наткнулся на этот маленький кусочек кода. Он в основном читает URL текущей страницы, выполняет некоторое регулярное выражение для URL, затем сохраняет параметры URL в ассоциативном массиве, к которому мы можем легко получить доступ.

Например, если у нас был следующий URL с javascript внизу.

http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July

Все, что нам нужно сделать, чтобы получить параметры ID и страницу, это вызвать это:

Код будет:

<script type="text/javascript">
var first = getUrlVars()["year"];
var second = getUrlVars()["Month"];

alert(first);
alert(second);
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>

Работал на меня, спасибо
— OJB1

5
// http:localhost:8080/path?param_1=a&param_2=b
var getParamsMap = function () {
    var params = window.location.search.split("&");
    var paramsMap = {};
    params.forEach(function (p) {
        var v = p.split("=");
        paramsMap[v[0]]=decodeURIComponent(v[1]);
    });
    return paramsMap;
};

// -----------------------

console.log(getParamsMap()["param_1"]);  // should log "a"     

Это возвращает первый параметр с '?'
— Пини Чейни

5

Этот Gist от Eldon McGuinness на сегодняшний день является наиболее полной реализацией парсера строки запроса JavaScript, который я когда-либо видел.

К сожалению, он написан как плагин jQuery.

Я переписал его на vanilla JS и сделал несколько улучшений:

function parseQuery(str) {
  var qso = {};
  var qs = (str || document.location.search);
  // Check for an empty querystring
  if (qs == "") {
    return qso;
  }
  // Normalize the querystring
  qs = qs.replace(/(^\?)/, '').replace(/;/g, '&');
  while (qs.indexOf("&&") != -1) {
    qs = qs.replace(/&&/g, '&');
  }
  qs = qs.replace(/([\&]+$)/, '');
  // Break the querystring into parts
  qs = qs.split("&");
  // Build the querystring object
  for (var i = 0; i < qs.length; i++) {
    var qi = qs[i].split("=");
    qi = qi.map(function(n) {
      return decodeURIComponent(n)
    });
    if (typeof qi[1] === "undefined") {
      qi[1] = null;
    }
    if (typeof qso[qi[0]] !== "undefined") {

      // If a key already exists then make this an object
      if (typeof (qso[qi[0]]) == "string") {
        var temp = qso[qi[0]];
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]] = [];
        qso[qi[0]].push(temp);
        qso[qi[0]].push(qi[1]);

      } else if (typeof (qso[qi[0]]) == "object") {
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]].push(qi[1]);
      }
    } else {
      // If no key exists just set it as a string
      if (qi[1] == "") {
        qi[1] = null;
      }
      qso[qi[0]] = qi[1];
    }
  }
  return qso;
}

// DEMO
console.log(parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab"));

Смотрите также эту скрипку .


Что я не понимаю в javascript, так это почему они не создали и не поместили функции анализа URL в сам язык или, по крайней мере, в библиотеку стандартов? низкоуровневые вещи, типа того, что это не должно быть изобретено снова и снова, и не должно предоставляться разработчикам, чтобы использовать любые энтропийно вариативные решения, которые они взбьют. Если это верно, то что-то подобное должно быть внесено в стандартную библиотеку. Это пример типа вещей в javascript, который отключает меня от языка.
— Анбизкад

5

Элегантное, функциональное стилевое решение

Давайте создадим объект, содержащий имена параметров URL в качестве ключей, после чего мы можем легко извлечь параметр по его имени:

// URL: https://example.com/?test=true&orderId=9381  

// Build an object containing key-value pairs
export const queryStringParams = window.location.search
  .split('?')[1]
  .split('&')
  .map(keyValue => keyValue.split('='))
  .reduce<QueryStringParams>((params, [key, value]) => {
    params[key] = value;
    return params;
  }, {});

type QueryStringParams = {
  [key: string]: string;
};


// Return URL parameter called "orderId"
return queryStringParams.orderId;

люблю это, но у меня не получилось, не
— Элла

@ Элла, это была опечатка, без нее не получитсяreturn

Теперь выглядит лучше, будем надеяться, что вы попадете на первую страницу!
— Элла

4

Вот что я делаю:

var uriParams = getSearchParameters();
alert(uriParams.c);


// background functions:

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

  for (var i = 0; i < prmarr.length; i++) {
    var tmparr = prmarr[i].split("=");
    params[tmparr[0]] = tmparr[1];
  }
  return params;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.