Último segmento de URL

228

¿Cómo obtengo el último segmento de una URL? Tengo el siguiente script que muestra la URL completa de la etiqueta de anclaje en la que se hizo clic:

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

Si la url es

http://mywebsite/folder/file

¿Cómo hago para que muestre la parte "archivo" de la URL en el cuadro de alerta?

oshirowanen
fuente
A continuación se muestra mi solución de script java en funcionamiento. Espero que ayude. stackoverflow.com/a/38370175/610951
Ravi Shankar Kota

Respuestas:

369

También puede usar la función lastIndexOf () para localizar la última aparición del /carácter en su URL, luego la función substring () para devolver la subcadena a partir de esa ubicación:

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

De esa manera, evitará crear una matriz que contenga todos sus segmentos de URL, como lo split()hace.

Frédéric Hamidi
fuente
3
@oshirowanen, no, pero creará un elemento de matriz a partir de cada segmento de URL. Dado que solo está interesado en el último segmento, puede ser un desperdicio asignar muchos elementos de matriz que nunca usará.
Frédéric Hamidi
11
Pero si la url se hizo admin/store/tour/-1/así, ¿será una ''cadena?
Establecer Kyar Wa Lar
1
@Set, mejor quizás, más lento seguramente.
Frédéric Hamidi
1
¿Qué pasa si la url contiene un /al final?
Sнаđошƒаӽ
66
Atención: @Set Kyar Wa Lar Aug y @ Sнаđошƒаӽ Solución para url que contiene una /al 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
fuente
¿Puedes explicarme cómo funciona? según mi conocimiento .pop () usado para eliminar el último elemento de una matriz. ¡pero está aquí, mostró el último elemento de mi URL!
Inspirar a Shahin el
1
Split convertirá su url en una matriz tomando cada sección de la url delimitada por '/'. Por lo tanto, el último segmento es el último elemento tanto de la url como de la matriz creada posteriormente.
stephen
10
Esto no funcionará si la url termina con un "/" es decirhttp://mywebsite/folder/file/
Peter Ludlow
@PeterLudlow funciona en Chrome 76 puede usted por favor elaborada
zyrup
1
@PeterLudlow funciona porque una cadena vacía es falsa en el resumen JS "" == falseen ese caso, muestra la parte de la matriz con la cadena vacía
zyrup
86
window.location.pathname.split("/").pop()
Dblock247
fuente
2
simple y fácil. Gracias.
krezaeim
3
Perfecto y ordenado, genial
Babak Habibi
1
Respuesta hermosa y limpia
Zarkys Salas
1
Esto es exactamente lo que estaba buscando. Usando react-router-dom, esta fue la solución más limpia que he encontrado para encontrar la última parte de la URL que sigue a la última barra diagonal /. console.log(history.location.pathname.split("/").pop()) ¡Si hay una mejor manera me gustaría saber! Esperemos que este comentario pueda llevar a más personas a su respuesta. Gracias @ Dblock247
Tralawar
Nota al margen: esto no funciona si la URL tiene parámetros de consulta establecidos (por ejemplo .../file?var=value&foo=bar). Esta solución resuelve este problema de una manera más robusta y moderna: stackoverflow.com/a/51795122/1123743
Sebastian Barth
30

Solo otra solución con regex.

var href = location.href;
console.log(href.match(/([^\/]*)\/*$/)[1]);
Avirtum
fuente
Me gusta Gracias :).
Salil Sharma
18

Javascript tiene la función de división asociada al objeto de cadena que puede ayudarte:

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

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

Las otras respuestas pueden funcionar si la ruta es simple, y consiste solo en elementos de ruta simples. Pero cuando también contiene parámetros de consulta, se rompen.

Mejor use el objeto URL para esto en su lugar para obtener una solución más robusta. Es una interpretación analizada de la URL actual:

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

Salida: 'boo'

Esto funciona para todos los navegadores comunes. Solo nuestro IE moribundo no lo admite (y no lo hará). Sin embargo, para IE hay un polyfills disponible (si te importa ).

Sebastian Barth
fuente
10

O podrías usar una expresión regular:

alert(href.replace(/.*\//, ''));
jasssonpet
fuente
mejor aún, combine esto con stackoverflow.com/questions/4758103/… :alert(window.location.href.replace(/\/$/, '').replace(/.*//, ''))
samson
8
var urlChunks = 'mywebsite/folder/file'.split('/');
alert(urlChunks[urlChunks.length - 1]);
cumbre
fuente
5

Lo sé, es demasiado tarde, pero para otros: I altamente uso recomendado PURL plugin de jQuery . La motivación para PURL es que la URL también puede segmentarse con '#' (ejemplo: enlaces angular.js), es decir, la URL podría verse así

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

o

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

Y con PURL puede decidir fácilmente (segmento / segmento) qué segmento desea obtener.

Para el último segmento "clásico" podría escribir:

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

