Último segmento de URL

228

Como obtenho o último segmento de um URL? Eu tenho o seguinte script que exibe o URL completo da marca âncora clicada:

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

Se o URL for

http://mywebsite/folder/file

como faço para exibir apenas a parte "arquivo" do URL na caixa de alerta?

oshirowanen
fonte
Abaixo está a minha solução de script java de trabalho. stackoverflow.com/a/38370175/610951
Ravi Shankar Kota

Respostas:

369

Você também pode usar a função lastIndexOf () para localizar a última ocorrência do /caractere em sua URL e, em seguida, a função substring () para retornar a substring a partir desse local:

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

Dessa forma, você evitará a criação de uma matriz que contenha todos os seus segmentos de URL split().

Frédéric Hamidi
fonte
3
@oshirowanen, não, mas ele criará um elemento de matriz para cada segmento de URL. Como você está interessado apenas no último segmento, pode ser um desperdício alocar muitos elementos da matriz que você nunca usará.
Frédéric Hamidi
11
Mas se o URL se tornou admin/store/tour/-1/assim, será ''string?
Defina Kyar Wa Lar
1
@Set, melhor, talvez, mais lento com certeza.
Frédéric Hamidi
1
e se o URL contiver um /no final?
23716
6
Attn: @Set Kyar Wa Lar Aug e @ Sнаđошƒаӽ Solução para o URL que contém um /no final: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
fonte
Você pode me explicar como funciona? conforme meu conhecimento .pop () usado para remover o último elemento de uma matriz. mas aqui está o último elemento do meu url !!
Inspire Shahin
1
Dividir converterá seu URL em uma matriz, considerando cada seção do URL delimitada por '/'. Portanto, o último segmento é o último elemento do URL e da matriz criada posteriormente.
Stephen
10
Isso não funcionará se o URL terminar com um "/" iehttp://mywebsite/folder/file/
Peter Ludlow
@PeterLudlow funciona no Chrome 76 pode agradar elaborada
zyrup
1
@PeterLudlow ele funciona porque uma cadeia vazia é falso em JS abstrato "" == false, nesse caso, aparece a parte da matriz com a cadeia vazia
zyrup
86
window.location.pathname.split("/").pop()
Dblock247
fonte
2
simples e fácil. Obrigado.
Krezaeim
3
Perfeito e arrumado, ótimo #
Babak Habibi 11/11
1
Resposta bonita e limpa
Zarkys Salas 30/07/19
1
Era exatamente isso que eu estava procurando. Usando react-router-dom, essa foi a solução mais limpa que encontrei para encontrar a última parte da URL que segue a última barra /. console.log(history.location.pathname.split("/").pop()) Se existe uma maneira melhor, eu gostaria de saber! Espero que este comentário possa levar mais pessoas à sua resposta. Obrigado @ Dblock247
Tralawar
Nota: Isso não funciona se o URL tiver parâmetros de consulta definidos (por exemplo .../file?var=value&foo=bar). Esta solução resolve esse problema de uma maneira mais robusta e moderna: stackoverflow.com/a/51795122/1123743
Sebastian Barth
30

Apenas outra solução com regex.

var href = location.href;
console.log(href.match(/([^\/]*)\/*$/)[1]);
Avirtum
fonte
Eu gosto Obrigado :).
Salil Sharma 29/01
18

Javascript tem a divisão de função associada ao objeto string que pode ajudá-lo:

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

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

As outras respostas podem funcionar se o caminho for simples, consistindo apenas em elementos simples do caminho. Mas quando também contém parâmetros de consulta, eles quebram.

Melhor usar o objeto URL para isso em vez de obter uma solução mais robusta. É uma interpretação analisada do URL atual:

Entrada: 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);

Resultado: 'boo'

Isso funciona para todos os navegadores comuns. Somente nosso IE moribundo não suporta isso (e não apoia). No entanto, para o IE, há um polyfills disponível (se você se importa ).

Sebastian Barth
fonte
10

Ou você pode usar uma expressão regular:

alert(href.replace(/.*\//, ''));
jasssonpet
fonte
melhor ainda, combine isso com stackoverflow.com/questions/4758103/… :alert(window.location.href.replace(/\/$/, '').replace(/.*//, ''))
samson 21/03
8
var urlChunks = 'mywebsite/folder/file'.split('/');
alert(urlChunks[urlChunks.length - 1]);
acme
fonte
5

Eu sei, é tarde demais, mas para os outros: I altamente recomendado o uso PURL plugin jQuery . A motivação para PURL é que o URL também pode ser segmentado por '#' (exemplo: links angular.js), ou seja, o URL pode parecer

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

