JavaScript - Obtenir une partie du chemin de l'URL

Quelle est la bonne façon d'extraire uniquement le chemin d'une URL à l'aide de JavaScript?

Exemple:
j'ai l'URL
http://www.somedomain.com/account/search?filter=a#top
mais je voudrais juste obtenir cette partie
/ compte / recherche

J'utilise jQuery s'il y a quelque chose qui peut être exploité.

Il existe une propriété de l' window.locationobjet intégré qui fournira cela pour la fenêtre actuelle.

// If URL is http://www.somedomain.com/account/search?filter=a#top

window.location.pathname // /account/search

// For reference:

window.location.host     // www.somedomain.com (includes port if there is one)
window.location.hostname // www.somedomain.com
window.location.hash     // #top
window.location.href     // http://www.somedomain.com/account/search?filter=a#top
window.location.port     // (empty string)
window.location.protocol // http:
window.location.search   // ?filter=a  

Mettez à jour, utilisez les mêmes propriétés pour n'importe quelle URL:

Il s'avère que ce schéma est normalisé sous la forme d'une interface appelée URLUtils , et devinez quoi? L' window.locationobjet existant et les éléments d'ancrage implémentent l'interface.

Vous pouvez donc utiliser les mêmes propriétés ci-dessus pour n'importe quelle URL - créez simplement une ancre avec l'URL et accédez aux propriétés:

var el = document.createElement('a');
el.href = "http://www.somedomain.com/account/search?filter=a#top";

el.host        // www.somedomain.com (includes port if there is one[1])
el.hostname    // www.somedomain.com
el.hash        // #top
el.href        // http://www.somedomain.com/account/search?filter=a#top
el.pathname    // /account/search
el.port        // (port if there is one[1])
el.protocol    // http:
el.search      // ?filter=a

[1]: la prise en charge par le navigateur des propriétés qui incluent le port n'est pas cohérente, voir: http://jessepollak.me/chrome-was-wrong-ie-was-right

Cela fonctionne dans les dernières versions de Chrome et Firefox . Je n'ai pas de versions d'Internet Explorer à tester, alors testez-vous avec l'exemple JSFiddle.

Exemple JSFiddle

Il y a aussi un URLobjet à venir qui offrira ce support pour les URL elles-mêmes, sans l'élément d'ancrage. Il semble qu'aucun navigateur stable ne le supporte pour le moment, mais on dit qu'il vient dans Firefox 26. Lorsque vous pensez que vous pourriez avoir un support pour cela, essayez-le ici .

window.location.href.split('/');

Vous donnera un tableau contenant toutes les parties de l'URL, auquel vous pouvez accéder comme un tableau normal.

Ou une solution toujours plus élégante suggérée par @Dylan, avec uniquement les parties du chemin:

window.location.pathname.split('/');

S'il s'agit de l' url actuelle, utilisez window.location.pathname sinon utilisez cette expression régulière:

var reg = /.+?\:\/\/.+?(\/.+?)(?:#|\?|$)/;
var pathname = reg.exec( 'http://www.somedomain.com/account/search?filter=a#top' )[1];

Il existe une méthode API Web utile appelée URL

const url = new URL('http://www.somedomain.com/account/search?filter=a#top');
console.log(url.pathname.split('/'));
const params = new URLSearchParams(url.search)
console.log(params.get("filter"))

Dans le cas où vous souhaitez obtenir des parties d'une URL que vous avez stockée dans une variable, je peux recommander URL-Parse

const Url = require('url-parse');
const url = new Url('https://github.com/foo/bar');

Selon la documentation, il extrait les parties suivantes:

L'instance d'url renvoyée contient les propriétés suivantes:

protocole: Le schéma de protocole de l'URL (par exemple http :). slashes: un booléen qui indique si le protocole est suivi de deux barres obliques (//). auth: partie des informations d'authentification (par exemple, nom d'utilisateur: mot de passe). username: Nom d'utilisateur de l'authentification de base. mot de passe: mot de passe de l'authentification de base. hôte: nom d'hôte avec numéro de port. hostname: nom d'hôte sans numéro de port. port: numéro de port facultatif. chemin: chemin de l'URL. query: objet analysé contenant une chaîne de requête, sauf si l'analyse est définie sur false. hash: La partie "fragment" de l'URL comprenant le signe dièse (#). href: l'URL complète. origin: l'origine de l'URL.

Si vous avez une chaîne d'URL abstraite (pas de l'actuel window.location), vous pouvez utiliser cette astuce:

let yourUrlString = "http://example.com:3000/pathname/?search=test#hash";

let parser = document.createElement('a');
parser.href = yourUrlString;

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

Merci à jlong