Comment obtenir la valeur des paramètres GET?

la plupart des implémentations que j'ai vu manquent URL-décodant les noms et les valeurs.

Voici une fonction d'utilité générale qui fait aussi bon URL-décodage:

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

source

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

C'est un moyen facile de vérifier qu'un seul paramètre:

exemple D'URL:

    http://myserver/action?myParam=2

Exemple Javascript:

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

si" myParam " existe dans L'URL... la variable myParam contiendra "2", sinon elle ne sera pas définie.

peut-être que vous voulez une valeur par défaut, dans ce cas:

    var myParam = location.search.split('myParam=')[1] ? location.search.split('myParam=')[1] : 'myDefaultValue';

mise à jour: cela fonctionne mieux:

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

et il fonctionne correctement même lorsque L'URL est pleine de paramètres.

ont mis en place une manière native de le faire via URL et 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"

actuellement pris en charge dans Firefox, Opera, Safari et Chrome. Avec le soutien de bord à venir bientôt .

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, un ingénieur chez Google, recommande en utilisant ce polyfill pour les navigateurs non pris en charge.

vous pouvez obtenir la chaîne de requête dans location.search , puis vous pouvez tout diviser après le point d'interrogation:

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;

j'ai trouvé cela il y a longtemps, très facile:

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

alors appelez ça comme ça:

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

j'ai écrit une solution plus simple et élégante.

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

Voici une solution récursive qui n'a pas de regex, et qui a peu de mutation (seul l'objet params est muté, ce qui est inévitable dans JS).

C'est génial parce que c':

• Est récursive
• gère plusieurs paramètres du même nom
• traite bien les chaînes de paramètres mal formées (valeurs manquantes, etc.)
• ne casse pas si '=' est dans la valeur
• effectue le décodage D'URL
• et enfin, c'est génial parce que c'est...argh!!!

Code:

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'];

voir ce

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 solution:

var params = window.location.search
  .substring(1)
  .split("&")
  .map(v => v.split("="))
  .reduce((map, [key, value]) => map.set(key, decodeURIComponent(value)), new Map())

j'ai fait une fonction qui fait ceci:

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

mise à jour 26/05/2017, voici une implémentation ES7 (fonctionne avec babel preset étape 0, 1, 2, ou 3):

const getUrlParams = url => `${url}?`.split('?')[1]
  .split('&').reduce((params, pair) =>
    ((key, val) => key ? {...params, [key]: val} : params)
    (...`${pair}=`.split('=').map(decodeURIComponent)), {});

quelques essais:

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

mise à Jour 3/26/2018, voici un Tapuscrit de mise en œuvre:

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

Une super façon simple à l'aide de URLSearchParams .

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

il est actuellement pris en charge dans Chrome, Firefox, Safari, Edge, et autres .

j'utilise la bibliothèque parseUri . Il vous permet de faire exactement ce que vous demandez:

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'

j'utilise

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

voici ma solution. Comme L'a conseillé Andy e en répondant à cette question , ce n'est pas bon pour la performance de votre script s'il construit à plusieurs reprises diverses chaînes regex, boucles d'exécution, etc juste pour obtenir une seule valeur. Donc, j'ai trouvé un script plus simple qui renvoie tous les paramètres GET dans un seul objet. Vous devriez l'appeler juste une fois, assignez le résultat à une variable et puis, à tout moment dans le futur, obtenir n'importe quelle valeur que vous voulez de cette variable en utilisant la clé appropriée. Notez qu'il s'occupe également du décodage URI(I. e comme %20) et remplace + par un espace:

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

voici donc quelques tests du script que vous pouvez voir:

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

pour valeur à paramètre unique comme cet indice.le html?msg=1 utiliser le code suivant,

$(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];

}

Pour Tous les paramètres Valeur utilisez le Code suivant,

$(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
    }
} 

cette question a trop de réponses, donc j'en ajoute une autre.

