Comment obtenir le paramètre d'URL en utilisant jQuery ou JavaScript simple?


619

J'ai vu beaucoup d'exemples jQuery où la taille et le nom des paramètres sont inconnus.

Mon URL ne comportera qu'une seule chaîne:

http://example.com?sent=yes

Je veux juste détecter:

  1. sentExiste- t- il?
  2. Est-ce égal à "oui"?




Meilleure solution que j'ai jamais vue [ici] [1] [1]: stackoverflow.com/a/901144/3106590
hmfarimani

1
Il y a maintenant un plugin / bibliothèque pour cela, appelé URI.js: github.com/medialize/URI.js
alexw

Réponses:


1211

La meilleure solution ici .

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = 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 : decodeURIComponent(sParameterName[1]);
        }
    }
};

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

var tech = getUrlParameter('technology');
var blog = getUrlParameter('blog');

8
Merci! Mais en copiant ceci, j'ai trouvé une mauvaise surprise, impliquant un espace vide de largeur nulle (\ u200b) vers la fin là-bas. Faire le script a une erreur de syntaxe invisible.
Christofer Ohlsson

11
Retourner un falseou nullpour une recherche vide
Stefano Caravana

4
Cette solution fonctionne assez bien pour moi Je viens d'utiliser var sPageURL = decodeURI (window.location.search.substring (1)); pour convertir% 20 caractères en espaces blancs et aussi je retourne une chaîne vide au lieu de rien si le paramètre ne correspond pas.
Christophe

18
J'ai mis à jour la réponse pour inclure toutes les modifications du code des commentaires au-dessus de ce commentaire.
Rob Evans

7
Le décodage doit être effectué sur la valeur du paramètre (comme le suggère Iouri). Si le décodage est effectué sur l'url (comme dans la réponse), cela ne fonctionnera pas correctement s'il y a une valeur encodée &ou =dans un paramètre.
zakinster

288

Solution à partir de 2020

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

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

Est-ce que envoyé existe ?

searchParams.has('sent') // true

Est-ce égal à "oui"?

let param = searchParams.get('sent')

puis il suffit de le comparer.


16
Je pense que cela n'est pas pris en charge par les navigateurs, alors pourquoi devrait-on l'utiliser? référence - developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
p_champ

1
@p_champ vous avez raison. Mais vous pouvez utiliser polyfill pour URLSearchParams
Optio

2
ne fonctionne pas actuellement dans IE / Edge, il en va de même pour la détection des fonctionnalités: if ('URLSearchParams' in window) { // Browser supports URLSearchParams} voir ici
mfgmicha

4
Assez bien pour moi et mon public cible. caniuse.com/#feat=urlsearchparams
jontsai

4
@p_champ Edge a été pris en charge dans la v17 (avril 2018). Laissez IE mourir.
Ryan DuVal

198

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;
    }
    return decodeURI(results[1]) || 0;
}

example.com?param1=name¶m2=&id=6

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

exemples 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

12
Note: Vous devez decode dans le cas où il y a des caractères spéciaux comme paramètre ou trémas , etc. Ainsi , au lieu de return results[1] || 0;cela devrait êtrereturn decodeURI(results[1]) || 0;
Kai Noack

Juste curieux, pourquoi a-t-il besoin de la || 0pièce car il y a déjà une vérification du résultat, ne retournerait-il pas toujours le tableau de correspondance?
AirWick219

@ AirWick219 une sécurité intégrée appropriée. bien que redondant, ne fait jamais de mal à être prudent
zanderwar

2
Voici, très probablement, la source originale: sitepoint.com/url-parameters-jquery mais cette réponse a quelques nouvelles idées ajoutées
bgmCoder

1
Je ne suis pas sûr que cela vaille la peine d'utiliser jQuery.
Quentin 2

88

Je colle toujours cela comme une seule 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

Hack laid qui modifie la chaîne de recherche ... mais aucun module externe ou jquery requis. Je l'aime.
Bryce

