Get url parameter jquery ou comment obtenir des valeurs de chaîne de requête dans js

J'ai vu beaucoup d'exemples jQuery où la taille et le nom des paramètres sont inconnus. Mon url n'aura jamais que 1 Chaîne:

http://example.com?sent=yes

Je veux juste détecter:

  1. existe-t-il sent?
  2. est-ce égal à "Oui"?
480
demandé sur Sameer Kazi 2013-10-21 13:55:33

30 réponses

Meilleure solution ici.

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

Et c'est comment vous pouvez utiliser cette fonction en supposant que l'URL est,
http://dummy.com/?technology=jquery&blog=jquerybyexample.

var tech = getUrlParameter('technology');
var blog = getUrlParameter('blog');
986
répondu Sameer Kazi 2018-05-30 05:04:37

Extrait de code JQuery pour obtenir les variables dynamiques stockées dans l'url en tant que paramètres et les stocker en tant que variables JavaScript prêtes à être utilisées avec vos scripts:

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return decodeURI(results[1]) || 0;
    }
}

Exemple. com? param1 = nom & param2= & id = 6

$.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null

Exemple de paramètres avec des espaces

http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));  
//output: Gold%20Coast



console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast
158
répondu Reza Baradaran Gazorisangi 2017-05-31 12:09:01

Solution de 2018

Nous avons: http://example.com?sent=yes

let searchParams = new URLSearchParams(window.location.search)

Ne envoyé existe?

searchParams.has('sent') // true

Est-ce égal à "Oui"?

let param = searchParams.get('sent')

Et puis il suffit de le comparer.

115
répondu Optio 2018-08-16 07:50:40

Je colle toujours ceci comme une ligne. Maintenant params a les vars:

params={};location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){params[k]=v})

Multi-doublé:

var params={};
window.location.search
  .replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str,key,value) {
    params[key] = value;
  }
);

En tant que Fonction

function getSearchParams(k){
 var p={};
 location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){p[k]=v})
 return k?p[k]:p;
}

Que vous pourriez utiliser comme:

getSearchParams()  //returns {key1:val1, key2:val2}

Ou

getSearchParams("key1")  //returns val1
73
répondu AwokeKnowing 2017-02-28 22:36:11

Peut-être qu'il est trop tard. Mais cette méthode est très facile et simple

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

Mise à JOUR
Nécessite le plugin url: plugins.jquery.com/url
Merci-Ripounet

39
répondu Sariban D'Cl 2015-04-02 11:55:06

Ou vous pouvez utiliser cette petite fonction soignée, car Pourquoi des solutions trop compliquées?

function getQueryParam(param) {
    location.search.substr(1)
        .split("&")
        .some(function(item) { // returns first occurence and stops
            return item.split("=")[0] == param && (param = item.split("=")[1])
        })
    return param
}

Qui semble encore mieux lorsqu'il est simplifié et onelined:

Tl; dr solution à une ligne

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
result:
queryDict['sent'] // undefined or 'value'

, Mais que faire si vous avez obtenu caractères codés ou à valeurs multiples touches?

Vous feriez mieux de voir cette réponse: Comment puis-je obtenir des valeurs de chaîne de requête en JavaScript?

Sneak peak

"?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> queryDict
a: ["1", "5", "t e x t"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> queryDict["a"][1] // "5"
> queryDict.a[1] // "5"
28
répondu Qwerty 2017-05-23 12:02:48

Encore une autre fonction alternative...

function param(name) {
    return (location.search.split(name + '=')[1] || '').split('&')[0];
}
28
répondu rodnaph 2016-09-29 10:51:12

Peut - être voudriez-vous jeter un coup d'œil à Dentist JS? (avertissement: j'ai écrit le code)

Code:

document.URL == "http://helloworld.com/quotes?id=1337&author=kelvin&message=hello"
var currentURL = document.URL;
var params = currentURL.extract();
console.log(params.id); // 1337
console.log(params.author) // "kelvin"
console.log(params.message) // "hello"