/**
 * 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];
    }, []);
}

utilisation:

getURIParameter("id")  // returns the last id or null if not present
getURIParameter("id", true) // returns an array of all ids

ce cope avec des paramètres vides (ces clés présentes sans "=value" ), l'exposition d'une API de récupération de valeur scalaire et basée sur des tableaux, ainsi que le décodage approprié de composants URI.

Ou si vous ne voulez pas de réinventer l'URI d'analyse utilisation de roues URI.js

Pour obtenir la valeur d'un paramètre nommé foo:

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

Ce qui n'est

1. Convertir le document.emplacement pour une chaîne de caractères (c'est un objet)
2. donnez cette chaîne à URI.js de la classe URI construtor
3. Invoquer la recherche() pour obtenir la recherche (requête) partie de l'url
   
   (passer true lui dit de sortir un objet)
4. accéder à la propriété foo sur l'objet résultant pour obtenir la valeur

voici un violon pour ça.... http://jsfiddle.net/m6tett01/12 /

ici je poste un exemple. Mais c'est à jQuery. Espérons qu'il aidera les autres:

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

Obtenu à partir d'ici: http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html

façon Simple

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

alors appelez - le comme 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"     

encore une autre suggestion.

il y a déjà quelques bonnes réponses, mais je les ai trouvées inutilement complexes et difficiles à comprendre. C'est court, simple, et renvoie un tableau associatif simple avec des noms clés correspondant aux noms de tokens dans L'URL.

j'ai ajouté une version avec les commentaires ci-dessous pour ceux qui veulent apprendre.

cette Remarque s'appuie sur jQuery ($.chaque) pour sa boucle, que je recommande au lieu de forEach. Je trouvez plus simple d'assurer la compatibilité entre les navigateurs en utilisant jQuery dans tous les sens plutôt que de brancher des correctifs individuels pour prendre en charge les nouvelles fonctions qui ne sont pas prises en charge dans les navigateurs plus anciens.

Edit: après que j'ai écrit ceci j'ai remarqué la réponse D'Eric Elliott, qui est presque la même, bien qu'elle utilise forEach, alors que je suis généralement contre (pour les raisons indiquées ci-dessus).

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

version commentée:

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
}

pour le exemples ci-dessous nous supposerons cette adresse:

http://www.example.com/page.htm?id=4&name=murray

vous pouvez affecter les jetons URL à votre propre variable:

var tokens = getTokens();

se référer ensuite à chaque token URL par son nom comme ceci:

document.write( tokens['id'] );

"4".

vous pouvez aussi simplement vous référer à un nom de token de la fonction directement:

document.write( getTokens()['name'] );

...qui imprime "murray".

, Voici le angularJs code source pour l'analyse des paramètres de requête url en Objet :

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

vous pouvez ajouter cette fonction à 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"

j'ai eu le besoin de lire une variable GET URL et de compléter une action basée sur le paramètre url. J'ai cherché partout une solution et j'ai trouvé ce petit morceau de code. Il lit essentiellement l'url de la page courante, exécute une certaine expression régulière sur L'URL puis sauve les paramètres d'url dans un tableau associatif, que nous pouvons facilement accéder.

comme exemple si nous avions l'url suivante avec le javascript en bas en place.

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

Tout ce que nous avons besoin de faire pour obtenir les paramètres id et page sont d'appeler cela:

le Code sera:

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

voici ce que je fais:

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

puis ignorer le premier indice

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

renvoie un tableau de vos paramètres d'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; }, {});

un peu plus verbeux / hacky mais aussi fonctionnel, paramObject contient tous les paramètres mappés comme un objet js

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

cela devrait fonctionner pour votre cas, peu importe que le param soit dernier ou pas.

nous pouvons obtenir les valeurs des paramètres c d'une manière plus simple sans boucler tous les paramètres, voir ci-dessous jQuery pour obtenir les paramètres.

1. Pour obtenir la valeur du paramètre:

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=',"")

(ou)

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

retourne sous forme de chaîne de caractères

"m2-m3-m4-m5 "

2. Pour Remplacer la valeur du paramètre:

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