Dernier segment d'URL

228

Comment obtenir le dernier segment d'une URL? J'ai le script suivant qui affiche l'url complète de la balise d'ancrage cliquée:

$(".tag_name_goes_here").live('click', function(event)
{
    event.preventDefault();  
    alert($(this).attr("href"));
});

Si l'url est

http://mywebsite/folder/file

comment puis-je obtenir uniquement pour afficher la partie "fichier" de l'URL dans la boîte d'alerte?

oshirowanen
la source
Vous trouverez ci-dessous ma solution de script Java qui fonctionne. J'espère que cela vous aidera. stackoverflow.com/a/38370175/610951
Ravi Shankar Kota

Réponses:

369

Vous pouvez également utiliser la fonction lastIndexOf () pour localiser la dernière occurrence du /caractère dans votre URL, puis la fonction substring () pour renvoyer la sous-chaîne à partir de cet emplacement:

console.log(this.href.substring(this.href.lastIndexOf('/') + 1));

De cette façon, vous éviterez de créer un tableau contenant tous vos segments d'URL, comme le split()fait.

Frédéric Hamidi
la source
3
@oshirowanen, non, mais cela créera un élément de tableau à partir de chaque segment d'URL. Étant donné que vous n'êtes intéressé que par le dernier segment, il peut être inutile d'allouer de nombreux éléments de tableau que vous n'utiliserez jamais.
Frédéric Hamidi
11
Mais si l'URL était devenue comme admin/store/tour/-1/ça, ce serait une ''chaîne?
Définir Kyar Wa Lar
1
@Set, plus beau peut-être, plus lent sûrement.
Frédéric Hamidi
1
que faire si l'url contient un /à la fin?
Sнаđошƒаӽ
6
Attn: @Set Kyar Wa Lar Aug et @ Sнаđошƒаӽ Solution pour l'URL qui contient un /à la fin:var url = window.location.href.replace(/\/$/, ''); /* remove optional end / */ var lastSeg = url.substr(url.lastIndexOf('/') + 1);
Ross
151

var parts = 'http://mywebsite/folder/file'.split('/');
var lastSegment = parts.pop() || parts.pop();  // handle potential trailing slash

console.log(lastSegment);

Tim van Oostrom
la source
Pouvez-vous m'expliquer comment cela fonctionne? selon mes connaissances .pop () utilisé pour supprimer le dernier élément d'un tableau. mais est là, il a montré le dernier élément de mon URL !!
Inspire Shahin
1
Split convertira votre URL en un tableau en prenant chaque section de l'URL délimitée par '/'. Par conséquent, le dernier segment est le dernier élément de l'url et du tableau créé par la suite.
stephen
10
Cela ne fonctionnera pas si l'url se termine par un "/" c'esthttp://mywebsite/folder/file/
Peter Ludlow
@PeterLudlow cela fonctionne dans Chrome 76 pouvez-vous s'il vous plaît élaborer
zyrup
1
@PeterLudlow cela fonctionne car une chaîne vide est fausse dans l'abrégé JS "" == falsedans ce cas, elle affiche la partie du tableau avec la chaîne vide
zyrup
87
window.location.pathname.split("/").pop()
Dblock247
la source
2
simple et facile. Merci.
krezaeim
3
Parfait et bien rangé, génial
Babak Habibi
1
Réponse belle et propre
Zarkys Salas
1
Ceci est exactement ce que je cherchais. En utilisant react-router-dom, c'était la solution la plus propre que j'ai trouvée pour trouver la dernière partie de l'URL derrière la dernière barre oblique /. console.log(history.location.pathname.split("/").pop()) S'il y a une meilleure façon, j'aimerais savoir! Espérons que ce commentaire puisse conduire plus de personnes à votre réponse. Merci @ Dblock247
Tralawar
1
@SebastianBarth ce n'est pas à la recherche d'un paramètre de chaîne de requête. L'appel à .pathname les supprime car le focus est d'obtenir le dernier segment du chemin URL, qu'il y ait ou non des paramètres de requête.
Dblock247
30

Juste une autre solution avec regex.

