Récupère le paramètre url jquery ou comment obtenir les valeurs d'une chaîne de requête en js
J'ai vu beaucoup d'exemples jQuery où la taille et le nom du paramètre sont inconnus. Mon URL ne va jamais avoir 1 chaîne:
http://example.com?sent=yes
Je veux juste détecter:
- Est-ce que
sentexiste? - Est-ce égal à "oui"?
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 utiliser cette fonction en supposant que l'URL est,http://dummy.com/?technology=jquery&blog=jquerybyexample.
var tech = getUrlParameter('technology');
var blog = getUrlParameter('blog');
Solution de 2019
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')
et puis juste le comparer.
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
exemple params 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
Je colle toujours ceci comme une ligne. Maintenant params a les vars:
params={};location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){params[k]=v})
multiligne:
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
Peut-être que c'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"
});
UPDATE
Nécessite le plugin url: plugins.jquery.com/url
Merci -Ripounet
Encore une autre fonction alternative ...
function param(name) {
return (location.search.split(name + '=')[1] || '').split('&')[0];
}
Ou vous pouvez utiliser cette petite fonction, parce que 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
}
ce qui est encore meilleur lorsqu'il est simplifié et unique:
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é'] // indéfini ou 'valeur'
Mais que se passe-t-il si vous avez des caractères codés ou des clés à plusieurs valeurs ?
Vous feriez mieux de voir cette réponse: Comment puis-je obtenir les valeurs de chaîne de requête en JavaScript?
Sneak pic
"?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"
Utiliser URLSearchParams:
var params = new window.URLSearchParams(window.location.search);
console.log(params.get('name'));
Faites attention à la compatibilité (généralement très bien, mais IE et Edge, cela peut être une histoire différente, vérifiez la référence compatible: https://developer.mozilla.org/en-US/ docs/Web/API/URLSearchParams )
Peut-être voudrez-vous jeter un œil à Dentist JS ? (disclaimer: 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 en principe appeler la fonction extract () sur toutes les chaînes (par exemple, document.URL.extract ()) et vous récupérez une carte de hachage de tous les paramètres trouvés. Il est également personnalisable de traiter les délimiteurs et tous.
Version réduite <1ko
Celui-ci est simple et a travaillé 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'));
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;
}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>
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, la syntaxe serait alors un peu différente.
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 = valeur1 & second = valeur2), vous obtiendrez la première valeur (valeur1) et la seconde valeur sous la forme (valeur2).
C'est peut-être un peu exagéré, mais il existe maintenant une bibliothèque assez populaire pour analyser les URI, appelée RI.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>Cela vous donnera un bel objet pour 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') { .....
Il existe un autre exemple d'utilisation de la bibliothèque RI.js .
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>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.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');
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));
Ceci est basé sur la réponse de Gazoris , mais l'URL décode les paramètres pour 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;
}
Certes, j'ajoute ma réponse à une question à réponse excessive, mais cela présente les avantages suivants:
- Ne dépend pas de bibliothèques extérieures, y compris jQuery
- Espace de noms global non polluant, en étendant 'String'
- Ne pas créer de données globales et effectuer des traitements inutiles après la correspondance trouvée
- Gestion des problèmes d'encodage et acceptation (en supposant) d'un nom de paramètre non codé
- Éviter les boucles for 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
Une légère amélioration par rapport à la réponse de Sameer, cache les paramètres dans la fermeture pour éviter l'analyse et la lecture en boucle de 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];
}
})();
Avec Vanilla JavaScript, vous pouvez facilement prendre les paramètres (location.search), obtenir la sous-chaîne (sans le?) Et le transformer en tableau, en le divisant par '&'.
Lorsque vous parcourez urlParams, vous pouvez alors scinder à 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'];
Coffeescript version 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++
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"));
Que se passe-t-il s'il y a un paramètre d'URL dans le nom de fichier = "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]);
}
}
}
J'utilise ceci 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"];
Une autre solution utilisant jQuery et JSON permet d’accéder aux valeurs de paramètre 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 reste plus qu'à utiliser les paramètres suivants:
param.language
rendre
en
L'utilisation la plus utile de cette méthode consiste à l'exécuter au chargement de la page et à 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, il suffit d'analyser la valeur.
parseInt(param.page)
S'il n'y a pas de paramètres, param sera simplement un objet vide.