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

1083

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

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

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

Теги:
url

55 ответов

1467
Лучший ответ

В самом 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) вы можете использовать этот полифилл или код из оригинальной версии этого ответа, предшествующий 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);
  • 0
    Для более старых браузеров вам может понадобиться полизаполнение для URL в дополнение к тому, что для URLSearchParams . Или вы можете избежать этой проблемы, заменив строку var c = url.searchParams.get("c"); в ответе выше с var c = new URLSearchParams(window.location.search).get("c"); ,
  • 0
    parse_query_string завершится с ошибкой для значений, которые содержат '=', как при передаче значения в кодировке base64 в качестве значения. Версия, использующая регулярное выражение ниже, работает лучше.
Показать ещё 2 комментария
236

Большинство реализаций, которые я видел, пропускают 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: в некоторых браузерах это работает, а в других - бесконечный цикл. Вы наполовину правы в этом отношении. Я исправлю код, чтобы быть кросс-браузерным. Спасибо что подметил это!
Показать ещё 9 комментариев
212

источник

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
    Похоже, у вас есть несколько дополнительных символов. "\\[" должно быть "\[". Поскольку это обычные строки, [и] не нужно экранировать.
Показать ещё 8 комментариев
190

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

Пример URL:

    http://myserver/action?myParam=2

Пример Javascript:

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

если "myParam" существует в переменной URL... 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-адрес заполнен параметрами.

  • 31
    Это работает, только если параметр, который вы захватываете, является последним в URL, от которого вы не должны зависеть (даже если вы ожидаете только один параметр). например, http://myserver/action?myParam=2&anotherParam=3 даст не "2" а "2&anotherParam=3" .
  • 34
    (location.search.split('myParam=')[1]||'').split('&')[0] - использовать с несколькими параметрами или, возможно, пропустить myParam .
Показать ещё 4 комментария
99

Поставщики браузеров реализовали собственный способ сделать это через 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/

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

  • 0
    В соответствии со ссылкой (ами) MDN URL поддержки Safari, но не URLSearchParams.
  • 2
    @ Маркувер Разве полифилл не позаботится об этом? Кстати, Safari - это современное IE6
Показать ещё 9 комментариев
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-декодирования имен и значений параметров?
  • 0
    Этот подход не обрабатывает массивы. Например,? ?array[]=1&array[]=2 производит {"array[]": "2"} , что явно неверно.
Показать ещё 1 комментарий
71

Я нашел это много лет назад, очень легко:

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

Затем назовите его следующим образом:

var fType = getUrlVars()["type"];
  • 4
    +1 отличное решение - элегантные, эффективные и интеллектуальные условия использования. Для моих целей лучше, чем другое принятое решение
  • 0
    это прекрасно
Показать ещё 10 комментариев
37

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

var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];
  • 0
    Посмотрите на это, две строки точно соответствуют тому, что написано на банке, и не сломаются, если кто-то попытается найти уязвимости, и добавит кучу дополнительных символов и запросов, в отличие от пары этих решений. Ура, парень!
  • 1
    вау, какое милое маленькое решение! Проверено, работает.
Показать ещё 5 комментариев
27

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

Это потрясающе, потому что это:

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

Код:

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'];
  • 30
    Ты ... ты сказал рекурсивно дважды.
  • 0
    Невозможно найти первый параметр в следующем URL: www.mysite.com?first=1&second=2
Показать ещё 4 комментария
23

Смотрите это

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, и это будет очень полезно.
22

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

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

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

  • 0
    Получите ошибку: «SCRIPT5009:« URLSearchParams »не определен» при работе в Edge.
  • 0
    @AndreasPresthammer Какая версия края?
Показать ещё 1 комментарий
19

Решение 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())
  • 0
    Ницца. К вашему сведению, потому что это карта, использование params.get ("ключ");
16

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

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, {})
  • 0
    Для URL без параметров запроса это вернет Object {"": ""}
  • 0
    Спасибо @IlyaSemenov - я обновил ответ.
Показать ещё 1 комментарий
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'
10

Я использую

function getVal(str) {
    var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));
    return v ? v[1] : null;
}
  • 0
    Пожалуйста, добавьте некоторые объяснения. Ваш ответ в настоящее время помечен как "низкого качества" и может быть удален без.
  • 0
    Я обнаружил, что если в конце URL-адреса есть строка, такая как «#id», и возвращает последнее значение параметра, например «somevalue # id»
Показать ещё 2 комментария
9