ou

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

E com o PURL, você pode decidir facilmente (segmento / segmento) qual segmento você deseja obter.

Para o último segmento "clássico", você pode escrever:

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

Com base na resposta de Frédéric usando apenas javascript:

var url = document.URL

window.alert(url.substr(url.lastIndexOf('/') + 1));
Pitada
fonte
3

Além disso,

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

Se você não estiver preocupado em gerar os elementos extras usando a divisão, o filtro poderá resolver o problema mencionado na barra final (supondo que você tenha suporte do navegador para filtro).

url.split('/').filter(function (s) { return !!s }).pop()
Jaboc83
fonte
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 = one

Se o seu URL se parecer com:

http://test.com/one/

ou

http://test.com/one

ou

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

Em seguida, loc acaba parecendo: http://test.com/one

Agora, como você deseja o último item, execute a próxima etapa para carregar o valor (targetValue) desejado originalmente.

var targetValue = loc.substr(loc.lastIndexOf('/') + 1);
raddevus
fonte
Provavelmente sinto falta de alguma coisa, mas com " test.com/one " loc acaba parecendo: " test.com ". Eu acho que deveria ser assim: 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
Falha se barra searchou hash.
Walf
3
window.alert(this.pathname.substr(this.pathname.lastIndexOf('/') + 1));

Use a pathnamepropriedade nativa porque é mais simples e já foi analisada e resolvida pelo navegador. $(this).attr("href")pode retornar valores como o ../..que não daria o resultado correto.

Se você precisar manter o searche hash(por exemplo, foo?bar#bazde http://quux.com/path/to/foo?bar#baz), use isto:

window.alert(this.pathname.substr(this.pathname.lastIndexOf('/') + 1) + this.search + this.hash);
Walf
fonte
Também deseja adicionar que pathnameremove os parâmetros de consulta, mas hrefnão o faz.
precisa saber é o seguinte
3

Para obter o último segmento da sua janela atual:

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

RegarBoy
fonte
3

você pode remover primeiro se houver / no final e obter a última parte do 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
fonte
3

Retorna o último segmento, independentemente das barras finais:

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

console.log(val);

John Doherty
fonte
Você provavelmente deseja usar path.sepnão uma barra literal. Consulte nodejs.org/api/path.html#path_path_sep . Isso manterá seu código portátil entre sistemas operacionais.
Aaron
1
Boa ideia, mas não funcionaria mais no navegador
John Doherty
bom ponto. Devo dizer que isso é preferido em scripts de linha de comando / nodejs do lado do servidor.
Aaron
2
var pathname = window.location.pathname; // Returns path only
var url      = window.location.href;     // Returns full URL

Copiado desta resposta

Roberto Alonso
fonte
1

Resposta do raddevus atualizada:

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 o último caminho do URL como string:

test.com/path-name = path-name

test.com/path-name/ = path-name
Nemanja Smiljanic
fonte
0

Eu acredito que é mais seguro remover a barra ('/') antes de fazer a substring. Porque eu tenho uma string vazia no meu cenário.

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

Realmente não sei se a regex é a maneira correta de resolver esse problema, pois pode realmente afetar a eficiência do seu código, mas a regex abaixo ajudará você a buscar o último segmento e ainda fornecerá o último segmento, mesmo que o URL é seguido por um vazio /. O regex que eu criei é:

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

fonte
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);

Funciona para mim.

sanyaissues
fonte
0

Eu sei que é antigo, mas se você deseja obter isso de um URL, pode simplesmente usar:

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

document.location.pathnameobtém o nome do caminho da URL atual. lastIndexOfobtenha o índice da última ocorrência do seguinte Regex, no nosso caso é /.. O ponto significa qualquer caractere, portanto, ele não contará se /o último caractere no URL. substringirá cortar a string entre dois índices.

Ruan Carlos
fonte
0

se o URL for http://localhost/madukaonline/shop.php?shop=79

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

portanto, a maneira mais simples é usar location.search

você pode procurar mais informações aqui e aqui

Dijiflex
fonte
0

Você pode fazer isso com caminhos simples (w / 0), querystrings etc.

Concedido provavelmente excessivamente complexo e provavelmente não com desempenho, mas eu queria usar reducepara me divertir.

  "/foo/bar/"
    .split(path.sep)
    .filter(x => x !== "")
    .reduce((_, part, i, arr) => {
      if (i == arr.length - 1) return part;
    }, "");
  1. Divida a sequência nos separadores de caminho.
  2. Filtre as partes vazias do caminho da string (isso pode acontecer com a barra no caminho).
  3. Reduza a matriz de partes do caminho para a última.
Aaron
fonte