var href = location.href;
console.log(href.match(/([^\/]*)\/*$/)[1]);
Avirtum
la source
J'aime ça Merci :).
Salil Sharma
18

Javascript a la fonction split associée à l'objet chaîne qui peut vous aider:

var url = "http://mywebsite/folder/file";
var array = url.split('/');

var lastsegment = array[array.length-1];
Fran Verona
la source
17

Les autres réponses peuvent fonctionner si le chemin est simple, composé uniquement d'éléments de chemin simples. Mais quand il contient également des paramètres de requête, ils cassent.

Il vaut mieux utiliser un objet URL pour cela à la place pour obtenir une solution plus robuste. Il s'agit d'une interprétation analysée de l'URL actuelle:

Contribution: const href = 'https://stackoverflow.com/boo?q=foo&s=bar'

const segments = new URL(href).pathname.split('/');
const last = segments.pop() || segments.pop(); // Handle potential trailing slash
console.log(last);

Production: 'boo'

Cela fonctionne pour tous les navigateurs courants. Seul notre IE mourant ne prend pas en charge cela (et ne le fera pas). Pour IE, il existe cependant des polyfills (si vous vous en souciez ).

Sebastian Barth
la source
10

Ou vous pouvez utiliser une expression régulière:

alert(href.replace(/.*\//, ''));
jasssonpet
la source
mieux encore, combinez cela avec stackoverflow.com/questions/4758103/… :alert(window.location.href.replace(/\/$/, '').replace(/.*//, ''))
samson
8
var urlChunks = 'mywebsite/folder/file'.split('/');
alert(urlChunks[urlChunks.length - 1]);
acmé
la source
5

Je sais, il est trop tard, mais pour d'autres: je recommande fortement d' utiliser le plugin PURL jquery . La motivation pour PURL est que l'url peut également être segmentée par '#' (exemple: liens angular.js), c'est-à-dire que l'url pourrait ressembler à

    http://test.com/#/about/us/

ou

    http://test.com/#sky=blue&grass=green

Et avec PURL, vous pouvez facilement décider (segment / fsegment) quel segment vous souhaitez obtenir.

Pour le dernier segment "classique", vous pouvez écrire:

    var url = $.url('http://test.com/dir/index.html?key=value');
    var lastSegment = url.segment().pop(); // index.html
IL55
la source
4

S'appuyant sur la réponse de Frédéric en utilisant uniquement le javascript:

var url = document.URL

window.alert(url.substr(url.lastIndexOf('/') + 1));
Pincer
la source
3

Aussi,

var url = $(this).attr("href");
var part = url.substring(url.lastIndexOf('/') + 1);
naveen
la source
3

Si vous n'êtes pas inquiet de générer les éléments supplémentaires à l'aide du fractionnement, le filtre peut gérer le problème que vous mentionnez de la barre oblique de fin (en supposant que le navigateur soit compatible avec le filtre).

url.split('/').filter(function (s) { return !!s }).pop()
Jaboc83
la source
3
// Store original location in loc like: http://test.com/one/ (ending slash)
var loc = location.href; 
// If the last char is a slash trim it, otherwise return the original loc
loc = loc.lastIndexOf('/') == (loc.length -1) ? loc.substr(0,loc.length-1) : loc.substr(0,loc.lastIndexOf('/'));
var targetValue = loc.substr(loc.lastIndexOf('/') + 1);

targetValue = un

Si votre URL ressemble à:

http://test.com/one/

ou

http://test.com/one

ou

http://test.com/one/index.htm

Ensuite, loc finit par ressembler à: http://test.com/one

Maintenant, puisque vous voulez le dernier élément, exécutez l'étape suivante pour charger la valeur (targetValue) que vous vouliez à l'origine.

var targetValue = loc.substr(loc.lastIndexOf('/') + 1);
raddevus
la source
Je manque probablement quelque chose, mais avec " test.com/one " loc finit par ressembler à: " test.com ". Je pense que cela devrait être comme: if (loc.lastIndexOf ('/') == (loc.length -1)) {loc = loc.substr (0, loc.length-1)} else {var isFile = loc. substr (loc.lastIndexOf ('/'), loc.length) .indexOf ('.')! = -1; if (isFile) loc = loc.substr (0, loc.lastIndexOf ('/')); }
Allan Raquin
Échoue en cas de coupure dans searchou hash.
Walf
3
window.alert(this.pathname.substr(this.pathname.lastIndexOf('/') + 1));

Utilisez la pathnamepropriété native car elle est la plus simple et a déjà été analysée et résolue par le navigateur. $(this).attr("href")peut renvoyer des valeurs comme celles ../..qui ne vous donneraient pas le résultat correct.