Вот мое решение. Как посоветовал Andy E, отвечая на этот вопрос, это не очень хорошо для производительности вашего скрипта, если он многократно создает различные строки регулярных выражений, запускает циклы и т.д., Чтобы получить только одно значение. Итак, я придумал более простой скрипт, который возвращает все параметры 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".
  • 0
    .replace ("+", "") заменит только первое вхождение, которое необходимо использовать .replace (/ \ + / g, "");
  • 0
    Спасибо @ Тони. Я исправил это сейчас.
8

Для Единого значения параметра, например this.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
    Мне нравится это решение!
  • 0
    спасибо ... @Akmur
7

Здесь я отправляю один пример. Но это в 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»
7

Или, если вы не хотите изобретать механизм синтаксического анализа URI, URI.js

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

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

Что это значит,

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

Вот сценарий для этого.... http://jsfiddle.net/m6tett01/12/

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.

6

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

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

тогда назовите его как getParams (url)

6
// Read a page 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

  • 1
    или "var id = getUrlVars (). locationId;" право?
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"     
  • 0
    Это возвращает первый параметр с '?'
5

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

Уже есть хорошие ответы, но я нашел их бесполезно сложными и трудными для понимания. Это короткий, простой и возвращает простой ассоциативный массив с именами ключей, соответствующими именам токенов в 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'] );

..., который будет печатать "murray".

4

Самый короткий путь:

new URL(location.href).searchParams.get("my_key");
  • 2
    Я бы предпочел использовать new URL(location.href).searchParams.get("my_key") URLSearchParams так как последний не удастся при получении первого параметра запроса любого URL.
  • 1
    Протестировал оба варианта. Я с тобой согласен. Отредактировал ответ.
4

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

Итак, в качестве примера, если у нас был следующий URL-адрес с javascript внизу на месте.

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

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

Код будет:

<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>
4

Вот исходный код angularJs для анализа параметров запроса url в Object:

function tryDecodeURIComponent(value) {
  try {
    return decodeURIComponent(value);
  } catch (e) {
    // Ignore any invalid uri component
  }
}

function isDefined(value) {return typeof value !== 'undefined';}

function parseKeyValue(keyValue) {
  keyValue = keyValue.replace(/^\?/, '');
  var obj = {}, key_value, key;
  var iter = (keyValue || "").split('&');
  for (var i=0; i<iter.length; i++) {
    var kValue = iter[i];
    if (kValue) {
      key_value = kValue.replace(/\+/g,'%20').split('=');
      key = tryDecodeURIComponent(key_value[0]);
      if (isDefined(key)) {
        var val = isDefined(key_value[1]) ? tryDecodeURIComponent(key_value[1]) : true;
        if (!hasOwnProperty.call(obj, key)) {
          obj[key] = val;
        } else if (isArray(obj[key])) {
          obj[key].push(val);
        } else {
          obj[key] = [obj[key],val];
        }
      }
    }
  };
  return obj;
}

alert(JSON.stringify(parseKeyValue('?a=1&b=3&c=m2-m3-m4-m5')));

Вы можете добавить эту функцию в window.location:

window.location.query = function query(arg){
  q = parseKeyValue(this.search);
  if (!isDefined(arg)) {
    return q;
  }      
  if (q.hasOwnProperty(arg)) {
    return q[arg];
  } else {
    return "";
  }
}

// assuming you have this url :
// http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5

console.log(window.location.query())

// Object {a: "1", b: "3", c: "m2-m3-m4-m5"}

console.log(window.location.query('c'))

// "m2-m3-m4-m5"
3

Этот Gist by 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"));

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

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

Мы можем получить значения параметра c более простым способом, не зацикливая все параметры, см. ниже jQuery для получения параметров.

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

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

url.match(**/(c=)[0-9A-Za-z-]+/ig**)[0].replace('c=',"")

(или)

url.match(**/(c=)[0-z-]+/ig**)[0].replace('c=',"")

возвращает как строку

"м2-м3-М4-М5"

2. Заменить значение параметра:

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

url.replace(**/(c=)[0-9A-Za-z-]+/ig, "c=m2345"**)
  • 0
    Где находится JQuery. Не могли бы вы просто назвать его JS, если это JS, потому что нет jquery.
3
function getParamValue(param) {
    var urlParamString = location.search.split(param + "=");
    if (urlParamString.length <= 1) return "";
    else {
        var tmp = urlParamString[1].split("&");
        return tmp[0];
    }
}

