web-dev-qa-db-fra.com

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 avoir cette portion
/account/search

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

javascriptjqueryurl
154
BuddyJoe

Il existe une propriété de l'objet window.location intégré qui fournira cela pour la fenêtre en cours.

_// 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  
_


Mise à jour, utilisez les mêmes propriétés pour toutes les URL:

Il s’avère que ce schéma est en cours de normalisation en tant qu’interface appelée URLUtils , et devinez quoi? L'objet _window.location_ existant et les éléments d'ancrage existants implémentent l'interface.

Vous pouvez donc utiliser les mêmes propriétés que ci-dessus pour toutes les URL - créez simplement une ancre avec l'URL et accéder 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]: Le support des navigateurs pour les propriétés incluant le port n'est pas cohérent, voir: http://jessepollak.me/chrome- était-faux-c'est-à-dire-était-vrai

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

exemple JSFiddle

Il existe également un objet URL à venir qui offrira cette prise en charge pour les URL elles-mêmes, sans l'élément d'ancrage. On dirait qu'aucun navigateur stable ne le supporte pour le moment, mais on dit que cela arrive dans Firefox 26. Si vous pensez pouvoir le supporter, essayez-le ici .

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

Vous donnera un tableau contenant toutes les parties de l'URL, auxquelles 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('/');
46
Jose Faeti

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];
27
nobody