106 votes

Comment analyser les paramètres d'une requête URL en Javascript ?

Duplicata possible :
Utiliser le paramètre get de l'url en javascript
Comment puis-je obtenir des valeurs de chaîne de requête en JavaScript ?

En Javascript, comment puis-je obtenir les paramètres d'une chaîne d'URL (pas l'URL actuelle) ?

comme :

www.domain.com/?v=123&p=hello

Puis-je obtenir "v" et "p" dans un objet JSON ?

154voto

Jan Turoň Points 6598

2,5 ans après que la question a été posée vous pouvez utiliser en toute sécurité Array.forEach . Comme le suggère @ricosrealm, decodeURIComponent a été utilisé dans cette fonction.

function getJsonFromUrl(url) {
  if(!url) url = location.search;
  var query = url.substr(1);
  var result = {};
  query.split("&").forEach(function(part) {
    var item = part.split("=");
    result[item[0]] = decodeURIComponent(item[1]);
  });
  return result;
}

En fait, ce n'est pas si simple Voir l'évaluation par les pairs dans les commentaires, en particulier :

  • routage par hachage (@cmfolio)
  • paramètres du tableau (@user2368055)
  • utilisation correcte du decodeURIComponent et de l'élément non codé = (@AndrewF)
  • non codé + (ajouté par moi)

Pour plus de détails, voir Article du MDN et RFC 3986 .

Peut-être que ceci devrait aller à codereview SE, mais voici un code plus sûr et sans regexp :

function getSearchOrHashBased(url) {
  if(!url) url = location.href;
  var question = url.indexOf("?");
  var hash = url.indexOf("#");
  if(hash==-1 && question==-1) return {};
  if(hash==-1) hash = url.length;
  return question==-1 || hash==question+1
    ? url.substring(hash)
    : url.substring(question+1, hash);
}

// use query = getSearchOrHashBased(location.href)
// or query = location.search.substring(1)
function getJsonFromUrl(query) {
  var result = {};
  query.split("&").forEach(function(part) {
    if(!part) return;
    part = part.split("+").join(" "); // + to space, regexp-free version
    var eq = part.indexOf("=");
    var key = eq>-1 ? part.substr(0,eq) : part;
    var val = eq>-1 ? decodeURIComponent(part.substr(eq+1)) : "";
    var from = key.indexOf("[");
    if(from==-1) result[decodeURIComponent(key)] = val;
    else {
      var to = key.indexOf("]",from);
      var index = decodeURIComponent(key.substring(from+1,to));
      key = decodeURIComponent(key.substring(0,from));
      if(!result[key]) result[key] = [];
      if(!index) result[key].push(val);
      else result[key][index] = val;
    }
  });
  return result;
}

Cette fonction peut analyser même des URL comme

var url = "?foo%20e[]=a%20a&foo+e[%5Bx%5D]=b&foo e[]=c";
// {"foo e": ["a a",  "c",  "[x]":"b"]}

var obj = getJsonFromUrl(url)["foo e"];
for(var key in obj) { // Array.forEach would skip string keys here
  console.log(key,":",obj[key]);
}
/*
  0 : a a
  1 : c
  [x] : b
*/

7 ans après que la question a été posée la fonctionnalité a été normalisée en tant que URLSearchParams et 4 années supplémentaires après, l'accès peut être simplifié comme suit Proxy comme expliqué dans cette réponse Cependant, ce nouveau logiciel ne peut pas analyser l'exemple d'url ci-dessus.

35voto

James Allardice Points 81162

Vous pouvez obtenir un objet JavaScript contenant les paramètres avec quelque chose comme ceci :

var regex = /[?&]([^=#]+)=([^&#]*)/g,
    url = window.location.href,
    params = {},
    match;
while(match = regex.exec(url)) {
    params[match[1]] = match[2];
}

L'expression régulière pourrait sans doute être améliorée. Elle recherche simplement des paires nom-valeur, séparées par des caractères = et les paires sont elles-mêmes séparées par des & caractères (ou un = pour le premier). Pour votre exemple, le résultat serait le suivant :

{v: "123", p: "hello"}

Voici une exemple de travail .

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X