JavaScript: ottieni parte del percorso URL

Qual è il modo corretto di estrarre solo il percorso da un URL usando JavaScript?

Esempio:
ho l'URL
http://www.somedomain.com/account/search?filter=a#top
ma vorrei solo ottenere questa porzione
/ account / ricerca

Sto usando jQuery se c'è qualcosa che può essere sfruttato.

C'è una proprietà window.locationdell'oggetto incorporato che fornirà quella per la finestra corrente.

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

Aggiorna, usa le stesse proprietà per qualsiasi URL:

Si scopre che questo schema viene standardizzato come un'interfaccia chiamata URLUtils , e indovina un po '? Sia l' window.locationoggetto esistente che gli elementi di ancoraggio implementano l'interfaccia.

Quindi puoi utilizzare le stesse proprietà sopra per qualsiasi URL : basta creare un ancoraggio con l'URL e accedere alle proprietà:

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]: il supporto del browser per le proprietà che includono la porta non è coerente, consultare: http://jessepollak.me/chrome-was-wrong-ie-was-right

Funziona con le ultime versioni di Chrome e Firefox . Non ho versioni di Internet Explorer da testare, quindi prova te stesso con l'esempio di JSFiddle.

JS Esempio di violino

C'è anche un URLoggetto in arrivo che offrirà questo supporto per gli URL stessi, senza l'elemento di ancoraggio. Sembra che nessun browser stabile lo supporti in questo momento, ma si dice che arriverà in Firefox 26. Quando pensi che potresti averne il supporto, provalo qui .

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

Ti darà un array contenente tutte le parti URL, a cui puoi accedere come un normale array.

O una soluzione sempre più elegante suggerita da @Dylan, con solo le parti del percorso:

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

Se questo è l' URL corrente, utilizza window.location.pathname altrimenti usa questa espressione regolare:

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

Esiste un utile metodo API Web chiamato 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"))

Nel caso in cui desideri ottenere parti di un URL che hai archiviato in una variabile, posso consigliare URL-Parse

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

Secondo la documentazione, estrae le seguenti parti:

L'istanza dell'URL restituita contiene le seguenti proprietà:

protocollo: lo schema del protocollo dell'URL (ad es. http :). barre: un valore booleano che indica se il protocollo è seguito da due barre (//). auth: porzione di informazioni di autenticazione (ad esempio nome utente: password). nome utente: nome utente dell'autenticazione di base. password: password dell'autenticazione di base. host: nome host con numero di porta. hostname: nome host senza numero di porta. porta: numero porta opzionale. nome percorso: percorso URL. query: oggetto analizzato contenente stringa di query, a meno che l'analisi non sia impostata su false. hash: la parte "frammento" dell'URL, incluso il cancelletto (#). href: l'URL completo. origine: l'origine dell'URL.

Se hai una stringa URL astratta (non dalla corrente window.location), puoi usare questo trucco:

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"

Grazie a Jlong