Comment extraire le hash à la fin d’une URL avec Javascript ?

Bienvenue dans ce tutoriel ou nous vous montrons comment récupérer le hash à la fin d’une URL avec JavaScript.

Exploration de l’extraction du hash (fragment) d’une URL avec JavaScript

Les développeurs ajoutent un hash, également appelé fragment d’URL, à la fin d’une URL pour marquer une section spécifique d’un document référencé. Explorons comment récupérer ces informations en utilisant JavaScript.

Cas pratiques :

1. Navigation dans une page Web avec des onglets. Supposons que vous ayez une page web avec plusieurs onglets, chacun étant associé à un hachage différent dans l’URL. Vous pouvez utiliser JavaScript pour extraire le hash de l’URL lorsque l’utilisateur clique sur un onglet. Ensuite, vous pouvez afficher le contenu correspondant à l’onglet sélectionné.
2. Application de suivi des transactions. Si vous développez une application de suivi des transactions en ligne, vous pourriez associer chaque transaction individuelle à un hash unique dans l’URL. Vous pouvez utiliser JavaScript pour extraire le hachage de l’URL lorsque vous accédez à une page de détails de transaction, vous permettant ainsi de charger les informations pertinentes pour cette transaction spécifique.
3. Système de gestion de contenu (CMS). Dans un CMS, vous pouvez identifier les articles ou les pages à l’aide de hachages d’URL. En utilisant JavaScript, vous pouvez extraire le hachage de l’URL pour déterminer quelle page ou quel article doit être affiché, facilitant ainsi la navigation au sein du site web.

Ces exemples illustrent comment l’extraction de hachages d’URL avec JavaScript peut être utile dans des scénarios concrets pour améliorer l’expérience utilisateur et la navigation sur un site web.

Exemple de récupération du nom de domaine (hôte) d’une URL en JavaScript

Voici un exemple similaire où une fonction JavaScript extrait des informations utiles d’une URL, en l’occurrence, le nom d’hôte (ou domaine) de l’URL:

'use strict';

const getHostname = url => {
     try {
         const urlObj = new URL(url);
         return urlObj.hostname;
     } catch(err) {
         return '';
     }
};

Dans ce cas, la fonction getHostname prend une URL en entrée et tente d’extraire le nom d’hôte de cette URL à l’aide de l’objet URL. Si l’URL est valide, la fonction renvoie le nom d’hôte, sinon, elle renvoie une chaîne vide.

Un exemple d’utilisation de cette fonction pourrait être :

const url = 'https://www.example.com/path/to/page';
const hostname = getHostname(url);
console.log('Nom d\'hôte :', hostname); // Cela affichera "Nom d'hôte : www.example.com"

La fonction getHostname est similaire à l’exemple précédent, mais au lieu d’extraire le hachage (fragment) de l’URL, elle extrait le nom d’hôte, ce qui peut être utile dans divers scénarios, par exemple, pour vérifier si une URL provient du même domaine ou pour effectuer des actions basées sur le domaine de l’URL.