Si vous devez conserver le searchet hash(par exemple foo?bar#bazde http://quux.com/path/to/foo?bar#baz) utiliser ceci:

window.alert(this.pathname.substr(this.pathname.lastIndexOf('/') + 1) + this.search + this.hash);
Walf
la source
Vous souhaitez également ajouter que pathnameles paramètres de requête sont supprimés, mais hrefpas.
Max Heiber
3

Pour obtenir le dernier segment de votre fenêtre actuelle:

window.location.href.substr(window.location.href.lastIndexOf('/') +1)

RegarBoy
la source
3

vous pouvez d'abord supprimer s'il y a / à la fin, puis récupérer la dernière partie de l'URL

let locationLastPart = window.location.pathname
if (locationLastPart.substring(locationLastPart.length-1) == "/") {
  locationLastPart = locationLastPart.substring(0, locationLastPart.length-1);
}
locationLastPart = locationLastPart.substr(locationLastPart.lastIndexOf('/') + 1);
Veysi YILDIZ
la source
3

Renvoie le dernier segment, indépendamment des barres obliques de fin:

var val = 'http://mywebsite/folder/file//'.split('/').filter(Boolean).pop();

console.log(val);

John Doherty
la source
Vous ne voudrez probablement pas utiliser path.sepune barre oblique littérale. Voir nodejs.org/api/path.html#path_path_sep . Cela gardera votre code portable sur tous les systèmes d'exploitation.
Aaron
1
Belle idée, mais cela ne fonctionnerait plus dans le navigateur
John Doherty
bon point. Je dois dire que cela est préférable dans les scripts de ligne de commande / nodejs côté serveur.
Aaron
2
var pathname = window.location.pathname; // Returns path only
var url      = window.location.href;     // Returns full URL

Copié de cette réponse

Roberto Alonso
la source
1

Réponse raddevus mise à jour:

var loc = window.location.href;
loc = loc.lastIndexOf('/') == loc.length - 1 ? loc.substr(0, loc.length - 1) : loc.substr(0, loc.length + 1);
var targetValue = loc.substr(loc.lastIndexOf('/') + 1);

Imprime le dernier chemin de l'url sous forme de chaîne:

test.com/path-name = path-name

test.com/path-name/ = path-name
Nemanja Smiljanic
la source
0

Je pense qu'il est plus sûr de supprimer la barre oblique ('/') avant de faire la sous-chaîne. Parce que j'ai une chaîne vide dans mon scénario.

window.alert((window.location.pathname).replace(/\/$/, "").substr((window.location.pathname.replace(/\/$/, "")).lastIndexOf('/') + 1));
Jaison
la source
0

J'utilise regex et split:

var last_path = location.href.match (/. / (. [\ w]) /) [1] .split ("#") [0] .split ("?") [0]

Au final, il ignorera #? & / fin des URL, ce qui arrive souvent. Exemple:

https://cardsrealm.com/profile/cardsRealm -> Retours de cartesRealm

https://cardsrealm.com/profile/cardsRealm#hello -> Retours de cartesRealm

https://cardsrealm.com/profile/cardsRealm?hello -> Retours de cartesRealm

https://cardsrealm.com/profile/cardsRealm/ -> Retours de cartesRealm

Dinidiniz
la source
0

Je ne sais pas vraiment si la regex est la bonne façon de résoudre ce problème car elle peut vraiment affecter l'efficacité de votre code, mais la regex ci-dessous vous aidera à récupérer le dernier segment et vous donnera toujours le dernier segment même si l'URL est suivi d'un vide /. Le regex que j'ai trouvé est:

[^\/]+[\/]?$

la source
0
// https://x.com/boo/?q=foo&s=bar = boo
// https://x.com/boo?q=foo&s=bar = boo
// https://x.com/boo/ = boo
// https://x.com/boo = boo

const segment = new 
URL(window.location.href).pathname.split('/').filter(Boolean).pop();
console.log(segment);

Travaille pour moi.

sanyaissues
la source
0

Je sais que c'est vieux mais si vous voulez l'obtenir à partir d'une URL, vous pouvez simplement utiliser:

document.location.pathname.substring(document.location.pathname.lastIndexOf('/.') + 1);

document.location.pathnameobtient le chemin d'accès à partir de l'URL actuelle. lastIndexOfobtenir l'indice de la dernière occurrence de la regex suivante, dans notre cas est /.. Le point signifie n'importe quel caractère, donc, il ne comptera pas si /c'est le dernier caractère de l'URL. substringva couper la chaîne entre deux index.

Ruan Carlos
la source
0

si l'url est http://localhost/madukaonline/shop.php?shop=79

console.log(location.search); apportera ?shop=79

donc la manière la plus simple est d'utiliser location.search

vous pouvez rechercher plus d'informations ici et ici

Dijiflex
la source
0

Vous pouvez le faire avec des chaînes de requête de chemins simples (w / 0), etc.

Accordé probablement trop complexe et probablement pas performant, mais je voulais l'utiliser reducepour le plaisir.

  "/foo/bar/"
    .split(path.sep)
    .filter(x => x !== "")
    .reduce((_, part, i, arr) => {
      if (i == arr.length - 1) return part;
    }, "");
  1. Fractionnez la chaîne sur les séparateurs de chemin.
  2. Filtrez les parties de chemin de chaîne vides (cela peut arriver avec une barre oblique de fin dans le chemin).
  3. Réduisez le tableau des parties de chemin au dernier.
Aaron
la source