Obtenir les paramètres d'URL avec JavaScript –

Vous voulez donc obtenir un paramètre à partir d'une URL? Les paramètres d'URL (également appelés paramètres de chaîne de requête ou variables d'URL) peuvent contenir de nombreuses données utiles, notamment des informations sur le produit, les préférences de l'utilisateur, des renvois de liens, etc.

Commençons!

Obtention d'un paramètre d'URL

vous avez l'URL suivante:

 http://example.com/?product=shirt&color=blue&newuser&size=m

Voici une fonction qui vous donne tous les paramètres d’URL sous la forme d’un objet soigné:

 function getAllUrlParams (url) {

  // récupère la chaîne de requête à partir de l'URL (facultatif) ou de la fenêtre
  var queryString = url? url.split ('?') [1]: window.location.search.slice (1);

  // nous allons stocker les paramètres ici
  var obj = {};

  // si la chaîne de requête existe
  if (queryString) {

    // les choses après # ne font pas partie de la chaîne de requête, alors débarrassez-vous-en
    queryString = queryString.split ('#') [0];

    // diviser notre chaîne de requête en ses composants
    var arr = queryString.split ('&');

    pour (var i = 0; i <arr.length; i ++) {
      // sépare les clés et les valeurs
      var a = arr [i] .split ('=');

      // définit le nom et la valeur du paramètre (utilisez 'true' s'il est vide)
      var paramName = a [0];
      var paramValue = typeof (a [1]) === 'indéfini'? vrai: a [1];

      // (facultatif) garder la casse cohérente
      nomParam = nomParam.toLowerCase ();
      if (typeof paramValue === 'chaîne') paramValue = paramValue.toLowerCase ();

      // si le paramName se termine par des crochets, par ex. couleurs [] ou couleurs [2]
      if (paramName.match (/  [(d+)?] $ /)) {

        // crée la clé si elle n'existe pas
        var key = paramName.replace (/  [(d+)?] /, '');
        if (! obj [key]) obj [key] = [];

        // s'il s'agit d'un tableau indexé, par exemple couleurs [2]
        if (paramName.match (/  [d+] $ /)) {
          // récupère la valeur d'index et ajoute l'entrée à la position appropriée
          var index = /[(d+)]/.exec(paramName)[1];
          obj [key][index]  = paramValue;
        } autre {
          // sinon ajoute la valeur à la fin du tableau
          obj [key] .push (paramValue);
        }
      } autre {
        // nous avons affaire à une chaîne
        si (! obj [paramName]) {
          // s'il n'existe pas, crée une propriété
          obj [paramName] = paramValue;
        } else if (obj [paramName] && typeof obj [paramName] === 'chaîne') {
          // si la propriété existe et qu'il s'agit d'une chaîne, convertissez-la en tableau
          obj [paramName] = [obj[paramName]];
          obj [paramName] .push (paramValue);
        } autre {
          // sinon ajoute la propriété
          obj [paramName] .push (paramValue);
        }
      }
    }
  }

  retour obj;
}

Vous verrez bientôt comment cela fonctionne, mais voici d’abord quelques exemples d’utilisation:

 getAllUrlParams (). Product; // 'chemise'
getAllUrlParams (). color; // 'bleu'
getAllUrlParams (). newuser; // vrai
getAllUrlParams (). inexistant; // indéfini
getAllUrlParams ('http://test.com/?a=abc') .a; // 'abc'

Et une démo pour vous amuser.

Voir le stylo rQGWpP de SitePoint ( @SitePoint ) sur CodePen . Ce qu'il faut savoir avant d'utiliser cette fonction

• Notre fonction suppose que les paramètres sont séparés par le caractère & comme indiqué dans les spécifications du W3C . Cependant, le format de paramètre d'URL en général est pas clairement défini vous pouvez donc parfois voir ou & comme des séparateurs . [19659015] Notre fonction fonctionne toujours si un paramètre n'a pas de signe égal ou s'il n'a pas de signe égal mais pas de valeur.

• Les valeurs des paramètres en double sont placées dans un tableau.

Si vous vouliez simplement une fonction vous pouvez déposer dans votre code, vous avez terminé maintenant. Si vous souhaitez comprendre le fonctionnement de la fonction, lisez la suite.

La section suivante suppose que vous connaissez certains codes JavaScript, y compris des fonctions, des objets et des tableaux. Si vous avez besoin d'un rappel, consultez la référence JavaScript de MDN .

Fonctionnement de la fonction

Dans l'ensemble, la fonction prend une chaîne de requête d'URL (la partie après le ? et avant le # ) et crache les données dans un objet soigné.

Premièrement, cette ligne indique que si nous avons spécifié une URL, tout ce qui suit le point d'interrogation, mais sinon, utilisez simplement l'URL de la fenêtre:

 var queryString = url? url.split ('?') [1]: window.location.search.slice (1);

Ensuite, nous allons créer un objet pour stocker nos paramètres:

 var obj = {};

Si la chaîne de requête existe, nous commencerons à l’analyser. Tout d’abord, nous devons nous assurer que la partie commençant par # n’est pas comprise dans la chaîne de requête:

 queryString = queryString.split ('#') [0];

Nous pouvons maintenant scinder la chaîne de requête en ses composants:

 var arr = queryString.split ('&');

Cela nous donnera un tableau qui ressemble à ceci:

 ['product=shirt', 'color=blue', 'newuser', 'size=m']

Nous allons ensuite parcourir ce tableau et scinder chaque élément en une clé et une valeur, que nous ajouterons bientôt à notre objet:

 var a = arr [i] .split ('=');

Attribuons la clé et une valeur à des variables individuelles. S'il n'y a pas de valeur de paramètre, nous allons la définir sur true pour indiquer que le nom du paramètre existe. N'hésitez pas à changer cela en fonction de votre cas d'utilisation:

 var paramName = a [0];
var paramValue = typeof (a [1]) === 'indéfini'? vrai: a [1];

Vous pouvez éventuellement définir tous les noms de paramètres et toutes les valeurs en minuscules. De cette façon, vous pouvez éviter les situations dans lesquelles une personne envoie du trafic vers une URL avec exemple = TRUE au lieu de exemple = true et votre script s’est rompu (j’en ai déjà été témoin). Toutefois, si votre chaîne de requête doit être sensible à la casse, n'hésitez pas à omettre cette partie:

 paramName = paramName.toLowerCase ();
if (typeof paramValue === 'chaîne') paramValue = paramValue.toLowerCase ();

Nous devons ensuite traiter des différents types d'entrées que nous pouvons recevoir dans paramName . Cela peut être un tableau indexé, un tableau non indexé ou une chaîne normale.

S'il s'agit d'un tableau indexé, nous voulons que la paramValue correspondante soit un tableau, avec la valeur insérée au bon endroit. position. S'il s'agit d'un tableau non indexé, nous voulons que la paramValue correspondante soit un tableau dans lequel l'élément est appliqué. S'il s'agit d'une chaîne, nous voulons créer une propriété régulière sur l'objet et lui attribuer la paramValue sauf si la propriété existe déjà, auquel cas nous souhaitons convertir le [existant]. paramValue à un tableau et poussez la paramValue entrante sur celle-ci.

Pour illustrer ceci, voici un exemple d'entrée avec le résultat attendu:

 getAllUrlParams ('http : //exemple.com/? couleurs [0] = rouge et couleurs [2] = vert & couleurs [6] = bleu ');
// {"couleurs": [ "red", null, "green", null, null, null, "blue" ]}

getAllUrlParams ('http://example.com/?colors [] = rouge et couleurs [] = vert et couleurs [] = bleu');
// {"couleurs": [ "red", "green", "blue" ]}

getAllUrlParams ('http://example.com/?colors=red&colors=green&colors=blue');
// {"couleurs": [ "red", "green", "blue" ]}

getAllUrlParams ('http://example.com/?product=shirt&color=blue&newuser&size=m');
// {"produit": "chemise", "couleur": "bleu", "nouveau utilisateur": vrai, "taille": "m"}

Et voici le code pour implémenter la fonctionnalité:

 if (paramName.match (/  [(d+)?] $ /)) {
  var key = paramName.replace (/  [(d+)?] /, '');
  if (! obj [key]) obj [key] = [];

  if (paramName.match (/  [d+] $ /)) {
    var index = /[(d+)]/.exec(paramName)[1];
    obj [key][index]  = paramValue;
  } autre {
    obj [key] .push (paramValue);
  }
} autre {
  si (! obj [paramName]) {
    obj [paramName] = paramValue;
  } else if (obj [paramName] && typeof obj [paramName] === 'chaîne') {
    obj [paramName] = [obj[paramName]];
    obj [paramName] .push (paramValue);
  } autre {
    obj [paramName] .push (paramValue);
  }
}

Enfin, nous renvoyons notre objet avec les paramètres et les valeurs.

Si votre URL contient des caractères spéciaux codés, tels que des espaces (codés sous la forme % 20 ), vous pouvez également les décoder pour obtenir l'original. valeur comme ceci:

 // supposons un paramètre url de test = a% 20space

var original = getAllUrlParams (). test; // 'a% 20space'
var decoded = decodeURIComponent (original); // 'un espace'

Faites attention à ne pas décoder quelque chose qui a déjà été décodé, sinon vous risquez de vous tromper, surtout si des pourcentages sont en jeu.

En tout cas, félicitations! Maintenant, vous savez comment obtenir un paramètre d'URL et vous avez peut-être déjà appris d'autres astuces.

Une alternative pour les navigateurs modernes

Si vous n'avez pas besoin de prendre en charge les navigateurs hérités, vous pouvez aussi regarder. sur l'interface URLSearchParams qui définit les méthodes utilitaires permettant d'utiliser la chaîne de requête d'une URL:

 // L'URL est http://example.com/?product=shirt&color=blue&newuser&size=m
const urlParams = new URLSearchParams (window.location.search);
console.log (urlParams.has ('product')); // vrai
console.log (urlParams.get ('produit')); // "chemise"

Il fournit également des méthodes Object connues, telles que clés () valeurs () et entrées () .

. Conclusion

Le code dans cet article fonctionne pour les cas d'utilisation les plus courants où vous obtiendriez un paramètre de requête d'URL. Si vous utilisez des cas marginaux, tels que des séparateurs inhabituels ou un formatage spécial, assurez-vous de tester et d'ajuster en conséquence.

Si vous souhaitez utiliser davantage d'URL, des bibliothèques spécifiques sont disponibles, telles que . Plugin URL jQuery et Medialize URI.js . Comme il s’agit essentiellement d’une manipulation de chaîne, il est souvent logique d’utiliser simplement du JavaScript. Que vous utilisiez votre propre code ou utilisiez une bibliothèque, vérifiez tout et assurez-vous que cela fonctionne pour vos cas d'utilisation.

Cet article a été révisé par les pairs par Jeff Mott Andrew Ray Mev Rael et Dan Prince . Merci à tous les pairs examinateurs de SitePoint pour avoir rendu le contenu de SitePoint le meilleur possible!

Yaphi Berhanu est un développeur Web qui aime aider les gens à améliorer leurs compétences en matière de codage. Il écrit des trucs et astuces sur http://simplestepscode.com . Dans son opinion totalement impartiale, il suggère de le vérifier.