Javascript

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.

Autres articles

Tout ce que vous devez savoir sur...
JavaScript est l'un des langages de programmation les plus populaires...
Read more
Javascript arrondi à 2 décimales - Guide...
L'arrondi à deux décimales est une opération courante lors du...
Read more
Boîtes de dialogue : Alert, Confirm, et...
Cet article explore chacun des types de boîtes de dialogue...
Read more
AZ

Recent Posts

Guide : Calculer un écart en pourcentage dans Excel

L’écart en pourcentage permet de comparer une valeur réelle par rapport à une valeur attendue,…

15 minutes ago

Les Écarts sur Charges Fixes : Explication

Les écarts sur charges fixes permettent d'analyser les différences entre les charges fixes budgétées et…

5 heures ago

Calculer un écart-type dans Excel

L’écart-type est une mesure de la dispersion des données autour de la moyenne. Excel propose…

5 heures ago

Exercices Corrigés sur les Écarts Budgétaires

Exercice 1 : Calcul des Écarts sur Volume et Prix Contexte :Une entreprise a prévu…

6 heures ago

Exemples de QCM sur le Contrôle Budgétaire (Contrôle de Gestion)

1. Généralités sur le Contrôle Budgétaire Question 1 : Quel est l’objectif principal du contrôle…

7 heures ago

Exemples de QCM Contrôle de Gestion et Pilotage de la Performance

Voici un QCM Contrôle de Gestion - Pilotage de la Performance bien conçu sur le…

7 heures ago

This website uses cookies.