JavaScript - Obtener parte de la ruta URL

¿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.

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í .

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('/');

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

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

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.

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