Это должно работать для вашего случая независимо от того, какой параметр последний или нет.

3
window.location.href.split("?")

то игнорировать первый индекс

Array.prototype.slice.call(window.location.href.split("?"), 1) 

возвращает массив параметров вашего URL

var paramArray = Array.prototype.slice.call(window.location.href.split(/[?=]+/), 1);
var paramObject = paramArray.reduce(function(x, y, i, a){ (i%2==0) ?  (x[y] = a[i+1]) : void 0; return x; }, {});

Немного более подробный/хакерский, но также функциональный, paramObject содержит все параметры, отображаемые как объект js

3

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

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;
}
2

PHP parse_str copycat..:)

// Handles also array params well
function parseQueryString(query) {
    var pars = (query != null ? query : "").replace(/&+/g, "&").split('&'),
        par, key, val, re = /^([\w]+)\[(.*)\]/i, ra, ks, ki, i = 0,
        params = {};

    while ((par = pars.shift()) && (par = par.split('=', 2))) {
        key = decodeURIComponent(par[0]);
        // prevent param value going to be "undefined" as string
        val = decodeURIComponent(par[1] || "").replace(/\+/g, " ");
        // check array params
        if (ra = re.exec(key)) {
            ks = ra[1];
            // init array param
            if (!(ks in params)) {
                params[ks] = {};
            }
            // set int key
            ki = (ra[2] != "") ? ra[2] : i++;
            // set array param
            params[ks][ki] = val;
            // go on..
            continue;
        }
        // set param
        params[key] = val;
    }

    return params;
}

var query = 'foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last';
var params = parseQueryString(query);
console.log(params)
console.log(params.foo)        // 1
console.log(params.bar)        // The bar!
console.log(params.arr[0])     // a0
console.log(params.arr[1])     // a1
console.log(params.arr.s)      // as
console.log(params.arr.none)   // undefined
console.log("isset" in params) // true like: isset($_GET['isset'])



/*
// in php
parse_str('foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last', $query);
print_r($query);

Array
(
    [foo] => 1
    [bar] => The bar!
    [arr] => Array
        (
            [0] => a0
            [1] => a1
            [s] => as
            [2] => last
        )

    [isset] =>
)*/
2

Используйте dojo. Никакое другое решение здесь не является коротким или хорошо проверенным:

require(["dojo/io-query"], function(ioQuery){
    var uri = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ";
    var query = uri.substring(uri.indexOf("?") + 1, uri.length);
    var queryObject = ioQuery.queryToObject(query);
    console.log(queryObject.c); //prints m2-m3-m4-m5
});
2

Вы можете добавить окно ввода, а затем попросить пользователя скопировать значение в него... это действительно так:

<h1>Hey User! Can you please copy the value out of the location bar where it says like, &m=2? Thanks! And then, if you could...paste it in the box below and click the Done button?</h1>
<input type='text' id='the-url-value' />
<input type='button' value='This is the Done button. Click here after you do all that other stuff I wrote.' />

<script>
//...read the value on click

Хорошо, серьезно, хотя... Я нашел этот код и, похоже, работает хорошо:

http://www.developerdrive.com/2013/08/turning-the-querystring-into-a-json-object-using-javascript/

function queryToJSON() {
    var pairs = location.search.slice(1).split('&');

    var result = {};
    pairs.forEach(function(pair) {
        pair = pair.split('=');
        result[pair[0]] = decodeURIComponent(pair[1] || '');
    });

    return JSON.parse(JSON.stringify(result));
}

var query = queryToJSON();
1

Мне нравится писать стенографию как можно больше:

URL: example.com/mortgage_calc.htm?pmts=120&intr=6.8&prin=10000

Vanilla Javascript:

for ( var vObj = {}, i=0, vArr = window.location.search.substring(1).split('&');
        i < vArr.length; v = vArr[i++].split('='), vObj[v[0]] = v[1] ){}
// vObj = {pmts: "120", intr: "6.8", prin: "10000"}
0

В моем случае (перенаправление на новый домен со всем суб-url) ::

window.location.replace("https://newdomain.com" + window.location.pathname);
0

Я разработал инструмент JavaScript, чтобы сделать это за один простой шаг.

Сначала скопируйте эту ссылку script в голову HTML:

<script src="https://booligoosh.github.io/urlParams/urlParams.js"></script>

Затем просто получите значение c с помощью urlParams.c или urlParams['c']. Простой!

Здесь вы можете увидеть реальное демо, используя ваши значения.

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

