Fermer

janvier 14, 2020

Obtenir les paramètres d'URL avec JavaScript –


Les paramètres d'URL (également appelés paramètres de chaîne de requête ou variables d'URL) sont utilisés pour envoyer de petites quantités de données de page en page, ou de client à serveur via une URL. Ils peuvent contenir toutes sortes d'informations utiles, telles que des requêtes de recherche, des références de liens, des informations sur les produits, les préférences des utilisateurs, etc.

Dans cet article, nous allons vous montrer comment analyser et manipuler les paramètres d'URL à l'aide de JavaScript. [19659003] Pour plus de pertinence et de précision, cet article a été mis à jour en 2020.

Obtention d'un paramètre d'URL

Dans les navigateurs modernes, cela est devenu beaucoup plus facile, grâce à l'interface URLSearchParams . Cela définit une multitude de méthodes utilitaires pour travailler avec la chaîne de requête d'une URL.

En supposant que notre URL est https://example.com/?product=shirt&color=blue&newuser&size=m nous pouvons récupérer la chaîne de requête à l'aide de window.location.search :

 const queryString = window.location.search;
console.log (queryString);
//? produit = chemise & couleur = bleu & nouvel utilisateur & taille = m

Nous pouvons ensuite analyser les paramètres de la chaîne de requête à l'aide de URLSearchParams :

 const urlParams = new URLSearchParams (queryString);

Ensuite, nous appelons l'une de ses méthodes sur le résultat.

Par exemple, URLSearchParams.get () renverra la première valeur associée au paramètre de recherche donné:

 const product = urlParams .get ('produit')
console.log (produit);
// chemise

const color = urlParams.get ('color')
console.log (couleur);
// bleu

const newUser = urlParams.get ('newuser')
console.log (newUser);
// chaîne vide

Autres méthodes utiles

Vérification de la présence d'un paramètre

Vous pouvez utiliser URLSearchParams.has () pour vérifier si un certain paramètre existe:

 console.log (urlParams. a («produit»));
// vrai

console.log (urlParams.has ('méthode de paiement'));
// faux

Obtention de toutes les valeurs d'un paramètre

Vous pouvez utiliser URLSearchParams.getAll () pour renvoyer toutes les valeurs associées à un paramètre particulier:

 console.log (urlParams.getAll (' Taille'));
// [ 'm' ]

// Ajout par programmation d'un deuxième paramètre de taille.
urlParams.append ('taille', 'xl');

console.log (urlParams.getAll ('size'));
// [ 'm', 'xl' ]

Itération sur les paramètres

URLSearchParams fournit également des méthodes d'itérateur Object familières, vous permettant d'itérer sur ses clés, valeurs et entrées:

 const
  keys = urlParams.keys (),
  values ​​= urlParams.values ​​(),
  entrées = urlParams.entries ();

for (const key of keys) console.log (key);
// produit, couleur, nouvel utilisateur, taille

for (const value of values) console.log (value);
// chemise, bleu,, m

pour (entrée constante des entrées) {
  console.log (`$ {entry [0]}: $ {entry [1]}`);
}
// produit: chemise
// Couleur bleue
// nouvel utilisateur:
// taille M

Prise en charge du navigateur

La prise en charge du navigateur pour URLSearchParams est bonne . Au moment de la rédaction de ce document, il est pris en charge dans tous les principaux navigateurs.

 Données sur la prise en charge de la fonction urlsearchparams sur les principaux navigateurs de caniuse.com

Un polyfill est disponible si vous devez prendre en charge les navigateurs hérités tels que Internet Explorer. Ou vous pouvez suivre le reste de ce didacticiel et apprendre à rouler le vôtre.

Rouler votre propre fonction d'analyse de chaîne de requête

Restons avec l'URL que nous utilisions dans le précédent section:

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

Voici une fonction pour vous donner tous les paramètres d'URL en tant qu'objet soigné:

 fonction getAllUrlParams (url) {

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

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

  // s'il existe une chaîne de requête
  if (queryString) {

    // les trucs après # ne font pas partie de la chaîne de requête, donc enlevez-le
    queryString = queryString.split ('#') [0];

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

    pour (var i = 0; i <arr.length; i ++) {
      // séparer 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]) === 'non défini'? vrai: a [1];

      // (facultatif) garder la casse cohérente
      paramName = paramName.toLowerCase ();
      if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase ();

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

        // crée une 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
          index var = /\19459082 diplomé /.exec(paramName)[1];
          obj [key][index]  = paramValue;
        } autre {
          // sinon ajouter la valeur à la fin du tableau
          obj [key] .push (paramValue);
        }
      } autre {
        // nous avons affaire à une chaîne
        if (! obj [paramName]) {
          // s'il n'existe pas, créer 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 ajouter la propriété
          obj [paramName] .push (paramValue);
        }
      }
    }
  }

  return obj;
}

