Как получить значение из параметров 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.