JavaScript - Obter parte do caminho da URL

Qual é a maneira correta de extrair apenas o caminho de uma URL usando JavaScript?

Exemplo:
tenho o URL
http://www.somedomain.com/account/search?filter=a#top,
mas gostaria de obter essa parte
/ conta / pesquisa

Estou usando o jQuery se houver algo que possa ser aproveitado.

Há uma propriedade do window.locationobjeto interno que fornecerá isso para a janela atual.

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

Atualização, use as mesmas propriedades para qualquer URL:

Acontece que esse esquema está sendo padronizado como uma interface chamada URLUtils , e adivinhem? O window.locationobjeto existente e os elementos âncora implementam a interface.

Portanto, você pode usar as mesmas propriedades acima para qualquer URL - basta criar uma âncora com a URL e acessar as propriedades:

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]: O suporte do navegador para as propriedades que incluem a porta não é consistente. Consulte: http://jessepollak.me/chrome-was-wrong-ie-was-right

Isso funciona nas versões mais recentes do Chrome e Firefox . Não tenho versões do Internet Explorer para testar; portanto, teste-se com o exemplo do JSFiddle.

Exemplo JSFiddle

Também existe um URLobjeto que oferecerá esse suporte para os próprios URLs, sem o elemento anchor. Parece que não há navegadores estáveis ​​para suportá-lo no momento, mas diz-se que está chegando no Firefox 26. Quando você acha que pode ter suporte para ele, tente aqui .

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

Fornecerá uma matriz contendo todas as partes da URL, que você pode acessar como uma matriz normal.

Ou uma solução cada vez mais elegante, sugerida pelo @Dylan, com apenas as partes do caminho:

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

Se esse for o URL atual, use window.location.pathname, caso contrário, use esta expressão regular:

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

Existe um método útil de API da Web chamado 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"))

Caso você queira obter partes de um URL que você armazenou em uma variável, posso recomendar o URL-Parse

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

De acordo com a documentação, extrai as seguintes partes:

A instância de URL retornada contém as seguintes propriedades:

protocolo: o esquema de protocolo da URL (por exemplo, http :). barras: Um booleano que indica se o protocolo é seguido por duas barras (//). auth: parte das informações de autenticação (por exemplo, nome de usuário: senha). nome de usuário: nome de usuário da autenticação básica. senha: senha da autenticação básica. host: nome do host com número da porta. nome do host: nome do host sem número da porta. port: número da porta opcional. nome do caminho: caminho da URL. query: Objeto analisado que contém a sequência de caracteres de consulta, a menos que a análise esteja configurada como false. hash: a parte "fragmento" do URL, incluindo o sinal de libra (#). href: o URL completo. origem: a origem do URL.

Se você tiver uma string de URL abstrata (não da atual window.location), poderá usar este truque:

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"

Graças a jlong