Comment obtenir des paramètres URL avec JavaScript

Les paramètres URL (également appelés paramètres de chaîne de requête ou variables URL) sont utilisés pour envoyer de petites quantités de données entre les pages ou entre le client et le serveur via URL. Ils peuvent contenir diverses informations utiles telles que les requêtes de recherche, les recommandations de liens, les informations sur les produits, les préférences des utilisateurs, etc.

Cet article vous montrera comment analyser et manipuler les paramètres d'URL à l'aide de JavaScript.

Points clés

• Les paramètres URL, ou paramètres de chaîne de requête, sont utilisés pour envoyer de petites quantités de données entre les pages ou entre les clients et les serveurs via des URL, et peuvent contenir des informations utiles telles que les requêtes de recherche, les recommandations de liens, les informations sur le produit, les préférences des utilisateurs, etc.
• L'interface UrlSearchParams dans les navigateurs modernes permet de l'analyse et de la manipulation faciles des paramètres d'URL, y compris: get() pour renvoyer la première valeur associée à un paramètre de recherche donné; utilisé pour renvoyer toutes les valeurs associées à un paramètre spécifique. has() getAll() Pour les navigateurs plus anciens, le polyfill peut être utilisé ou les développeurs peuvent créer leur propre fonction d'analyse de chaîne de requête qui reçoit la chaîne de requête de l'URL et renvoie les données au format objet.
• Il est important de noter que le format de paramètre URL n'est pas clairement défini et peut varier, et les développeurs doivent tester et ajuster le code en fonction de cas d'utilisation spécifiques. Si vous avez besoin de manipuler les URL plus complexes, vous pouvez utiliser des bibliothèques spécifiques telles que la corde de requête et médiatiser uri.js.

Obtenir des paramètres URL

Cela est devenu beaucoup plus facile dans les navigateurs modernes, grâce à l'interface UrlSearchParams. Il définit une série de méthodes d'utilité pour gérer les chaînes de requête pour les URL.

Supposons que notre URL soit

, nous pouvons utiliser

pour obtenir la chaîne de requête: https://example.com/?product=shirt&color=blue&newuser&size=m window.location.search

Ensuite, nous pouvons analyser les paramètres de la chaîne de requête en utilisant UrlSearchParams:

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

Nous pouvons ensuite appeler l'une de ses méthodes au résultat.

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

par exemple,

renverra la première valeur associée au paramètre de recherche donné:

URLSearchParams.get()

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

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

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

Autres méthodes utiles

Vérifiez si les paramètres existent

Vous pouvez utiliser

pour vérifier si un paramètre spécifique existe:

URLSearchParams.has()

Obtenez toutes les valeurs du paramètre

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

Vous pouvez utiliser

pour renvoyer toutes les valeurs associées à un paramètre spécifique:

URLSearchParams.getAll()

Paramètres d'itération

<code class="language-javascript">console.log(urlParams.getAll('size'));
// ['m']

// 以编程方式添加第二个size参数。
urlParams.append('size', 'xl');

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

UrlSearchParams fournit également certaines méthodes d'itérateur d'objets couramment utilisées qui vous permettent d'itérer sur ses clés, valeurs et entrées:

<code class="language-javascript">const keys = urlParams.keys(),
      values = urlParams.values(),
      entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, blue, , m

for (const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: blue
// newuser:
// size: m</code>

Prise en charge du navigateur

La prise en charge du navigateur pour UrlSearchParams est bonne. Au moment de la rédaction du moment de la rédaction, il est soutenu par tous les principaux navigateurs.

Si vous devez prendre en charge les navigateurs plus âgés (comme Internet Explorer), vous pouvez utiliser Polyfill. ou , vous pouvez continuer à lire le reste de ce tutoriel et apprendre à en écrire vous-même.

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

Continuons à utiliser l'URL utilisé dans la section précédente:

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

Il s'agit d'une fonction qui fournit tous les paramètres d'URL en tant qu'objet concis:

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

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

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

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

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

(La partie de démonstration de codepen est omise ici car le code de codepen ne peut pas être intégré directement)

choses à savoir avant d'utiliser cette fonction

• Notre fonction suppose que les paramètres sont séparés par des caractères &, comme indiqué dans la spécification W3C. Cependant, le format de paramètre URL n'est généralement pas bien défini, vous pouvez donc parfois voir ; ou & en tant que délimiteurs.
• Si le paramètre n'a pas de signe égal ou a un signe égal mais aucune valeur, notre fonction est toujours valide.
• Les valeurs des paramètres de répétition seront placées dans le tableau.

Si vous n'avez besoin que d'une fonction que vous pouvez mettre dans votre code, alors c'est fait maintenant. Si vous voulez comprendre comment fonctionne une fonction, lisez la suite.

La section suivante suppose que vous comprenez un javascript, y compris les fonctions, les objets et les tableaux. Si vous avez besoin d'une revue, consultez la référence JavaScript MDN.

Comment fonctionne la fonction

En général, cette fonction prend la chaîne de requête de l'URL (la pièce après la marque d'interrogation ? et avant la marque de livre #) et publie les données sous forme d'objet concise.

Tout d'abord, cette ligne de code signifie que si nous spécifions une URL, nous obtenons tout après le point d'interrogation, sinon, utilisons simplement l'URL de la fenêtre:

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

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

<code class="language-javascript">console.log(urlParams.getAll('size'));
// ['m']

// 以编程方式添加第二个size参数。
urlParams.append('size', 'xl');

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

Si une chaîne de requête existe, nous commencerons à l'analyser. Tout d'abord, nous devons nous assurer de supprimer la pièce qui commence par #, car elle ne fait pas partie de la chaîne de requête:

<code class="language-javascript">const keys = urlParams.keys(),
      values = urlParams.values(),
      entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, blue, , m

for (const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: blue
// newuser:
// size: m</code>

Maintenant, nous pouvons diviser la chaîne de requête en ses composants:

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

Cela nous donnera un tableau comme indiqué ci-dessous:

<code class="language-javascript">function getAllUrlParams(url) {
  // 从url（可选）或窗口获取查询字符串
  var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

  // 我们将在这里存储参数
  var obj = {};

  // 如果存在查询字符串
  if (queryString) {
    // #后面的内容不是查询字符串的一部分，所以去掉它
    queryString = queryString.split('#')[0];

    // 将查询字符串拆分为其组成部分
    var arr = queryString.split('&');

    for (var i = 0; i < arr.length; i++) {
      // 分离键和值
      var a = arr[i].split('=');

      // 设置参数名称和值（如果为空则使用'true'）
      var paramName = a[0];
      var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

      // （可选）保持大小写一致
      paramName = paramName.toLowerCase();
      if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

      // 如果paramName以方括号结尾，例如colors[]或colors[2]
      if (paramName.match(/\[(\d+)?\]$/)) {
        // 如果不存在，则创建键
        var key = paramName.replace(/\[(\d+)?\]/, '');
        if (!obj[key]) obj[key] = [];

        // 如果它是索引数组，例如colors[2]
        if (paramName.match(/\[\d+\]$/)) {
          // 获取索引值并在适当的位置添加条目
          var index = /\[(\d+)\]/.exec(paramName)[1];
          obj[key][index] = paramValue;
        } else {
          // 否则将值添加到数组的末尾
          obj[key].push(paramValue);
        }
      } else {
        // 我们正在处理字符串
        if (!obj[paramName]) {
          // 如果不存在，则创建属性
          obj[paramName] = paramValue;
        } else if (obj[paramName] && typeof obj[paramName] === 'string') {
          // 如果属性存在并且是字符串，则将其转换为数组
          obj[paramName] = [obj[paramName]];
          obj[paramName].push(paramValue);
        } else {
          // 否则添加属性
          obj[paramName].push(paramValue);
        }
      }
    }
  }

  return obj;
}</code>

Ensuite, nous allons itérer ce tableau et diviser chaque élément en clés et valeurs, que nous allons bientôt mettre dans notre objet:

<code class="language-javascript">getAllUrlParams().product; // 'shirt'
getAllUrlParams().color; // 'blue'
getAllUrlParams().newuser; // true
getAllUrlParams().nonexistent; // undefined
getAllUrlParams('http://test.com/?a=abc').a; // 'abc'</code>

Attribuez des clés et des valeurs à une seule variable. S'il n'y a pas de valeur de paramètre, nous le définirons sur true pour indiquer que le nom du paramètre existe. Vous pouvez modifier ce paramètre comme vous le souhaitez en fonction de votre cas d'utilisation:

<code class="language-javascript">var queryString = url ? url.split('?')[1] : window.location.search.slice(1);</code>

éventuellement, vous pouvez définir tous les noms et valeurs de paramètres sur minuscules. De cette façon, vous pouvez éviter les situations où quelqu'un envoie du trafic à l'URL, comme example=TRUE au lieu de example=true et votre script se casse. (J'ai vu cela se produire.) Cependant, si votre chaîne de requête doit être sensible à la casse, vous pouvez omettre cette partie à volonté:

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

Ensuite, nous devons traiter divers types d'entrées que nous pouvons recevoir dans paramName. Il peut s'agir d'un tableau indexé, d'un tableau non indexé ou d'une chaîne normale.

S'il s'agit d'un tableau d'index, nous voulons que le paramValue correspondant soit un tableau et insérer la valeur dans la position correcte. S'il s'agit d'un tableau non indexé, nous voulons que le paramValue correspondant soit un tableau et y pousse les éléments. S'il s'agit d'une chaîne, nous voulons créer une propriété régulière sur l'objet et y attribuer paramValue, sauf si la propriété existe déjà, auquel cas nous voulons ajouter la converti existante en un tableau et Poussez le passé dans paramValue dans ce tableau. paramValue

Pour illustrer cela, voici quelques exemples d'entrées, et la sortie que nous attendons:

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

C'est le code qui implémente cette fonction:

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

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

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

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

Si votre URL a des caractères spéciaux codés, tels que des espaces (codés comme

), vous pouvez également les décoder pour obtenir la valeur d'origine comme indiqué ci-dessous:

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

veillez à ne pas décoder ce qui a été décodé ou si votre script se trompera, surtout si les pourcentages sont impliqués.

Quoi qu'il en soit, félicitations! Maintenant, vous savez comment obtenir des paramètres d'URL et espérons apprendre d'autres conseils en cours de route.

Conclusion

Le code de cet article convient aux cas d'utilisation les plus courants où vous obtenez des paramètres de requête URL. Si vous traitez des cas de bord, tels que des séparateurs inhabituels ou des formats spéciaux, assurez-vous de tester et de régler en conséquence.

Si vous voulez en faire plus avec l'URL, vous pouvez utiliser des bibliothèques spécifiques telles que la corde de requête et médiatiser uri.js. Cependant, comme il s'agit essentiellement d'une opération de chaîne, il est plus logique d'utiliser Pure JavaScript en général. Que vous utilisiez votre propre code ou que vous utilisiez une bibliothèque, assurez-vous de tout vérifier et assurez-vous qu'il fonctionne pour votre cas d'utilisation.

Si vous aimez jouer avec les chaînes, consultez notre article sur la division des chaînes en sous-chaînes, la conversion des chaînes en nombres et la conversion des nombres en chaînes et nombres ordinaux. Pour des connaissances JavaScript plus approfondies, lisez notre livre "JavaScript: From Newbie to Ninja, deuxième édition".

(La partie FAQ est omise ici car le contenu est fortement dupliqué à partir du texte)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!