Parser une URL simplement avec un élément <a>
Table des matières
La problématique
Il y a longtemps, j'ai dû parser une URL en PHP grâce à la fonction parse_url().
Cette solution fût robuste et fonctionne en production encore aujourd'hui.
Récemment, j'ai dû faire la même chose en javascript, mais impossible de trouver l'équivalent de la méthode parse_url dans ce langage.
La solution
J'ai donc cherché des implémentations de cette fonctionnalité, et je suis tombé sur cela:
var parser = document.createElement('a');
parser.href = "http://my.domain.com:3000/the/path/#hash";
parser.protocol; // => "http:"
parser.hostname; // => "my.domain.com"
parser.port; // => "3000"
parser.pathname; // => "/the/path/"
parser.hash; // => "#hash"
parser.host; // => "my.domain.com:3000"
Explication
L'astuce vient du fait que les navigateurs parsent les URLs pour des raisons techniques et qu'il est tout à fait possible de profiter de cette fonctionnalité.
Cette façon d'utiliser l'élément <a> est peu intuitive, mais elle n'a pas d'incidence sur la page car l'élément n'est jamais inséré dans le DOM.
En revanche, chaque navigateur implémente cet élément à sa manière, et il est possible que le résultat diffère d'un navigateur à l'autre.