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

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

Answer 5

Я использую

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

Answer 6

Вот мое решение. Как советовал Энди Э., отвечая на этот вопрос , производительность вашего сценария не очень хорошая, если он постоянно строит различные строки регулярных выражений, циклы выполнения и т. Д. Только для получения одного значения. Итак, я придумал более простой скрипт, который возвращает все параметры 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".

Answer 7

Для Значение одного параметра как этот 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
    }
} 

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

Answer 9

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

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

Answer 10

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

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

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

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

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

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