JavaScript - Obtener parte de la ruta URL

179

¿Cuál es la forma correcta de extraer solo la ruta desde una URL usando JavaScript?

Ejemplo:
Tengo URL
http://www.somedomain.com/account/search?filter=a#top
pero me gustaría obtener esta porción
/ cuenta / búsqueda

Estoy usando jQuery si hay algo allí que pueda aprovecharse.

javascript jquery url

— BuddyJoe
fuente

425

Hay una propiedad del window.locationobjeto incorporado que proporcionará eso para la ventana actual.

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

Actualice, use las mismas propiedades para cualquier URL:

Resulta que este esquema se está estandarizando como una interfaz llamada URLUtils , ¿y adivina qué? Tanto el window.locationobjeto existente como los elementos de anclaje implementan la interfaz.

Para que pueda usar las mismas propiedades anteriores para cualquier URL , solo cree un ancla con la URL y acceda a las propiedades:

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]: El soporte del navegador para las propiedades que incluyen el puerto no es coherente, consulte: http://jessepollak.me/chrome-was-wrong-ie-was-right

Esto funciona en las últimas versiones de Chrome y Firefox . No tengo versiones de Internet Explorer para probar, así que pruébate con el ejemplo de JSFiddle.

Ejemplo de JSFiddle

También hay un URLobjeto próximo que ofrecerá este soporte para las propias URL, sin el elemento de anclaje. Parece que no hay navegadores estables que lo admitan en este momento, pero se dice que vendrá en Firefox 26. Cuando creas que podrías tener soporte para él, pruébalo aquí .

— Nicole
fuente

OP solicitó "una URL", no "la URL actual de la ventana". ¿Qué pasa si tienes una url como una cadena?

— Josh Noe

2

@JoshNoe Resulta que ahora puedes usar las mismas propiedades en los elementos de anclaje. Ver la respuesta actualizada.

— Nicole

Gracias por la buena información. Probé con IE 9 y IE 8 (use IE 9 para simular) ambos trabajos. Por supuesto, funciona con la última versión de Chrome y Firefox :)

— Zhao

49

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

Le dará una matriz que contiene todas las partes de URL, a las que puede acceder como una matriz normal.

O una solución cada vez más elegante sugerida por @Dylan, con solo las partes del camino:

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

— Jose Faeti
fuente

2

window.location.pathname.split ('/'); es una solución más elegante en la mayoría de los casos, si usted está tratando de acceder a los diferentes sectores de la URL Beyod el protocolo estándar y www etc

— Dylan

1

window.location.pathname.split ('/'). filter (function (v) {return v;}); eliminará elementos vacíos para Javascript 1.6 y superior.

— Dhaval Desai

28

Si esta es la url actual, use window.location.pathname; de lo contrario, use esta expresión regular:

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

— nadie
fuente

Casi perfecto, pero a diferencia de window.location.pathname, no incluye la letra de unidad en el nombre de ruta en Windows.

— Theo

1

Para una expresión regular que funciona incluso cuando no hay un nombre de ruta, use:/.+?\:\/\/.+?(\/.+?)?(?:#|\?|)?$/

— Scottmas

3

Existe un método útil de API web llamado 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"))

Expandir fragmento

— mplungjan
fuente

0

En caso de que desee obtener partes de una URL que haya almacenado en una variable, puedo recomendar URL-Parse

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

Según la documentación, extrae las siguientes partes:

La instancia de URL devuelta contiene las siguientes propiedades:

protocolo: el esquema de protocolo de la URL (por ejemplo, http :). barras diagonales: un valor booleano que indica si el protocolo va seguido de dos barras diagonales (//). auth: porción de información de autenticación (por ejemplo, nombre de usuario: contraseña). username: nombre de usuario de autenticación básica. contraseña: contraseña de autenticación básica. host: nombre de host con número de puerto. nombre de host: nombre de host sin número de puerto. puerto: número de puerto opcional. nombre de ruta: ruta URL. query: objeto analizado que contiene una cadena de consulta, a menos que el análisis se establezca en falso. hash: la parte de "fragmento" de la URL, incluido el signo de número (#). href: la URL completa. origen: el origen de la URL.

— Marian Klühspies
fuente

0

Si tiene una cadena de URL abstracta (no de la actual window.location), puede usar este truco:

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"

Gracias a jlong

— krolovolk
fuente