Vous verrez bientôt comment cela fonctionne, mais d'abord, voici 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 voici une démo avec laquelle vous pourrez jouer.

Voir le Pen rQGWpP par SitePoint ( @SitePoint ) sur CodePen . [19659037] 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 W3C . Cependant, le format des paramètres d'URL en général n'est pas pas clairement défini vous pouvez donc parfois voir ; ou & amp; comme séparateurs . . [19659039] Notre fonction fonctionne toujours si un paramètre n'a pas de signe égal ou s'il a un signe égal mais pas de valeur.

  • Les valeurs des paramètres en double sont mises dans un tableau.

Si vous vouliez juste 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 un peu de JavaScript, y compris les fonctions, les objets et les tableaux. Si vous avez besoin d'une mise à jour, consultez la référence JavaScript MDN .

Fonctionnement de la fonction

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

Tout d'abord, cette ligne indique, si nous avons spécifié une URL, récupérez tout après 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 allons commencer à l'analyser. Nous devons d'abord nous assurer de raser la partie à partir de # car elle ne fait pas partie de la chaîne de requête:

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

Nous pouvons maintenant diviser 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']

Ensuite, nous allons parcourir ce tableau et diviser chaque élément en une clé et une valeur, que nous allons bientôt mettre dans 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 la définissons sur true pour indiquer que le nom du paramètre existe. N'hésitez pas à modifier cela en fonction de votre cas d'utilisation:

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

Facultativement, vous pouvez définir tous les noms et valeurs de paramètres en minuscules. De cette façon, vous pouvez éviter les situations où quelqu'un envoie du trafic vers une URL avec example = TRUE au lieu de example = true et vos ruptures de script. (J'ai vu cela se produire.) Cependant, 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 === 'string') paramValue = paramValue.toLowerCase ();

Ensuite, nous devons traiter les différents types d'entrée que nous pouvons recevoir dans paramName . Il peut s'agir d'un tableau indexé, d'un tableau non indexé ou d'une chaîne régulière.

S'il s'agit d'un tableau indexé, nous voulons que le paramètre paramValue correspondant soit un tableau, avec la valeur insérée à la bonne position. S'il s'agit d'un tableau non indexé, nous voulons que le paramètre paramValue correspondant soit un tableau avec l'élément poussé dessus. S'il s'agit d'une chaîne, nous voulons créer une propriété régulière sur l'objet et lui affecter la paramValue à moins que la propriété existe déjà, auquel cas nous voulons convertir l'existant paramValue dans un tableau et poussez la paramValue entrante dessus.

Pour illustrer cela, voici un exemple d'entrée, avec la sortie que nous attendons:

 getAllUrlParams ('http : //example.com/? couleurs [0] = rouge et couleurs [2] = vert et 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", "nouvel 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+] $ /)) {
    index var = /\19459082 diplomé /.exec(paramName)[1];
    obj [key][index]  = paramValue;
  } autre {
    obj [key] .push (paramValue);
  }
} autre {
  if (! 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 encodés comme des espaces (encodés en % 20 ), vous pouvez également les décoder pour obtenir l'original valeur comme ceci:

 // suppose un paramètre d'URL de test = a% 20space

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

Faites juste attention à ne pas décoder quelque chose qui est déjà décodé, sinon votre script se trompera, surtout si des pourcentages sont impliqués. Vous savez maintenant comment obtenir un paramètre d'URL et, espérons-le, vous avez trouvé d'autres astuces en cours de route.

Conclusion

Le code de cet article fonctionne pour les cas d'utilisation les plus courants où vous obtiendrez un paramètre de requête d'URL. Si vous travaillez avec 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 en faire plus avec les URL, des bibliothèques spécifiques sont disponibles, telles que chaîne de requête et Medialize URI.js . Mais comme il s'agit essentiellement de manipulation de chaînes, il est souvent logique d'utiliser simplement du JavaScript. Que vous utilisiez votre propre code ou que vous alliez avec une bibliothèque, assurez-vous de tout vérifier et assurez-vous que cela fonctionne pour vos cas d'utilisation.




Source link