👨‍🚒 🙃 🙇 Comment analyser une URL en JavaScript? 🍱 🧘🏽 🔮

Bonne journée, mes amis!

Je présente à votre attention la traduction de l'article "Comment analyser l'URL en JavaScript: nom d'hôte, chemin, requête, hachage" de Dmitri Pavlutin.

Uniform Resource Locator ou URL pour faire court est un lien vers une ressource Web (page Web, image, fichier). L'URL définit l'emplacement de la ressource et la manière dont elle est reçue - le protocole (http, ftp, mailto).

Par exemple, voici l'URL de cet article:

https://dmitripavlutin.com/parse-url-javascript

Il est souvent nécessaire d'obtenir certains éléments d'une URL. Cela peut être un nom d'hôte (nom d'hôte, dmitripavlutin.com) ou un chemin (chemin, /parse-url-javascript).

Un moyen pratique d'obtenir les composants individuels d'une URL consiste à utiliser le constructeur URL().

Dans cet article, nous parlerons de la structure et des principaux composants d'une URL.

1. Structure de l'URL

Une image vaut mieux que mille mots. Dans l'image ci-dessus, vous pouvez voir les principaux composants de l'URL:

2. Constructeur d'URL ()

Un constructeur URL()est une fonction qui vous permet d'analyser (analyser) les composants URL:

const url = new URL(relativeOrAbsolute [, absoluteBase])

L'argument relativeOrAbsolutepeut être une URL absolue ou relative. Si le premier argument est un lien relatif, alors le deuxième argument ,, absoluteBaseest requis et est l'URL absolue qui est la base du premier argument.

Par exemple, initialisons URL()avec une URL absolue:

const url = new URL('http://example.com/path/index.html')

url.href // 'http://example.com/path/index.html'

Maintenant, combinons les URL relatives et absolues:

const url = new URL('/path/index.html', 'http://example.com')

url.href // 'http://example.com/path/index.html'

La propriété hrefinstance URL()renvoie la chaîne d'URL transmise.

Après avoir créé une instance URL(), vous pouvez accéder aux composants URL. Pour référence, voici l'interface de l'instance URL():

interface URL {
  href:     USVString;
  protocol: USVString;
  username: USVString;
  password: USVString;
  host:     USVString;
  hostname: USVString;
  port:     USVString;
  pathname: USVString;
  search:   USVString;
  hash:     USVString;

  readonly origin: USVString;
  readonly searchParams: URLSearchParams;

  toJSON(): USVString;
}

Ici, le type USVStringsignifie que JavaScript doit renvoyer une chaîne.

3. Chaîne de requête

La propriété url.searchvous permet d'obtenir une chaîne de requête URL commençant par un préfixe ?:

const url = new URL(
    'http://example.com/path/index.html?message=hello&who=world'
)

url.search // '?message=hello&who=world'

S'il n'y a pas de chaîne de requête, elle url.searchrenvoie une chaîne vide (''):

const url1 = new URL('http://example.com/path/index.html')
const url2 = new URL('http://example.com/path/index.html?')

url1.search // ''
url2.search // ''

3.1. Analyse (analyse) d'une chaîne de requête

Au lieu d'obtenir la chaîne de requête d'origine, nous pouvons obtenir ses paramètres.

Un moyen simple de le faire est fourni par l'établissement url.searchParams. La valeur de cette propriété est une instance de l'interface URLSeachParams.

L'objet URLSearchParamsfournit de nombreuses méthodes pour travailler avec les paramètres de chaîne de requête ( get(param), has(param)et ainsi de suite).

Prenons un exemple:

const url = new Url(
    'http://example.com/path/index.html?message=hello&who=world'
)

url.searchParams.get('message') // 'hello'
url.searchParams.get('missing') // null

url.searchParams.get('message')renvoie la valeur du paramètre de messagechaîne de requête.

L'accès à un paramètre inexistant url.searchParams.get('missing')renvoie null.

4. Nom d'hôte (nom d'hôte)

La valeur de la propriété url.hostnameest le nom d'hôte de l'URL:

const url = new URL('http://example.com/path/index.html')

url.hostname // 'example.com'

5. Chemin (chemin)

La propriété url.pathnamecontient le chemin de l'URL:

const url = new URL('http://example.com/path/index.html?param=value')

url.pathname // '/path/index.html'

Si l'URL n'a pas de chemin, elle url.pathnamerenvoie le caractère /:

const url = new URL('http://example.com/');

url.pathname; // '/'

6. Hash

Enfin, le hachage peut être obtenu via une propriété url.hash:

const url = new URL('http://example.com/path/index.html#bottom')

url.hash // '#bottom'

S'il n'y a pas de hachage, il url.hashrenvoie une chaîne vide (''):

const url = new URL('http://example.com/path/index.html')

url.hash // ''

7. Vérification (validation) de l'URL

L'appel du constructeur new URL()crée non seulement une instance, mais valide également l'URL transmise. Si l'URL n'est pas valide, elle est jetée TypeError.

Par exemple, ce http ://example.comn'est pas une URL valide car httpil y a un espace après .

Essayons d'utiliser cette URL:

try {
    const url = new URL('http ://example.com')
} catch (error) {
    error // TypeError, "Failed to construct URL: Invalid URL"
}

Comme la 'http ://example.com'mauvaise URL est new URL('http ://example.com')lancée comme prévu TypeError.

8. Travailler avec l'URL

Les propriétés telles que search, hostname, pathname, hashsont inscriptibles.

Par exemple, modifions le nom d'hôte d'une URL existante de red.comen blue.io:

const url = new URL('http://red.com/path/index.html')

url.href // 'http://red.com/path/index.html'

url.hostname = 'blue.io'

url.href // 'http://blue.io/path/index.html'

Les propriétés origin, searchParamssont en lecture seule.

9. Conclusion

Un constructeur URL()est un moyen très pratique pour analyser (analyser) et valider une URL en JavaScript.

new URL(relativeOrAbsolute, [, absoluteBase]prend une URL absolue ou relative comme premier paramètre. Si le premier paramètre est une URL relative, le deuxième paramètre doit être une URL absolue - la base du premier argument.

Une fois instancié URL(), vous pouvez accéder aux principaux composants de l'URL:

url.search - chaîne de requête d'origine
url.searchParams- une instance URLSearchParamspour obtenir les paramètres de la chaîne de requête
url.hostname - nom d'hôte
url.pathname - façon
url.hash - valeur de hachage

Comment analyser une URL en JavaScript?