0

Попробуйте следующее: Пример синтаксиса URL: index.html? Test = as & a = 213 + 234 + 234 & b = asd3-as-45-23 # theHash

var e = window.location.search.substring(1).split("&");
for(var i in e){
    console.log(e[i].split('=')[0] + " => " + e[i].split('=')[1]);
}
console.log(window.location.hash.substring(1));

Это работает для меня в Chrome, FF, Edge и Safari. Надеюсь, что это поможет.

0

Изучение многих ответов (например VaMoose, Gnarf или Blixt 's).

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

Url = {
    params: undefined,
    get get(){
        if(!this.params){
            var vars = {};
            if(url.length!==0)
                url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value){
                    key=decodeURIComponent(key);
                    if(typeof vars[key]==="undefined") {
                        vars[key]= decodeURIComponent(value);
                    }
                    else {
                        vars[key]= [].concat(vars[key], decodeURIComponent(value));
                    }
                });
            this.params = vars;
        }
        return this.params;
    }
};

Это позволяет вызвать метод только с помощью Url.get.

В первый раз, когда он будет извлекать объект из URL-адреса, в следующий раз он загрузит сохраненные.

Пример

В url, как ?param1=param1Value&param2=param2Value&param1=param1Value2, параметры могут быть выбраны так:

Url.get.param1 //["param1Value","param1Value2"]
Url.get.param2 //"param2Value"
0

Вот мое решение: jsfiddle

Приведенный ниже метод возвращает словарь, содержащий параметры данного URL. В случае отсутствия параметров он будет равен нулю.

function getParams(url){
    var paramsStart = url.indexOf('?');
    var params = null;

    //no params available
    if(paramsStart != -1){
        var paramsString = url.substring(url.indexOf('?') + 1, url.length);

        //only '?' available
        if(paramsString != ""){
            var paramsPairs = paramsString.split('&');

            //preparing
            params = {};
            var empty = true;
            var index  = 0;
            var key = "";
            var val = "";

            for(i = 0, len = paramsPairs.length; i < len; i++){
                index = paramsPairs[i].indexOf('=');

                //if assignment symbol found
                if(index != -1){
                    key = paramsPairs[i].substring(0, index);
                    val = paramsPairs[i].substring(index + 1, paramsPairs[i].length);

                    if(key != "" && val != ""){

                        //extend here for decoding, integer parsing, whatever...

                        params[key] = val;

                        if(empty){
                            empty = false;
                        }
                    }                    
                }
            }

            if(empty){
                params = null;
            }
        }
    }

    return params;
}
0

Здесь решение, которое я нахожу немного более читаемым, - но для него требуется .forEach() IE8:

var getParams = function () {
  var params = {};
  if (location.search) {
    var parts = location.search.slice(1).split('&');

    parts.forEach(function (part) {
      var pair = part.split('=');
      pair[0] = decodeURIComponent(pair[0]);
      pair[1] = decodeURIComponent(pair[1]);
      params[pair[0]] = (pair[1] !== 'undefined') ?
        pair[1] : true;
    });
  }
  return params;
}
-1

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

  1. Разобрать URL как объект
  2. Извлечь часть поиска параметров
  3. Преобразуйте searchParams из Итератора в Массив с расширением массива.
  4. Уменьшите массив ключ-значение в объект.

const url = 'http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
const params = [... new URL(url).searchParams.entries()]
  .reduce((a, c) => Object.assign(a, {[c[0]]:c[1]}), {})

console.log(params);
  • 0
    Я разместил ответ, который решает вопрос простым и современным способом. Я хотел бы получить обратную связь, если мой вопрос будет отклонен. Где я был не прав? Это концептуально или практично? Это может быть исправлено в ответе? Пожалуйста, оставьте отзыв!
-1

У меня была одна и та же проблема снова и снова. Теперь многие пользователи здесь, я знаменит своей работой HAX,

поэтому я решаю это, используя:

PHP:

echo "<p style="display:none" id=\"hidden-GET\">".$_GET['id']."</p>";

JS:

document.getElementById("hidden-GET").innerHTML;

Просто HAX, но работает.

-1

вы можете запустить эту функцию

    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;
    }

    var source = getUrlVars()["lm_supplier"];
    var el = source.toString();
    var result= decodeURI(el);

console.log(result)

эта функция получает то, что вы хотите от URL, var source = getUrlVars() [ "положить то, что вы хотите получить от url" ];

-1

Это работает:

