Avez-vous déjà voulu comprendre le fonctionnement des URL en JavaScript ? Si oui, alors vous êtes au bon endroit !
Dans cet article, nous approfondirons le sujet de l’analyse d’URL en JavaScript et comprendrons comment accéder à certaines données à partir d’une chaîne d’URL. Nous le ferons en décomposant les composants d’une URL en leurs parties individuelles, telles que le nom d’hôte, le nom de chemin, la requête et le hachage, et en prenant chacun pour un tour.
Nous couvrirons également quelques conseils importants et meilleures pratiques lorsque vous travaillez avec des chaînes d’URL en JavaScript, alors assurez-vous de rester jusqu’à la fin ! En fin de compte, cet article est votre guichet unique pour tout ce qui concerne l’analyse des URL à l’aide de JavaScript. Alors, asseyez-vous et préparez-vous à maîtriser les bases de l’utilisation des URL en JavaScript.
Qu’est-ce que l’analyse d’URL et pourquoi devriez-vous vous en soucier ?
Lorsque vous créez une application Web, comprendre l’analyse d’URL est une compétence essentielle. C’est le processus de décomposer une adresse de page Web en ses parties pour interagir plus facilement avec elle.
En comprenant l’analyse d’URL, vous pouvez tirer pleinement parti de la capacité de votre site Web à naviguer rapidement et facilement dans les pages et les informations.
L’analyse d’URL n’est pas seulement utile pour la navigation ; il fournit également un moyen plus simple de modifier les sites Web et d’accéder aux données. Avec l’analyse d’URL, vous pouvez transmettre des variables et des paramètres à différentes pages à l’aide de la chaîne de requête, créant ainsi des expériences dynamiques pour les utilisateurs en modifiant ce qui apparaît sur la page sans actualiser la page entière.
Vous pouvez également accéder aux bases de données à l’aide de la partie chemin de l’URL afin que votre application Web puisse en récupérer les données sans avoir à les inclure dans un formulaire ou un champ de saisie similaire. Enfin, vous pouvez utiliser des ancres (pièces commençant par #) pour rendre la navigation sur un site plus fluide.
Un aperçu des méthodes d’analyse d’URL JavaScript
Décomposer une URL en ses composants est une partie essentielle du développement Web. En comprenant la structure d’une URL, vous pouvez facilement interagir avec vos services backend et récupérer des données à partir de sources distantes.
Avec JavaScript, il existe plusieurs méthodes que vous pouvez utiliser pour analyser les URL et en obtenir plus d’informations. Ceux-ci inclus URL, URLSearchParams, URLSearchParamsAPI, locationet window.location.
Chaque méthode a ses propres avantages et inconvénients. Jetons un coup d’œil à chacun :
URL: Le natifURLL’objet vous permet de créer des URL, de les manipuler, d’interroger leurs parties ou de définir de nouvelles valeurs pour leurs composants. Il fournit également des fonctionnalités utiles, telles que l’encodage/décodage de chaînes, qui contiennent des informations sensibles telles que des mots de passe ou d’autres données personnelles.URLSearchParams: Cette méthode crée un objet de paires clé-valeur qui correspondent aux paramètres de requête d’une URL. Vous pouvez l’utiliser pour créer différents paramètres et définir leurs valeurs selon vos besoins.URLSearchParamsAPI: Cette API permet d’accéder aux fonctionnalités de base duURLSearchParamsobjet, vous permettant de manipuler les URL de manière puissante, comme pouvoir parcourir tous les éléments d’une URL sans avoir à les analyser manuellement vous-même.location: La propriété renvoie un objet représentant l’emplacement actuel, y compris les composants de nom d’hôte, de chemin d’accès, de recherche et de hachage, ce qui vous permet de créer des liens à partir de votre application sans avoir à créer manuellement des URL chaque fois que vous en avez besoin.window.location: Semblable àlocationcette propriété renvoie également un objet.
Comprendre le nom d’hôte dans l’analyse d’URL JavaScript
Le nom d’hôte est le nom de domaine que vous utilisez pour visiter une page Web ou un site Web. Il ressemble généralement à ceci : www.example.com. Vous pouvez également utiliser des adresses IP dans certains cas, comme https://216.58.208.46.
Vous pouvez obtenir le nom d’hôte de la page actuelle que vous visitez via le location.hostname Méthode API en JavaScript :
let hostname = window.location.hostname;Cette méthode API renvoie une chaîne avec le nom de domaine (nom d’hôte) de la page actuelle que vous visitez (par exemple, www.example.com).
La méthode Hostname API dispose également de deux autres méthodes utiles que vous pouvez utiliser pour renvoyer des informations plus spécifiques sur le nom de domaine, comme les protocoles utilisés (par exemple, http ou https). Ceux-ci sont location.protocol et location.port.
Par exemple, si votre nom d’hôte est www.example.comet que vous utilisez HTTPS pour y accéder, ce code le renverra tel quel :
let protocol = window.location.protocol; // returns "https:"
let port = window.location.port; //returns "" (empty string)Mais si vous utilisez HTTP au lieu de HTTPS, ces deux méthodes renverront ceci à la place :
let protocol = window .location .protocol; // returns "http:"
let port = window .location .port; //returns "80" (default HTTP port number)Comprendre le nom de chemin dans l’analyse d’URL JavaScript
Maintenant que nous comprenons ce que sont le nom d’hôte et les chaînes de requête, examinons la quatrième et dernière partie de l’analyse d’URL : le nom de chemin en JavaScript.
Le nom de chemin décrit l’emplacement d’un fichier ou d’une ressource sur le serveur Web. Il commence par une barre oblique / puis suivi de son nom de répertoire. Disons que vous voulez accéder index.htmlqui se trouve dans le blog dossier, qui contient des films, de la musique, de la littérature, etc. Le nom du chemin ressemblera à ceci : /blog/films/index.html.
Par exemple, si vous stylisez votre page HTML avec un CSS, le nom du chemin vous indiquera où se trouve votre fichier CSS. Dans notre exemple, ce serait quelque chose comme /blog/films/css/style.css.
Voyons comment obtenir le chemin d’accès en utilisant JavaScript. Tout ce que vous avez à faire est d’utiliser cet extrait de code ci-dessous :
let url = new URL('https://example.com/blog/films');
let getpathname = url.pathname; // '/blog/films'Vous pouvez l’essayer par vous-même ici. Par défaut, si vous ne spécifiez pas de fichier spécifique pour vos utilisateurs, alors index.html sera utilisé comme document par défaut dans la plupart des serveurs Web, comme mentionné précédemment.
Fonctionnement des chaînes de requête et des hachages dans l’analyse d’URL JavaScript
Maintenant que vous avez une meilleure compréhension des noms d’hôte, des noms de chemin et des paramètres, examinons les parties suivantes de l’URL : une chaîne de requête et le hachage. Les chaînes de requête et les hachages sont utilisés pour spécifier des parties supplémentaires d’une URL :
- Les chaînes de requête sont très utiles pour transmettre des informations contextuelles sur la page au serveur.
- Le hachage est utilisé pour spécifier une certaine partie de la page à afficher immédiatement après le chargement.
Pour comprendre ce que sont les chaînes de requête et les hachages, examinons cet exemple :
http://example.com/search?q=javascript#hashtag.
Dans cet exemple, q=javascript représente la requête de recherche que nous transmettons à notre serveur et #hashtag représente une ancre dans laquelle nous pouvons faire sauter notre page directement à cette partie de la page après le chargement.
Les chaînes de requête et les hachages sont accessibles à l’aide de window.location objet en JavaScript.
Pour accéder à la chaîne de requête de notre exemple d’URL, nous devons appeler window.location.searchqui nous rendra ?q=javascript.
Pour accéder uniquement à la valeur, nous devons utiliser la syntaxe window.location.search.split('=')[1]ce qui nous donnera javascript.
De même, pour les hachages, nous pouvons utiliser window.location.hashqui nous renverra juste #hashtag.
Travailler avec des URL à l’aide de la syntaxe de déstructuration ES6
La prochaine étape pour comprendre comment analyser une URL en JavaScript consiste à apprendre à utiliser la syntaxe de déstructuration d’ES6. C’est un peu plus avancé que les méthodes précédentes que nous avons couvertes, mais c’est aussi la plus pratique.
En utilisant la syntaxe de déstructuration d’ES6, vous pouvez décomposer des parties d’une URL en variables distinctes. Pour ce faire, il vous suffit d’envelopper l’URL d’accolades et d’utiliser un = signe pour affecter les variables : const { protocol, hostname, port } = new URL(url).
Cela affectera chaque partie de la chaîne d’URL (protocole, nom d’hôte et port) à sa propre variable que vous pourrez utiliser librement dans votre code. Cette méthode est particulièrement utile pour affecter des propriétés au sein d’un objet ou pour fournir des arguments à une fonction.
Exemple:
const { protocol, hostname, port } = new URL(url);
const user = {
protocol: protocol,
domain: hostname,
port: port
};Voyons maintenant quelques exemples :
Exemple 1 : Analyser le nom d’hôte à partir d’une URL
Pour analyser un nom d’hôte, utilisez la hostname propriété d’une instance de URLSearchParams. Cela renverra la partie du nom d’hôte d’une URL donnée :
let href = "https://www.example.com:8080/search#fragment?q=hello";
let url = new URLSearchParams(href);
console.log(url.hostname); // Output: www.example.comDans l’exemple ci-dessus, nous déconnectons le nom d’hôte dans notre console et obtenons une sortie de www.example.com.
C’est ainsi que nous découvrons facilement quelle partie du nom d’hôte d’une URL donnée utilise JavaScript.
Exemple 2 : analyse du nom de chemin à partir d’une URL
Nous pouvons également analyser le chemin d’accès d’une URL donnée en utilisant JavaScript comme ceci :
let href = "https://www.example.com/path/to/file";
let url = new URLSearchParams(href);
console.log(url.pathname); // Output: /path/to/fileDans notre exemple de code, nous créons une instance de URLSearchParamspuis utilisez son pathName propriété pour accéder uniquement au segment de chemin à partir de cette URL particulière ; qui, dans ce cas, est `/path.
Conclusion
Dans l’ensemble, l’analyse d’URL est une partie importante du développement Web, et JavaScript fournit un ensemble puissant d’options pour analyser facilement les URL.
Les propriétés de nom d’hôte, de chemin d’accès, de requête et de hachage vous permettent de décomposer les URL en leurs composants, ce qui facilite la création d’applications Web et la manipulation de contenu.
En suivant les étapes décrites dans ce guide, vous serez en mesure d’analyser les URL rapidement et facilement, vous rapprochant un peu plus de vos objectifs.