4
@Bryce Il ne modifie en fait pas la chaîne de recherche. le .replace retourne en fait une nouvelle chaîne et ces chaînes retournées sont traitées dans l'objet params.
AwokeKnowing

Agréable, court et, contrairement à la solution acceptée, n'a pas besoin de ré-analyser l'URL chaque fois que vous avez besoin d'une valeur. Pourrait être légèrement amélioré avec replace(/[?&;]+([^=]+)=([^&;]*)/gipour recomposer ";" caractère comme séparateur aussi.
Le Droid

one-liner clair et indolore, meilleure réponse que la réponse acceptée pour moi, pas de libs supplémentaires.
Sam

C'est ce que l'on utiliserait si l'on utilise des hachages au lieu du délimiteur de requête GET (point d'interrogation): var params={};window.location.hash.replace(/[#&]+([^=&]+)=([^&]*)/gi,function(str,key,value){params[key] = value;}); Ceci est utile pour des choses comme AJAX où le hachage dans la fenêtre est mis à jour avec ajax-request mais aussi un utilisateur pour aller à un uri contenant un hachage.
Tommie

48

Encore une autre fonction alternative ...

function param(name) {
    return (location.search.split(name + '=')[1] || '').split('&')[0];
}

le nom doit être une chaîne. A fonctionné comme un charme ~
mintedsky

2
C'est mon préféré. +1 Il convient de noter qu'il s'agit d'un type de recherche "se termine par". Par exemple, si vous passez "Téléphone" pour le nom, et qu'il y a aussi un champ appelé "HomePhone", il peut retourner la valeur de la mauvaise si elle vient en premier dans l'URL.
efreed

2
C'est faux! Par exemple param('t') == param('sent') == 'yes'dans l'exemple OP. Voici une solution: return (location.search.split(new RegExp('[?&]' + name + '='))[1] || '').split('&')[0]; Notez également que vous ne pouvez pas dire si le paramètre existe car vous obtenez une chaîne vide pour les paramètres manquants.
oriadam

Très simple et élégant. Fonctionne comme un rêve. Je vous remercie.
Anjana Silva

// (pour forcer la clé complète à exister au lieu de seulement la dernière partie de la clé)return (location.search.split('?' + name + '=')[1] || location.search.split('&' + name + '=')[1] || '').split('&')[0];
Aaron

45

C'est peut-être 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


2
Celui qui décide de cela doit d'abord vérifier le dépôt. L'utilisation a changé. $ .url.attr ('message') devient $ .url ("requête") et ne donne que la requête complète! Pour obtenir un seul paramètre, je devais: $ .url ("query"). Split ("=") [1] url github link
pseudozach

34

Ou vous pouvez utiliser cette petite fonction intéressante , car pourquoi des solutions trop compliquées?

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

qui a l'air encore mieux une fois simplifié et en ligne:

tl; dr solution à une ligne

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
résultat:
queryDict ['envoyé'] // non défini ou 'valeur'

Mais que faire si vous avez des caractères encodés ou des clés à plusieurs valeurs ?

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"

3
le fractionnement de chaînes est également plus rapide que l'expression régulière. Ce n'est pas un facteur, car l'URL ne sera analysée qu'une seule fois.
Patrick

C'est la solution (la première) qui a parfaitement fonctionné pour moi sur tous les navigateurs - merci!
NickyTheWrench

1
@NickyTheWrench Ravi d'entendre cela, merci! Quoi qu'il en soit, sachez que c'est une solution très simple, si vous obtenez des paramètres d'URL compliqués contenant des caractères spéciaux, vous feriez mieux de vérifier le lien fourni.
Qwerty

@Qwerty yup - mon cas d'utilisation est très simple où le paramètre est toujours le même, etc. (essentiellement exactement ce que l'OP a demandé) Merci encore!
NickyTheWrench

1
@BernardVanderBeken Intéressant, je l'ai corrigé, de toute façon, c'est une solution plutôt très stupide, celle du bas qui prend en charge les caractères encodés et les tableaux est bien meilleure.
Qwerty

33

En utilisant URLSearchParams:

var params = new window.URLSearchParams(window.location.search);
console.log(params.get('name'));

Faites attention à la compatibilité (Généralement, c'est bien, mais IE et Edge peuvent être une histoire différente, vérifiez ceci pour une référence compatible: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams )


La plupart des navigateurs ne peuvent pas utiliser cela.
saf21

URLSearchParams remplace le caractère spécial "+" par un espace. Donc, si votre paramètre d'URL contient un "+", il sera remplacé.
Growler

11

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.votresite.com?city=4

essaye ça

console.log($.urlParam('city'));

10

Vous voudrez peut-être jeter un œil au dentiste 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 essentiellement appeler la fonction extract () sur toutes les chaînes (par exemple, document.URL.extract ()) et vous obtenez un HashMap de tous les paramètres trouvés. Il est également personnalisable pour gérer les délimiteurs et tout.

Version réduite <1kb


5

J'espère que cela vous 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>

5

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



3

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 tout comme du javascript, la syntaxe serait alors un peu différente.


1
Cette bibliothèque n'est plus maintenue, cependant je l'utilise et c'est génial. Assurez-vous que vous utilisez param pas attr pour obtenir ces paramètres de chaîne de requête, comme l'auteur l'a inclus dans leur exemple.
Action Dan

3

Cela pourrait être exagéré, mais il y a une bibliothèque assez populaire maintenant disponible pour les URIs d' analyse syntaxique, 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

Si simple que vous pouvez utiliser n'importe quelle URL et obtenir de 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 (? First = value1 & second = value2), vous obtiendrez la première valeur (value1) et la deuxième valeur comme (value2).


2

Cela vous donnera un bel objet avec lequel travailler

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

Et alors;

    if (queryParameters().sent === 'yes') { .....

diviser (/ \? | \ & /) cela signifie
Selva Ganapathi

2

Ceci est basé sur la réponse de Gazoris , mais l'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

Il existe un autre exemple d'utilisation de la bibliothèque URI.js.

L'exemple répond aux questions exactement comme posées.

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
http://example.com?sent=yes

La meilleure solution ici .

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

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

getUrlParameter('sent');

Réponse parfaite!
Srijani Ghosh

1

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

Une légère amélioration de la réponse de Sameer, cache les paramètres dans la fermeture pour éviter d'analyser et de parcourir 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

J'utilise ça et ça marche. 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

Avec vanilla JavaScript, vous pouvez facilement prendre les paramètres (location.search), obtenir la sous-chaîne (sans le?) Et la transformer en un tableau, en la 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

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

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

- Ne dépendant d'aucune bibliothèque extérieure, y compris jQuery

- Ne pollue pas l'espace de noms des fonctions globales, en étendant 'String'

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

- Gestion des problèmes de codage et acceptation (en supposant) du nom de paramètre non codé

- Éviter les forboucles explicites

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

Ensuite, vous l'utiliseriez comme:

var paramVal = "paramName".urlParamValue() // null if no match

1

Si vous souhaitez rechercher 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"));

0

Une autre solution qui utilise jQuery et JSON, afin que vous puissiez 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 suffit d'utiliser des paramètres comme celui-ci:

param.language

rendre

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 en avez besoin.

Si votre paramètre contient des valeurs numériques, il suffit d'analyser la valeur.

parseInt(param.page)

S'il n'y a pas de paramètres, ce paramsera juste un objet vide.


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

& est incorrectement codé comme "& amp;" dans la réponse ci-dessus, reportez-vous à la bonne réponse stackoverflow.com/a/25359264/73630
Palani

-1

utilisez ceci

$.urlParam = function(name) {
  var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
  return results[1] || 0;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.