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

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

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

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

30 ответов


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

в (современном) браузере вы можете использовать URL объект;

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

большинство реализаций, которые я видел, пропускают 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);

источник

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')

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

пример 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 полон параметры.


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

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


Вы можете получить строку запроса в 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;

Я нашел это давным-давно, очень просто:

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

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

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

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

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

вот рекурсивное решение, которое не имеет регулярного выражения и имеет минимальную мутацию (мутирован только объект 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'];

посмотреть этот

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

решение 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())

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

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

обновление 3/26/2018, вот реализация 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
    },
    {}
  )

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

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

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


Я использую 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'

Я использую

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

вот мое решение. Как посоветовал Энди E при ответе этот вопрос, это не хорошо для производительности вашего скрипта, если он неоднократно создает различные строки регулярных выражений, запускает циклы и т. д., Чтобы получить одно значение. Таким образом, я придумал более простой скрипт, который возвращает все параметры в одном объекте. Вы должны вызвать его только один раз, назначить результат переменной, а затем в любой момент в будущем получить любое значение из этой переменной, используя соответствующее ключ. Обратите внимание, что он также заботится о декодировании URI (i.e такие вещи, как %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".

на Значение Одного Параметра такой индекс.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
    }
} 

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

/**
 * 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.


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

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

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

это

  1. преобразовать документ.расположение к строке (это объект)
  2. передайте эту строку в URI.JS ' S URI class construtor
  3. вызовите функцию search (), чтобы получить часть поиска (запроса) url
    (передача true указывает на вывод объект)
  4. доступ к свойству foo на результирующем объекте, чтобы получить значение

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


здесь я публикую один пример. Но это в 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>

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


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

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

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


// 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"     

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

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

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

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

Edit: после того, как я написал это, я заметил ответ Эрика Эллиота, который почти такой же, хотя он использует 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'] );

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


здесь в 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"

мне нужно было прочитать переменную 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>

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

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

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


function getParamValue(param) {
    var urlParamString = location.search.split(param + "=");
    if (urlParamString.length <= 1) return "";
    else {
        var tmp = urlParamString[1].split("&");
        return tmp[0];
    }
}

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


мы можем получить 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=',"")

возвращает в виде строки

"m2-m3-m4-m5"

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"**)