function getURLParameter(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}

Я не получил никаких других лучших ответов для работы.

-2
export const getURLParams = location => {
    const searchParams = new URLSearchParams(location.search)
    const params = {}

    for (let key of searchParams.keys()) {
        params[key] = searchParams.get(key)
    }

    return params
}

console.log(getURLParams({ search: '?query=someting&anotherquery=anotherthing' }))

// --> {query: "someting", anotherquery: "anotherthing"}
-2
function parseUrl(url){
    let urlParam = url.split("?")[1];
    console.log("---------> URL param : " + urlParam);
    urlParam = urlParam.split("&");
    let urlParamObject = {};
    for(let i=0;i < urlParam.length;i++){
        let tmp = urlParam[i].split("=");
        urlParamObject[tmp[0]] = tmp[1];
    }
    return urlParamObject;
}

let param = parseUrl(url);
param.a // output 10
param.b // output 20
-2

Вы можете просто использовать основной javascript, чтобы получить значение ключа param как объект js:

var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5";
var url = new URL(url_string);
let obj = {};
var c = url.searchParams.forEach((value, key) => {
  obj[key] = value;
});
console.log(obj);
  • 0
    Объект URL (а) уже упоминается в принятом ответе и (б) не является "основным javascript". Он определен в своем собственном стандарте и не поддерживается IE.
-2

Как уже упоминалось в первом ответе в последнем браузере, мы можем использовать новый URL API, однако более согласованное простое решение на основе javascript позволяет получить все параметры в объекте и использовать их.

Например, этот класс скажет locationUtil

const locationSearch = () => window.location.search;
const getParams = () => {
  const usefulSearch = locationSearch().replace('?', '');
  const params = {};
  usefulSearch.split('&').map(p => {
    const searchParam = p.split('=');
    const [key, value] = searchParam;
    params[key] = value;
    return params;
  });
  return params;
};

export const searchParams = getParams();

Использование :: Теперь вы можете импортировать объект searchParams в ваш класс

Пример для URL --- https://www.google.com?key1=https://www.linkedin.com/in/spiara/&valid=true

import { searchParams } from '../somewhere/locationUtil';

const {key1, valid} = searchParams;
if(valid) {
 console.log("Do Something");
 window.location.href = key1;
}
-2

Я пробовал много разных способов, но эта проверенная функция regex работает для меня, когда я ищу значения параметров в URL-адресе, надеюсь, что это поможет:

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

        function QueryString(item, text){
            var foundString = text.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)","i"));
            return foundString ? foundString[1] : foundString;
        }

        console.log(QueryString('c', text));

используйте как QueuryString('param_name', url) и вернет значение

м2-м3-М4-М5

-2

Я использую следующее:

  • удалить сначала "?" персонаж
  • разделите ключ параметра = значение или клавишу
  • поместите те, у которых есть действительный ключ в объекте "out"
  • распечатать"
var out = {}; 
window.location.search.replace("?","").split("&").map(function(part){ 
      var tmp = part.split("=");
      var key = tmp[0];
      var val = tmp[1];
      if ((typeof key == 'string')&&(key.length>0)){
              out[key] = val; 
      }
})
console.log(out);

Тестовый URL (предполагается, что он немного злонамерен)

mywebsite.com/t=1234&e=mydata1&a&&v&=&e=mydata2

Вывод

{t: "1234", e: "mydata2", a: undefined, v: undefined}


Ваша строка

? А = 1 & Ь = 3 & с = м2-м3-М4-М5

Вывод

{a: "1", b: "3", c: "m2-m3-m4-m5"}


Надеюсь это поможет!

-2

Я знаю, что это не так важно для базового вопроса, однако, если бы вы были похожи на меня, спотыкаясь на этот вопрос и работая с JSF/RichFaces, вы можете получить эти параметры напрямую, используя следующий фрагмент кода.

"#{param['requestParamaterName']}"
-2
    function gup() {
    var qs = document.location.search;
    qs = qs.split('+').join(' ');
    var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;
    while (tokens = re.exec(qs))
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    return params;
}

используйте его как

var params = gup()

а затем

params.param1
params.param2
-2
$_GET: function (param) {
    var regex = new RegExp("(?:[?&]+" + param + "=)([^&]*)?", "i");
    var match = regex.exec(window.location.href);
    return match === null ? match : match[1];
}
  • 0
    Я заметил, что если вы отправите параметр с «?» в начале он все еще понимает, что это параметр. это было задумано?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню