Travailler avec des URL en JavaScript

Écrit par Joe Attardi✏️

Les URL sont un élément essentiel de toute application Web. Si votre application envoie des requêtes à une API, il est important de créer les URL correctes pour ces requêtes. L'API URL, prise en charge dans tous les navigateurs modernes, fournit un moyen d'analyser et de manipuler les URL. Il permet d'accéder facilement aux différentes parties de l'URL.

Comprendre les parties d'une URL

Considérez l'URL suivante :

https://example.com/api/search?query=foo&sort=asc#results

Cette URL est composée des éléments suivants :

• Protocole : https
• Hébergeur : exemple.com
• Nom du chemin : /api/search
• Chaîne de requête : ?query=foo&sort=asc
• Hachage : #résultats

Avec JavaScript moderne, nous pouvons analyser les URL et extraire ces différentes parties selon nos besoins.

Analyse des URL

Dans les navigateurs plus anciens, avant que l'API URL ne soit disponible, les développeurs analysaient les URL en utilisant un élément. Cet élément fournit une analyse d'URL de base. Par exemple, voici une façon d'extraire la chaîne de requête d'une URL :

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

Cependant, cette approche présente certains inconvénients :

• Cela nécessite un environnement DOM, ce qui signifie que cela ne fonctionnerait pas dans un environnement tel que Node.js
• Il n'a pas non plus de gestion des erreurs — si une URL non valide est transmise à l'attribut href, aucune erreur n'est générée

Vous pouvez également utiliser une expression régulière pour analyser les différentes parties de l'URL, mais cela est fastidieux et sujet aux erreurs.

L'utilisation de l'API URL pour analyser les URL est simple. Transmettez simplement l’URL que vous souhaitez analyser au constructeur d’URL. Si la chaîne d'URL est valide, vous obtiendrez un objet URL avec des propriétés pour différentes parties de l'URL :

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

Analyser la chaîne de requête

Vous pouvez accéder à la chaîne de requête d'une URL de deux manières :

• La propriété de recherche, qui est une chaîne contenant la chaîne de requête complète (y compris le caractère ?)
• La propriété searchParams, qui est un objet URLSearchParams

Si vous êtes intéressé par la valeur d'un paramètre particulier dans la chaîne de requête, vous pouvez utiliser sa méthode get pour obtenir le paramètre par son nom :

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

S'il existe plusieurs paramètres portant le même nom, vous pouvez utiliser getAll pour obtenir un tableau contenant toutes les valeurs de ce nom :

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

Création de chaînes de requête

Construire manuellement une chaîne de requête peut être délicat, surtout si des paramètres de requête contiennent des caractères spéciaux qui doivent être échappés. Par exemple, si un paramètre de requête doit contenir un caractère &, vous devrez le coder sous la forme &. Pour couvrir ces situations, vous devez utiliser la fonction encodeURIComponent :

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

Vous pouvez créer la chaîne de requête de manière plus sûre en utilisant l'objet URLSearchParams :

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

Les avantages de l'utilisation d'URLSearchParams incluent :

• Vous n'avez pas à vous soucier des caractères & séparant les paramètres
• Vous n'avez pas besoin d'encoder par URI les valeurs des paramètres
• Vous n'avez pas besoin d'utiliser la concaténation de chaînes

Itération sur les paramètres de requête

Sans objet URLSearchParams, il est un peu difficile de parcourir les paramètres d'une chaîne de requête. Vous devrez diviser les chaînes plusieurs fois — d'abord en groupes de paires clé/valeur, puis à nouveau pour diviser la clé et la valeur :

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

Si les paramètres peuvent contenir des caractères codés, vous devrez également les décoder :

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

Au lieu de cela, vous pouvez utiliser la méthode d'entrées d'URLSearchParams pour parcourir les paires clé/valeur :

let queryString = 'foo=bar';
queryString += '&baz=qux';
queryString += '&tag=' + encodeURIComponent('one&two');
console.log(queryString); // foo=bar&baz=qux&tag=one%26two

Construire une URL complète

Voici un exemple complet de création d'une URL avec une URL de base et quelques paramètres de requête :

const params = new URLSearchParams();
params.append('foo', 'bar');
params.append('baz', 'qux');
params.append('tag', 'one&two');
console.log(params.toString()); // foo=bar&baz=qux&tag=one%26two

Vérification des URL valides

Vous pouvez essayer d'utiliser une expression régulière pour valider une URL, mais il est notoirement difficile de créer une expression régulière qui capture entièrement une chaîne d'URL valide.

Au lieu de cela, vous pouvez accéder à l'API URL. Le constructeur d'URL générera une erreur si vous lui donnez une URL non valide. Vous pouvez l'utiliser pour vérifier si une URL est valide :

function listQueryParams(queryString) {
  queryString.split('&').forEach(param => {
    const [key, value] = param.split('=');
    console.log(`${key}: ${value}`);
  });
}

Avec les navigateurs les plus récents, c'est encore plus simple. Il existe une méthode statique URL.canParse plus récente qui effectue une validation similaire avec une seule ligne de code. Comme la fonction isValidURL ci-dessus, elle prend une chaîne d'URL potentielle et renvoie vrai ou faux en fonction de la validité de la chaîne d'URL.

Création d'URL relatives

L'API URL dispose d'un mécanisme puissant pour résoudre les URL relatives. Normalement, l'argument du constructeur d'URL générera une erreur s'il ne s'agit pas d'une URL complète et valide. Cependant, vous pouvez spécifier un deuxième argument qui sert de base à partir de laquelle créer une URL relative. Si vous utilisez l’approche à deux arguments, le premier argument ne doit pas nécessairement être une URL valide, mais le second oui.

