Как получить значение из параметров GET? - PullRequest
1138 голосов
/ 11 июня 2009

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

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

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

Ответы [ 53 ]

6 голосов
/ 02 сентября 2015

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

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

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

6 голосов
/ 28 июля 2014
// 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"];

Понятно

5 голосов
/ 15 апреля 2014

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

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

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

5 голосов
/ 11 августа 2018

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

new URL(location.href).searchParams.get("my_key");
5 голосов
/ 16 ноября 2016
// 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"     
4 голосов
/ 28 июня 2015

Мне нужно было прочитать переменную URL GET и выполнить действие на основе параметра 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 голосов
/ 19 мая 2015

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

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 голосов
/ 19 ноября 2015
function getParamValue(param) {
    var urlParamString = location.search.split(param + "=");
    if (urlParamString.length <= 1) return "";
    else {
        var tmp = urlParamString[1].split("&");
        return tmp[0];
    }
}

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

3 голосов
/ 10 апреля 2018

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

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

3 голосов
/ 18 ноября 2014
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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...