web-dev-qa-db-fra.com

Utilisation du paramètre GET d'une URL en JavaScript

Si je suis sur une page telle que

http://somesite.com/somepage.php?param1=asdf

Dans le code JavaScript de cette page, j'aimerais définir une variable avec la valeur du paramètre dans la partie GET de l'URL.

Donc en JavaScript:

<script>
   param1var = ...   // ... would be replaced with the code to get asdf from URI
</script>

Que serait "..."?

javascripturlget
40
RobKohr

En voici quelques-uns exemple de code.

<script>
var param1var = getQueryVariable("param1");

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
  alert('Query Variable ' + variable + ' not found');
}
</script>
95
Jose Basilio

Vous pouvez obtenir la partie "recherche" de l'objet de localisation, puis l'analyser.

var matches = /param1=([^&#=]*)/.exec(window.location.search);
var param1 = matches[1];
9
gnarf

J'ai fait cette variante de la solution de gnarf, donc l'appel et le résultat sont similaires à PHP:

function S_GET(id){
    var a = new RegExp(id+"=([^&#=]*)");
    return decodeURIComponent(a.exec(window.location.search)[1]);
}

Mais comme être appelé dans une fonction ralentit le processus, il vaut mieux l'utiliser en tant que global:

window['nom_var'] = decodeURIComponent( /var_in_get=([^&#=]*)/.exec(window.location.search)[1] );

MISE À JOUR

Alors que j'apprenais encore JS, j'ai créé une meilleure réponse dans un comportement plus JS:

Url = {
    get get(){
        var vars= {};
        if(window.location.search.length!==0)
            window.location.search.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));}
            });
        return vars;
    }
};

Cela permet d’être appelé simplement en utilisant Url.get.

Exemple L'url ?param1=param1Value&param2=param2Value Peut être appelé comme suit:

Url.get.param1 //"param1Value"
Url.get.param2 //"param2Value"

voici un snipet:

// URL GET params
url = "?a=2&a=3&b=2&a=4";

Url = {
    get get(){
        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));}
            });
        return vars;
    }
};

document.querySelector('log').innerHTML = JSON.stringify(Url.get);
<log></log>
7
Gatsbimantico

Voici comment vous pouvez le faire dans Coffee Script (juste si quelqu'un est intéressé).

decodeURIComponent( v.split( "=" )[1] ) if decodeURIComponent( v.split( "=" )[0] ) == name for v in window.location.search.substring( 1 ).split( "&" )
2
Jasper Kennis

De mes archives de programmation:

function querystring(key) {
   var re=new RegExp('(?:\\?|&)'+key+'=(.*?)(?=&|$)','gi');
   var r=[], m;
   while ((m=re.exec(document.location.search)) != null) r[r.length]=m[1];
   return r;
}

Si la valeur n'existe pas, un tableau vide est renvoyé.
Si la valeur existe, un tableau est renvoyé avec un élément, la valeur.
S'il existe plusieurs valeurs portant le nom, un tableau contenant chaque valeur est renvoyé.

Exemples:

var param1var = querystring("param1")[0];

document.write(querystring("name"));

if (querystring('id')=='42') alert('We apoligize for the inconvenience.');

if (querystring('button').length>0) alert(querystring('info'));
2
Guffa

Voici une version que JSLint aime:

/*jslint browser: true */
var GET = {};
(function (input) {
    'use strict';
    if (input.length > 1) {
        var param = input.slice(1).replace(/\+/g, ' ').split('&'),
            plength = param.length,
            tmp,
            p;

        for (p = 0; p < plength; p += 1) {
            tmp = param[p].split('=');
            GET[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);
        }
    }
}(window.location.search));

window.alert(JSON.stringify(GET));

Ou si vous avez besoin de plusieurs valeurs pour une clé, comme par exemple. ? key = valeur1 & clé = valeur2 vous pouvez utiliser ceci:

/*jslint browser: true */
var GET = {};
(function (input) {
    'use strict';
    if (input.length > 1) {
        var params = input.slice(1).replace(/\+/g, ' ').split('&'),
            plength = params.length,
            tmp,
            key,
            val,
            obj,
            p;

        for (p = 0; p < plength; p += 1) {
            tmp = params[p].split('=');
            key = decodeURIComponent(tmp[0]);
            val = decodeURIComponent(tmp[1]);
            if (GET.hasOwnProperty(key)) {
                obj = GET[key];
                if (obj.constructor === Array) {
                    obj.Push(val);
                } else {
                    GET[key] = [obj, val];
                }
            } else {
                GET[key] = val;
            }
        }
    }
}(window.location.search));

window.alert(JSON.stringify(GET));
0
msand

Vous pouvez utiliser cette fonction

function getParmFromUrl(url, parm) {
    var re = new RegExp(".*[?&]" + parm + "=([^&]+)(&|$)");
    var match = url.match(re);
    return(match ? match[1] : "");
}
0
Reza

Si vous utilisez déjà une page php,

bit php:

    $json   =   json_encode($_REQUEST, JSON_FORCE_OBJECT);
    print "<script>var getVars = $json;</script>";

js bit:

    var param1var = getVars.param1var;

Mais pour les pages html, la solution de Jose Basilio me convient bien.

Bonne chance!

0
PowerAktar

Vous n'avez pas besoin de faire quelque chose de spécial, en fait. Vous pouvez mélanger JavaScript et PHP ensemble pour obtenir des variables de PHP directement dans JavaScript.

var param1val = '<?php echo $_GET['param1'] ?>';
0
Mark

En utilisant jQuery? J'ai déjà utilisé ceci: http://projects.allmarkedup.com/jquery_url_parser/ et cela a très bien fonctionné.

0
marcc

Cela avait l'air correct:

function gup( name ){
   name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
   var regexS = "[\\?&]"+name+"=([^&#]*)";
   var regex = new RegExp( regexS );
   var results = regex.exec( window.location.href );
   if( results == null )
      return "";
   else
      return results[1];
}

De http://www.netlobo.com/url_query_string_javascript.html

0
agilefall