Basándose en la respuesta de Frédéric usando solo javascript:

var url = document.URL

window.alert(url.substr(url.lastIndexOf('/') + 1));
Pellizco
fuente
3

También,

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

Si no le preocupa generar los elementos adicionales utilizando la división, entonces el filtro podría manejar el problema que menciona de la barra inclinada final (suponiendo que tenga compatibilidad con el navegador para el filtro).

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

Si su URL se ve así:

http://test.com/one/

o

http://test.com/one

o

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

Entonces loc termina luciendo así: http://test.com/one

Ahora, dado que desea el último elemento, ejecute el siguiente paso para cargar el valor (targetValue) que deseaba originalmente.

var targetValue = loc.substr(loc.lastIndexOf('/') + 1);
raddevus
fuente
Probablemente extraño algo, pero con " test.com/one " loc termina pareciéndose a: " test.com ". Creo que debería ser así: 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
Falla si corta searcho hash.
Walf
3
window.alert(this.pathname.substr(this.pathname.lastIndexOf('/') + 1));

Use la pathnamepropiedad nativa porque es más simple y ya ha sido analizada y resuelta por el navegador. $(this).attr("href")puede devolver valores como los ../..que no le darían el resultado correcto.

Si necesita mantener el searchy hash(por ejemplo, foo?bar#bazde http://quux.com/path/to/foo?bar#baz) use esto:

window.alert(this.pathname.substr(this.pathname.lastIndexOf('/') + 1) + this.search + this.hash);
Walf
fuente
También desea agregar que elimina pathnameparámetros de consulta, pero hrefno lo hace.
Max Heiber
3

Para obtener el último segmento de su ventana actual:

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

RegarBoy
fuente
3

primero puede eliminar si hay / al final y luego obtener la última parte de la 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
fuente
3

Devuelve el último segmento, independientemente de las barras inclinadas:

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

console.log(val);

John Doherty
fuente
Probablemente no quieras usar path.sepuna barra diagonal. Ver nodejs.org/api/path.html#path_path_sep . Esto mantendrá su código portátil en todos los sistemas operativos.
Aaron
1
Buena idea, pero ya no funcionaría en el navegador
John Doherty
buen punto. Debo decir que esto se prefiere en los scripts de línea de comandos / nodejs del lado del servidor.
Aaron
2
var pathname = window.location.pathname; // Returns path only
var url      = window.location.href;     // Returns full URL

Copiado de esta respuesta

Roberto Alonso
fuente
1

Respuesta actualizada de raddevus:

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 la última ruta de url como cadena:

test.com/path-name = path-name

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

Creo que es más seguro eliminar la barra diagonal ('/') antes de hacer la subcadena. Porque tengo una cadena vacía en mi escenario.

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

Estoy usando regex y split:

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

Al final ignorará #? & / URL de finalización, que sucede mucho. Ejemplo:

https://cardsrealm.com/profile/cardsRealm -> Devoluciones cardsRealm

https://cardsrealm.com/profile/cardsRealm#hello -> Devuelve tarjetasRealm

https://cardsrealm.com/profile/cardsRealm?hello -> Devuelve tarjetasRealm

https://cardsrealm.com/profile/cardsRealm/ -> Devoluciones cardsRealm

Dinidiniz
fuente
0

Realmente no sé si la expresión regular es la forma correcta de resolver este problema, ya que realmente puede afectar la eficiencia de su código, pero la expresión regular a continuación lo ayudará a obtener el último segmento y aún le dará el último segmento incluso si la URL es seguido por un vacio /. La expresión regular que se me ocurrió es:

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

fuente
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 mi.

sanyaissues
fuente
0

Sé que es antiguo, pero si desea obtener esto de una URL, simplemente puede usar:

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

document.location.pathnameobtiene el nombre de ruta de la URL actual. lastIndexOfobtener el índice de la última aparición de la siguiente expresión regular, en nuestro caso es /.. El punto significa cualquier carácter, por lo tanto, no contará si /es el último carácter en la URL. substringcortará la cadena entre dos índices.

Ruan Carlos
fuente
0

si la url es http://localhost/madukaonline/shop.php?shop=79

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

así que la forma más sencilla es usar location.search

puedes buscar más información aquí y aquí

Dijiflex
fuente
0

Puede hacer esto con rutas de consulta simples (w / 0), etc.

Concedido probablemente demasiado complejo y probablemente no eficiente, pero quería usarlo reducepor diversión.

  "/foo/bar/"
    .split(path.sep)
    .filter(x => x !== "")
    .reduce((_, part, i, arr) => {
      if (i == arr.length - 1) return part;
    }, "");
  1. Dividir la cadena en los separadores de ruta.
  2. Filtre las partes de ruta de cadena vacías (esto podría suceder con la barra inclinada final en la ruta).
  3. Reduzca la matriz de partes de la ruta a la última.
Aaron
fuente