Regardons d'abord un cas simple :

function listQueryParams(queryString) {
  queryString.split('&').forEach(param => {
    const [key, value] = param.split('=');
    console.log(`${key}: ${decodeURIComponent(value)}`);
  });
}

Le constructeur d'URL prend l'URL de base de https://example.com et ajoute le chemin relatif /about, ce qui donne https://example.com/about.

Et celui-ci :

function listQueryParams(queryString) {
  const params = new URLSearchParams(queryString);
  params.entries().forEach(([key, value]) => console.log(`${key}: ${value}`));
}

Vous pourriez vous attendre à ce que ce soit https://example.com/users/profile, mais cela revient en fait à https://example.com/profile. Cela se comporte comme un lien relatif ; il prend le segment du chemin parent, qui est la racine de example.com, puis ajoute un profil.

Regardons un autre exemple d'utilisation d'une URL relative. Vous pouvez également utiliser .. pour remonter la hiérarchie des chemins :

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

Celui-ci sort sur https://example.com/profile. N'oubliez pas que les URL relatives commencent au segment du chemin parent. Ensuite, celui-ci contient .., qui remonte un segment de chemin supplémentaire.

Si vous appelez le constructeur d'URL avec une URL relative et spécifiez une URL invalide ou incomplète pour l'URL de base, vous obtiendrez une erreur. Vous obtiendrez également une erreur si vous utilisez une URL relative sans URL de base complète :

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

Travailler avec l'objet window.location

Vous connaissez peut-être l'objet window.location, qui représente l'URL de la page actuelle. Cet objet possède également des propriétés telles que href et pathname, vous pourriez donc penser qu'il s'agit d'un objet URL. Il s'agit d'un objet différent, un Location, qui a certaines propriétés en commun avec l'URL, mais il en manque également certaines (telles que la propriété searchParams).

Même s'il ne s'agit pas d'un objet URL, vous pouvez toujours utiliser window.location pour construire de nouveaux objets URL. Vous pouvez transmettre window.location au constructeur d'URL pour créer une nouvelle URL complète avec searchParams et tout, en fonction de l'URL actuelle, ou vous pouvez même l'utiliser comme URL de base lors de la construction d'URL relatives :

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

Faire correspondre des modèles dans une URL à l'aide d'URLPattern

L'utilisation d'une URL permet d'obtenir facilement le chemin d'accès à partir d'une URL. Par exemple, dans l'URL https://example.com/api/users/123/profile, le nom du chemin est /api/users/123/profile. Et si nous voulions obtenir uniquement l'ID utilisateur, 123, à partir de cette URL ?

Comme nous en avons discuté plus tôt, il peut être difficile de créer des expressions régulières appropriées pour valider et extraire des parties d'une URL.

Il n'est pas encore disponible dans tous les navigateurs, mais vous pouvez utiliser l'API URLPattern pour faire correspondre et extraire des parties de l'URL, en faisant correspondre les modèles que vous spécifiez. Cela peut être particulièrement utile pour des choses comme le routage côté client dans une application monopage (SPA).

En utilisant l'URL du profil utilisateur comme exemple, créons un URLPattern pour obtenir l'ID utilisateur. Nous pouvons utiliser un caractère : pour désigner un espace réservé nommé, qui peut être utilisé ultérieurement pour faire correspondre cette partie de l'URL :

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

Lorsque vous appelez exec sur un URLPattern, il a besoin d'une URL valide. Il renvoie un objet matcher qui contient des propriétés pour chacune des parties de l'URL (protocole, hôte, chemin d'accès, etc.). Chacune de ces propriétés possède également une propriété groups, qui mappe les noms d'espace réservé comme :userId à leurs valeurs dans l'URL.

Si vous souhaitez uniquement faire correspondre une partie de l'URL, comme le nom du chemin, comme nous l'avons fait ici, vous pouvez également spécifier des caractères génériques dans le modèle d'URL. Ou, au lieu d'une chaîne d'URL, vous pouvez transmettre un objet contenant les parties de l'URL qui vous intéressent :

let queryString = 'foo=bar';
queryString += '&baz=qux';
queryString += '&tag=' + encodeURIComponent('one&two');
console.log(queryString); // foo=bar&baz=qux&tag=one%26two

L'API URLPattern n'est toujours pas disponible dans tous les navigateurs. Au moment de la rédaction, il n’est pas encore pris en charge dans Firefox ou Safari. Vous pouvez consulter les dernières informations de prise en charge du navigateur sur CanIUse.com.

Résumé

L'API URL est une interface polyvalente permettant de construire, valider et manipuler des URL en JavaScript. Son utilisation est plus sûre et moins sujette aux erreurs que l’analyse manuelle ou les expressions régulières. En utilisant un objet URLSearchParams, vous pouvez créer une chaîne de requête sans vous soucier de la concaténation des chaînes ou du codage des caractères spéciaux.

L'API URLPattern va encore plus loin, en prenant en charge les caractères génériques et les espaces réservés nommés, afin que vous puissiez découper et découper les URL pour répondre aux besoins de votre application ! Lectures complémentaires :

• L'interface URL (MDN)
• L'API URLPattern (MDN)

---

Installez-vous avec le suivi des erreurs moderne de LogRocket en quelques minutes :

1. Visitez https://logrocket.com/signup/ pour obtenir un identifiant d'application.
2. Installez LogRocket via NPM ou une balise de script. LogRocket.init() doit être appelé côté client et non côté serveur.

NPM :

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

Balise de script :

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

3.(Facultatif) Installez des plugins pour des intégrations plus approfondies avec votre pile :

• Middleware Redux
• middleware ngrx
• Plugin Vuex

Commencez maintenant

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!