Avec Dentist JS, vous pouvez appeler la fonction extract () sur toutes les chaînes (par exemple, document.URL.extract ()) et vous récupérez un HashMap de tous les paramètres trouvés. Il est également personnalisable pour traiter les délimiteurs et tout.

Version Minifiée

10
répondu kelvintaywl 2015-04-13 08:54:24

Celui-ci est simple et a fonctionné pour moi

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
}

Donc, si votre url est http://www.yoursite.com?city=4

Essayez ceci

console.log($.urlParam('city'));
10
répondu Shuhad zaman 2016-10-25 06:59:57

function GetRequestParam(param)
{
	var res = null;
	try{
		var qs = decodeURIComponent(window.location.search.substring(1));//get everything after then '?' in URI
		var ar = qs.split('&');
		$.each(ar, function(a, b){
			var kv = b.split('=');
			if(param === kv[0]){
				res = kv[1];
				return false;//break loop
			}
		});
	}catch(e){}
	return res;
}
5
répondu p_champ 2017-03-24 06:47:31

J'espère que cela aidera.

 <script type="text/javascript">
   function getParameters() {
     var searchString = window.location.search.substring(1),
       params = searchString.split("&"),
       hash = {};

     if (searchString == "") return {};
     for (var i = 0; i < params.length; i++) {
       var val = params[i].split("=");
       hash[unescape(val[0])] = unescape(val[1]);
     }

     return hash;
   }

    $(window).load(function() {
      var param = getParameters();
      if (typeof param.sent !== "undefined") {
        // Do something.
      }
    });
</script>
4
répondu Tarun Gupta 2014-11-18 12:49:48

Il y a cette grande bibliothèque: https://github.com/allmarkedup/purl

Ce qui vous permet de faire simplement

url = 'http://example.com?sent=yes';
sent = $.url(url).param('sent');
if (typeof sent != 'undefined') { // sent exists
   if (sent == 'yes') { // sent is equal to yes
     // ...
   }
}

L'exemple suppose que vous utilisez jQuery. Vous pouvez également l'utiliser comme JavaScript simple, la syntaxe serait alors un peu différente.

3
répondu Michael Konečný 2015-03-23 20:50:58

Cela peut être exagéré, mais il existe une bibliothèque assez populaire maintenant disponible pour analyser les URI, appelée URI.js .

Exemple

var uri = "http://example.org/foo.html?technology=jquery&technology=css&blog=stackoverflow";
var components = URI.parse(uri);
var query = URI.parseQuery(components['query']);
document.getElementById("result").innerHTML = "URI = " + uri;
document.getElementById("result").innerHTML += "<br>technology = " + query['technology'];

// If you look in your console, you will see that this library generates a JS array for multi-valued queries!
console.log(query['technology']);
console.log(query['blog']);
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.17.0/URI.min.js"></script>

<span id="result"></span>
3
répondu alexw 2016-02-13 20:28:12

En utilisant URLSearchParams:

var params = new window.URLSearchParams(window.location.search);
console.log(params.get('name'));
3
répondu Xin 2018-08-30 05:39:58

Essayez cette démo de travail http://jsfiddle.net/xy7cX/

API:

Cela devrait aider :)

Code

var url = "http://myurl.com?sent=yes"

var pieces = url.split("?");
alert(pieces[1] + " ===== " + $.inArray("sent=yes", pieces));
2
répondu Tats_innit 2013-10-21 10:00:09

Cela vous donnera un bel objet à travailler avec

    function queryParameters () {
        var result = {};

        var params = window.location.search.split(/\?|\&/);

        params.forEach( function(it) {
            if (it) {
                var param = it.split("=");
                result[param[0]] = param[1];
            }
        });

        return result;
    }

