Comment obtenir la valeur des paramètres GET?
J'ai une URL avec des paramètres GET comme suit:
www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
Je dois obtenir la valeur entière de c. J'ai essayé de lire l'URL, mais je n'ai eu que m2. Comment puis-je faire cela en utilisant JavaScript?
JavaScript lui-même n'a rien d'intégré pour la gestion des paramètres de chaîne de requête.
Le code fonctionnant dans un navigateur (moderne), vous pouvez utiliser l'objet URL (qui fait partie des navigateurs d'API par les navigateurs vers JS):
var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);Pour les navigateurs plus anciens (y compris Internet Explorer), vous pouvez utiliser this polyfill ou le code de la version d'origine de cette réponse antérieure à URL:
Vous pouvez accéder à location.search, ce qui vous donnerait du caractère ? à la fin de l'URL ou au début de l'identificateur de fragment (#foo), selon la première éventualité.
Ensuite, vous pouvez l'analyser avec ceci:
function parse_query_string(query) {
var vars = query.split("&");
var query_string = {};
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
var key = decodeURIComponent(pair[0]);
var value = decodeURIComponent(pair[1]);
// If first entry with this name
if (typeof query_string[key] === "undefined") {
query_string[key] = decodeURIComponent(value);
// If second entry with this name
} else if (typeof query_string[key] === "string") {
var arr = [query_string[key], decodeURIComponent(value)];
query_string[key] = arr;
// If third or later entry with this name
} else {
query_string[key].Push(decodeURIComponent(value));
}
}
return query_string;
}
var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);Vous pouvez obtenir la chaîne de requête à partir de l'URL de la page en cours avec:
var query = window.location.search.substring(1);
var qs = parse_query_string(query);
La plupart des mises en œuvre que j'ai vues manquent le décodage par URL des noms et des valeurs.
Voici une fonction d’utilité générale qui effectue également le décodage d’URL approprié:
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);
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 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 sera non 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 cela fonctionne même lorsque l’URL est pleine de paramètres.
Les fournisseurs de navigateurs ont mis en place un moyen natif 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 par Firefox, Opera, Safari, Chrome et Edge. Pour une liste de support du navigateur voir ici .
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParamshttps://developer.mozilla.org/en-US/docs/Web/API/ URL/URL
Eric Bidelman, ingénieur chez Google, recommande utiliser 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 séparer 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;
}
Puis appelle ç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 sans regex, avec une mutation minimale (seul l'objet params est muté, ce qui, à mon avis, est inévitable dans JS).
C'est génial parce que ça:
- Est récursif
- Gère plusieurs paramètres du même nom
- Bonne gestion des chaînes de paramètres mal formées (valeurs manquantes, etc.)
- Ne casse pas si '=' est dans la valeur
- Effectue un décodage d'URL
- Et enfin, c'est génial parce que ça… 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'];
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";
}
}
Un moyen très simple en utilisant URLSearchParams .
function getParam(param){
return new URLSearchParams(window.location.search).get(param);
}
Il est actuellement pris en charge par Chrome, Firefox, Safari, Edge et autres .
Solution ECMAScript 6:
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 créé 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 5/26/2017, voici une implémentation ES7 (fonctionne avec les étapes 0, 1, 2 ou 3 de Babel présélectionnées):
const getUrlParams = url => `${url}?`.split('?')[1]
.split('&').reduce((params, pair) =>
((key, val) => key ? {...params, [key]: val} : params)
(...`${pair}=`.split('=').map(decodeURIComponent)), {});
Quelques tests:
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 une implémentation de TypeScript:
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
},
{}
)
Mise à jour 13/02/2019, voici une implémentation TypeScript mise à jour qui fonctionne avec TypeScript 3.
interface IParams { [key: string]: string }
const paramReducer = (params: IParams, pair: string): IParams => {
const [key, value] = `${pair}=`.split('=').map(decodeURIComponent)
return key.length > 0 ? { ...params, [key]: value } : params
}
const getUrlParams = (search: string): IParams =>
`${search}?`.split('?')[1].split('&').reduce<IParams>(paramReducer, {})
J'utilise la bibliothèque parseUri . Cela 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 conseillé par Andy E en répondant à cette question , ce n’est pas bon pour la performance de votre script de construire de manière répétée différentes chaînes de regex, d’exécuter des boucles, etc. pour obtenir une valeur unique. J'ai donc mis au point un script plus simple qui renvoie tous les paramètres GET dans un seul objet. Vous ne devez l'appeler qu'une seule fois, affecter le résultat à une variable puis, à tout moment dans le futur, obtenir la valeur de votre choix à l'aide de la clé appropriée. Notez qu'il prend également en charge le décodage URI (c'est-à-dire des choses 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;
}
Alors, voici quelques tests du script à 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 de paramètre unique like this index.html? Msg = 1 utilise 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];
}
For All Parameter Value utilise 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, alors 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];
}, []);
}
usage:
getURIParameter("id") // returns the last id or null if not present
getURIParameter("id", true) // returns an array of all ids
cela gère les paramètres vides (les clés présentes sans "=value"), l'exposition à la fois d'une API de récupération de valeurs scalaire et basée sur un tableau, ainsi que le décodage correct des composants d'URI.
Ici, je poste un exemple. Mais c'est dans jQuery. J'espère que cela 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>
Ou si vous ne voulez pas réinventer la roue d'analyse d'URI, utilisez URI.js
Pour obtenir la valeur d'un paramètre nommé foo:
new URI((''+document.location)).search(true).foo
Qu'est-ce que cela fait est
- Convertissez document.location en chaîne (c'est un objet)
- Transmettez cette chaîne au constructeur de classe URI.js
- Appelez la fonction search () pour obtenir la partie recherche (requête) de l'URL
(passer à true lui dit de sortir un objet) - Accédez à la propriété foo sur l'objet résultant pour obtenir la valeur
Voici un violon pour cela .... http://jsfiddle.net/m6tett01/12/
Moyen simple
function getParams(url){
var regex = /[?&]([^=#]+)=([^&#]*)/g,
params = {},
match;
while(match = regex.exec(url)) {
params[match[1]] = match[2];
}
return params;
}
puis appelez-le comme getParams (url)
// 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 d'ici: http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html
// http:localhost:8080/path?param_1=a¶m_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à de bonnes réponses, mais je les ai trouvées inutilement complexes et difficiles à comprendre. Ceci est court, simple et renvoie un tableau associatif simple avec les noms de clé correspondant aux noms de jeton dans l'URL.
J'ai ajouté une version avec des commentaires ci-dessous pour ceux qui veulent apprendre.
Notez que cela repose sur jQuery ($ .each) pour sa boucle, que je recommande au lieu de forEach. Je trouve plus simple d'assurer la compatibilité entre navigateurs en utilisant jQuery dans son ensemble, plutôt que de brancher des correctifs individuels pour prendre en charge les nouvelles fonctions non prises en charge par les anciens navigateurs.
Edit: Après avoir écrit cela, j'ai remarqué la réponse d'Eric Elliott, qui est presque la même, bien qu'elle utilise pourChaque, 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 les exemples ci-dessous, nous assumerons cette adresse:
http://www.example.com/page.htm?id=4&name=murray
Vous pouvez affecter les jetons d'URL à votre propre variable:
var tokens = getTokens();
Ensuite, référez-vous à chaque jeton d'URL par son nom, comme suit:
document.write( tokens['id'] );
Cela afficherait "4".
Vous pouvez également simplement faire référence à un nom de jeton de la fonction directement:
document.write( getTokens()['name'] );
... qui imprimerait "murray".
Voici le code source angularJs permettant d'analyser les paramètres de requête url dans un 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 besoin de lire une variable d'URL GET et de compléter une action basée sur le paramètre url. J'ai cherché haut et bas une solution et suis tombé sur ce petit morceau de code. Fondamentalement, il lit l'URL de la page actuelle, effectue une expression régulière sur l'URL, puis enregistre les paramètres d'URL dans un tableau associatif, auquel nous pouvons facilement accéder.
Donc, à titre d'exemple, si nous avions l'URL suivante avec le javascript au bas de la page.
http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July
Tout ce que nous aurions à faire pour obtenir les paramètres id et page doit appeler ceci:
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>
window.location.href.split("?")
puis ignorer le premier index
Array.prototype.slice.call(window.location.href.split("?"), 1)
retourne 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 en tant qu'objet js
Nous pouvons obtenir les valeurs de paramètre c de manière plus simple sans boucler tous les paramètres, voir jQuery ci-dessous 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
"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"**)
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 si le param est dernier ou non.
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;
}
Le plus court chemin:
new URL(location.href).searchParams.get("my_key");
This Gist par Eldon McGuinness est de loin l’implémentation la plus complète de l’analyseur de chaînes de requête JavaScript que j’ai jamais vue.
Malheureusement, c'est écrit comme un plugin jQuery.
Je l'ai réécrit dans Vanilla JS et apporté quelques améliorations:
function parseQuery(str) {
var qso = {};
var qs = (str || document.location.search);
// Check for an empty querystring
if (qs == "") {
return qso;
}
// Normalize the querystring
qs = qs.replace(/(^\?)/, '').replace(/;/g, '&');
while (qs.indexOf("&&") != -1) {
qs = qs.replace(/&&/g, '&');
}
qs = qs.replace(/([\&]+$)/, '');
// Break the querystring into parts
qs = qs.split("&");
// Build the querystring object
for (var i = 0; i < qs.length; i++) {
var qi = qs[i].split("=");
qi = qi.map(function(n) {
return decodeURIComponent(n)
});
if (typeof qi[1] === "undefined") {
qi[1] = null;
}
if (typeof qso[qi[0]] !== "undefined") {
// If a key already exists then make this an object
if (typeof (qso[qi[0]]) == "string") {
var temp = qso[qi[0]];
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]] = [];
qso[qi[0]].Push(temp);
qso[qi[0]].Push(qi[1]);
} else if (typeof (qso[qi[0]]) == "object") {
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]].Push(qi[1]);
}
} else {
// If no key exists just set it as a string
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]] = qi[1];
}
}
return qso;
}
// DEMO
console.log(parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab"));Voir aussi this Fiddle .
Utilisez le dojo. Aucune autre solution ici est aussi courte ou aussi bien testée:
require(["dojo/io-query"], function(ioQuery){
var uri = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ";
var query = uri.substring(uri.indexOf("?") + 1, uri.length);
var queryObject = ioQuery.queryToObject(query);
console.log(queryObject.c); //prints m2-m3-m4-m5
});
PHP parse_str copieur .. :)
// Handles also array params well
function parseQueryString(query) {
var pars = (query != null ? query : "").replace(/&+/g, "&").split('&'),
par, key, val, re = /^([\w]+)\[(.*)\]/i, ra, ks, ki, i = 0,
params = {};
while ((par = pars.shift()) && (par = par.split('=', 2))) {
key = decodeURIComponent(par[0]);
// prevent param value going to be "undefined" as string
val = decodeURIComponent(par[1] || "").replace(/\+/g, " ");
// check array params
if (ra = re.exec(key)) {
ks = ra[1];
// init array param
if (!(ks in params)) {
params[ks] = {};
}
// set int key
ki = (ra[2] != "") ? ra[2] : i++;
// set array param
params[ks][ki] = val;
// go on..
continue;
}
// set param
params[key] = val;
}
return params;
}
var query = 'foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last';
var params = parseQueryString(query);
console.log(params)
console.log(params.foo) // 1
console.log(params.bar) // The bar!
console.log(params.arr[0]) // a0
console.log(params.arr[1]) // a1
console.log(params.arr.s) // as
console.log(params.arr.none) // undefined
console.log("isset" in params) // true like: isset($_GET['isset'])
/*
// in php
parse_str('foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last', $query);
print_r($query);
Array
(
[foo] => 1
[bar] => The bar!
[arr] => Array
(
[0] => a0
[1] => a1
[s] => as
[2] => last
)
[isset] =>
)*/
Le moyen le plus simple d'utiliser la méthode replace():
À partir de la chaîne urlStr:
_paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');
_ou à partir du courant URL:
_paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');
_Explication:
document.URL- interface renvoie l'emplacement du document (URL de la page) sous forme de chaîne.replace()- cette méthode retourne une nouvelle chaîne avec tout ou partie des correspondances d'un modèle remplacé par un remplacement./.*param_name=([^&]*).*/- the expression régulière le motif placé entre des barres obliques, ce qui signifie:- _
.*_ - un ou plusieurs caractères, - _
param_name=_ - nom du paramètre qui est sélectionné, - _
()_ - groupe dans une expression régulière, - _
[^&]*_ - un ou plusieurs caractères autres que _&_, - _
|_ - alternance, - _
$1_ - référence au premier groupe de l'expression régulière.
- _
_var urlStr = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
var c = urlStr.replace(/.*c=([^&]*).*|(.*)/, '$1');
var notExisted = urlStr.replace(/.*not_existed=([^&]*).*|(.*)/, '$1');
console.log(`c === '${c}'`);
console.log(`notExisted === '${notExisted}'`);_Vous pouvez ajouter une zone de saisie, puis demander à l'utilisateur de copier la valeur dans celle-ci ... c'est très simple:
<h1>Hey User! Can you please copy the value out of the location bar where it says like, &m=2? Thanks! And then, if you could...paste it in the box below and click the Done button?</h1>
<input type='text' id='the-url-value' />
<input type='button' value='This is the Done button. Click here after you do all that other stuff I wrote.' />
<script>
//...read the value on click
Ok, sérieusement cependant ... J'ai trouvé ce code et il semble bien fonctionner:
http://www.developerdrive.com/2013/08/turning-the-querystring-into-a-json-object-using-javascript/
function queryToJSON() {
var pairs = location.search.slice(1).split('&');
var result = {};
pairs.forEach(function(pair) {
pair = pair.split('=');
result[pair[0]] = decodeURIComponent(pair[1] || '');
});
return JSON.parse(JSON.stringify(result));
}
var query = queryToJSON();
J'aime écrire sténographie autant que possible:
URL: example.com/mortgage_calc.htm?pmts=120&intr=6.8&prin=10000
Vanille Javascript:
for ( var vObj = {}, i=0, vArr = window.location.search.substring(1).split('&');
i < vArr.length; v = vArr[i++].split('='), vObj[v[0]] = v[1] ){}
// vObj = {pmts: "120", intr: "6.8", prin: "10000"}
Solution élégante et fonctionnelle
Créons un objet contenant les noms de paramètres d'URL sous forme de clés, nous pouvons ensuite extraire facilement le paramètre par son nom:
// URL: https://example.com/?test=true&orderId=9381
// Build an object containing key-value pairs
const urlParams = window.location.search
.split('?')[1]
.split('&')
.map(keyValue => keyValue.split('='))
.reduce((params, [key, value]) => {
params[key] = value;
return params;
}, {});
// Return URL parameter called "orderId"
return urlParams.orderId;
J'ai développé un outil JavaScript pour le faire en une étape facile
Commencez par copier ce lien de script dans la tête de votre code HTML:
<script src="https://booligoosh.github.io/urlParams/urlParams.js"></script>
Ensuite, obtenez simplement la valeur de c en utilisant urlParams.c ou urlParams['c']. Simple!
Vous pouvez voir une vraie démo en utilisant vos valeurs ici.
N'oubliez pas non plus que j'ai développé cela, mais qu'il s'agit d'une solution simple et sans souci à votre problème. Cet outil inclut également le décodage des caractères hexadécimaux, ce qui peut souvent être utile.
Je préfère utiliser les ressources disponibles plutôt que de réinventer la façon d'analyser ces paramètres.
- Analyser l'URL en tant qu'objet
- Extraire la partie paramètres de recherche
- Transformez les searchParams d’un Iterator en un tableau avec l’extension du tableau.
- Réduisez le tableau clé-valeur dans un objet.
const url = 'http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
const params = [... new URL(url).searchParams.entries()]
.reduce((a, c) => Object.assign(a, {[c[0]]:c[1]}), {})
console.log(params);Un liner et IE11 amical:
> (window.location.href).match('c=([^&]*)')[1]
> "m2-m3-m4-m5"
Voici une solution que je trouve un peu plus lisible - mais il faudra un shim .forEach() pour <IE8:
var getParams = function () {
var params = {};
if (location.search) {
var parts = location.search.slice(1).split('&');
parts.forEach(function (part) {
var pair = part.split('=');
pair[0] = decodeURIComponent(pair[0]);
pair[1] = decodeURIComponent(pair[1]);
params[pair[0]] = (pair[1] !== 'undefined') ?
pair[1] : true;
});
}
return params;
}
Voici ma solution: jsfiddle
La méthode ci-dessous renvoie un dictionnaire contenant les paramètres de l'URL donnée. Dans le cas où il n'y a pas de paramètres, il sera nul.
function getParams(url){
var paramsStart = url.indexOf('?');
var params = null;
//no params available
if(paramsStart != -1){
var paramsString = url.substring(url.indexOf('?') + 1, url.length);
//only '?' available
if(paramsString != ""){
var paramsPairs = paramsString.split('&');
//preparing
params = {};
var empty = true;
var index = 0;
var key = "";
var val = "";
for(i = 0, len = paramsPairs.length; i < len; i++){
index = paramsPairs[i].indexOf('=');
//if assignment symbol found
if(index != -1){
key = paramsPairs[i].substring(0, index);
val = paramsPairs[i].substring(index + 1, paramsPairs[i].length);
if(key != "" && val != ""){
//extend here for decoding, integer parsing, whatever...
params[key] = val;
if(empty){
empty = false;
}
}
}
}
if(empty){
params = null;
}
}
}
return params;
}
Apprendre de nombreuses réponses (comme VaMoose 's, Gnarf ' ou Blixt ').
Vous pouvez créer un objet (ou utiliser l'objet Location) et ajouter une méthode qui vous permet d'obtenir les paramètres d'URL, décodés et avec le style JS:
Url = {
params: undefined,
get get(){
if(!this.params){
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));
}
});
this.params = vars;
}
return this.params;
}
};
Cela permet à la méthode d'être appelée en utilisant simplement Url.get.
La première fois qu'il récupérera l'objet de l'URL, il chargera les objets sauvegardés la prochaine fois.
Exemple
Dans une URL telle que ?param1=param1Value¶m2=param2Value¶m1=param1Value2, les paramètres peuvent être récupérés comme suit:
Url.get.param1 //["param1Value","param1Value2"]
Url.get.param2 //"param2Value"
Pour extraire tous les paramètres d'URL de l'objet de recherche dans window.location en tant que json
export const getURLParams = location => {
const searchParams = new URLSearchParams(location.search)
const params = {}
for (let key of searchParams.keys()) {
params[key] = searchParams.get(key)
}
return params
}
console.log(getURLParams({ search: '?query=someting&anotherquery=anotherthing' }))
// --> {query: "someting", anotherquery: "anotherthing"}