Puis;

    if (queryParameters().sent === 'yes') { .....
2
répondu Brian F 2014-08-22 05:25:14

Ceci est basé sur la réponse de Gazoris , mais URL décode les paramètres afin qu'ils puissent être utilisés lorsqu'ils contiennent des données autres que des chiffres et des lettres:

function urlParam(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    // Need to decode the URL parameters, including putting in a fix for the plus sign
    // https://stackoverflow.com/a/24417399
    return results ? decodeURIComponent(results[1].replace(/\+/g, '%20')) : null;
}
2
répondu Stephen Ostermiller 2017-05-23 11:54:59

Si simple, vous pouvez utiliser n'importe quelle url et obtenir la valeur

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

Exemple D'Utilisation

// query string: ?first=value1&second=&value2
var foo = getParameterByName('first'); // "value1"
var bar = getParameterByName('second'); // "value2" 

Remarque: Si un paramètre est présent plusieurs fois (?tout d'abord=valeur1&la seconde=valeur2), vous obtiendrez la première valeur (valeur1) et de la deuxième valeur (valeur2).

2
répondu ImBS 2016-09-16 06:19:59

Il y a un autre exemple avec l'utilisation de URI.JS bibliothèque.

Exemple répond aux questions exactement comme demandé.

var url = 'http://example.com?sent=yes';
var urlParams = new URI(url).search(true);
// 1. Does sent exist?
var sendExists = urlParams.sent !== undefined;
// 2. Is it equal to "yes"?
var sendIsEqualtToYes = urlParams.sent == 'yes';

// output results in readable form
// not required for production
if (sendExists) {
  console.log('Url has "sent" param, its value is "' + urlParams.sent + '"');
  if (urlParams.sent == 'yes') {
    console.log('"Sent" param is equal to "yes"');
  } else {
    console.log('"Sent" param is not equal to "yes"');
  }
} else {
  console.log('Url hasn\'t "sent" param');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.2/URI.min.js"></script>
2
répondu userlond 2016-10-19 02:37:03

Version Coffeescript de la réponse de Sameer

getUrlParameter = (sParam) ->
  sPageURL = window.location.search.substring(1)
  sURLVariables = sPageURL.split('&')
  i = 0
  while i < sURLVariables.length
    sParameterName = sURLVariables[i].split('=')
    if sParameterName[0] == sParam
      return sParameterName[1]
    i++
1
répondu mr.musicman 2015-03-06 17:15:12

Une légère amélioration de la réponse de Sameer, cache les paramètres en fermeture pour éviter d'analyser et de boucler tous les paramètres à chaque appel

var getURLParam = (function() {
    var paramStr = decodeURIComponent(window.location.search).substring(1);
    var paramSegs = paramStr.split('&');
    var params = [];
    for(var i = 0; i < paramSegs.length; i++) {
        var paramSeg = paramSegs[i].split('=');
        params[paramSeg[0]] = paramSeg[1];
    }
    console.log(params);
    return function(key) {
        return params[key];
    }
})();
1
répondu streaver91 2015-07-04 16:00:57

J'utilise ceci et cela fonctionne. http://codesheet.org/codesheet/NF246Tzs

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


var first = getUrlVars()["id"];
1
répondu studio-klik 2016-02-13 22:29:26

Avec vanilla JavaScript, vous pouvez facilement prendre les paramètres (emplacement.recherche), obtenir la sous-chaîne (sans le ?) et le transformer en un tableau, en le divisant par'&'.

Lorsque vous parcourez urlParams, vous pouvez ensuite diviser à nouveau la chaîne avec ' = 'et l'ajouter à l'objet' params ' en tant qu'objet [elmement [0]] = element[1]. Super simple et facile d'accès.

Http://www.website.com/?error=userError&type=handwritten

            var urlParams = location.search.substring(1).split('&'),
                params = {};

            urlParams.forEach(function(el){
                var tmpArr = el.split('=');
                params[tmpArr[0]] = tmpArr[1];
            });


            var error = params['error'];
            var type = params['type'];
1
répondu DDT 2016-05-06 14:45:47

Que se passe-t-il s'il y a un paramètre & In URL comme filename="p&g.html" & uid = 66

Dans ce cas, la 1ère fonction ne fonctionnera pas correctement. J'ai donc modifié le code

function getUrlParameter(sParam) {
    var sURLVariables = window.location.search.substring(1).split('&'), sParameterName, i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
}
1
répondu user562451 2016-05-20 19:27:27

Certes, j'ajoute ma réponse à une question trop répondue, mais cela a les avantages de:

-- ne dépend pas des bibliothèques extérieures, y compris jQuery

-- Ne pas polluer l'espace de noms global de la fonction, en étendant 'String'

-- Ne pas créer de données globales et effectuer un traitement inutile après la correspondance trouvée

-- Gérer les problèmes d'encodage et accepter (en supposant) le nom de paramètre non codé

-- Éviter explicite for boucles

String.prototype.urlParamValue = function() {
    var desiredVal = null;
    var paramName = this.valueOf();
    window.location.search.substring(1).split('&').some(function(currentValue, _, _) {
        var nameVal = currentValue.split('=');
        if ( decodeURIComponent(nameVal[0]) === paramName ) {
            desiredVal = decodeURIComponent(nameVal[1]);
            return true;
        }
        return false;
    });
    return desiredVal;
};

Alors vous l'utiliseriez comme:

var paramVal = "paramName".urlParamValue() // null if no match
1
répondu BaseZen 2016-07-30 19:37:53

Si vous voulez trouver un paramètre spécifique à partir d'une url spécifique:

function findParam(url, param){
  var check = "" + param;
  if(url.search(check )>=0){
      return url.substring(url.search(check )).split('&')[0].split('=')[1];
  }
}  

var url = "http://www.yourdomain.com/example?id=1&order_no=114&invoice_no=254";  
alert(findParam(url,"order_no"));
1
répondu Wahid Masud 2018-03-19 17:07:14

Une autre solution qui utilise jQuery et JSON, de sorte que vous pouvez accéder aux valeurs des paramètres via un objet.

var loc = window.location.href;
var param = {};
if(loc.indexOf('?') > -1)
{
    var params = loc.substr(loc.indexOf('?')+1, loc.length).split("&");

    var stringJson = "{";
    for(var i=0;i<params.length;i++)
    {
        var propVal = params[i].split("=");
        var paramName = propVal[0];
        var value = propVal[1];
        stringJson += "\""+paramName+"\": \""+value+"\"";
        if(i != params.length-1) stringJson += ",";
    }
    stringJson += "}";
    // parse string with jQuery parseJSON
    param = $.parseJSON(stringJson);
}

En supposant que votre URL est http://example.com/?search=hello+world&language=en&page=3

Après cela, il ne s'agit que d'utiliser les paramètres comme ceci:

param.language

Pour retourner

en

L'utilisation la plus utile de ceci est de l'exécuter au chargement de la page et d'utiliser une variable globale pour utiliser les paramètres partout où vous pourriez en avoir besoin.

Si votre paramètre contient des valeurs numériques, analysez simplement valeur.

parseInt(param.page)

, Si il n'y a pas de paramètres param sera juste un objet vide.

0
répondu Niksuski 2017-10-26 12:49:19
http://example.com?sent=yes

Meilleure solution ici.

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, '    '));
};

Avec la fonction ci-dessus, vous pouvez obtenir des valeurs de paramètres individuels:

getUrlParameter('sent');
0
répondu Naami 2018-09-19 16:14:15
$.urlParam = function(name) {
  var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
  return results[1] || 0;
}
-1
répondu Aftab Uddin 2014-11-18 12:50:27

Utilisez ceci

$.urlParam = function(name) {
  var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
  return results[1] || 0;
}
-1
répondu ddfsf 2015-04-24 09:16:28