JavaScript - URL Yolunun Kısmını Alın

179

JavaScript kullanarak bir URL'den yalnızca yolu çıkarmanın doğru yolu nedir?

Örnek:
URL
http://www.somedomain.com/account/search?filter=a#top var
ama sadece bu bölümü / hesabı / aramayı almak istiyorum

Kaldırabileceğiniz bir şey varsa jQuery kullanıyorum.

javascript jquery url

— BuddyJoe
kaynak

425

Yerleşik window.locationnesnenin geçerli pencere için bunu sağlayacak bir özelliği vardır .

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

Güncelle, herhangi bir URL için aynı özellikleri kullanın:

Bu şemanın URLUtils adlı bir arayüz olarak standartlaştırıldığı ortaya çıkıyor ve tahmin edin ne oldu? Hem mevcut window.locationnesne hem de bağlantı elemanları arayüzü uygular.

Dolayısıyla, herhangi bir URL için yukarıdaki aynı özellikleri kullanabilirsiniz - URL ile bir bağlantı oluşturup özelliklere erişmeniz yeterlidir:

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]: Bağlantı noktası içeren özellikler için tarayıcı desteği tutarlı değil, Bkz: http://jessepollak.me/chrome-was-wrong-ie-was-right

Bu, Chrome ve Firefox'un en son sürümlerinde çalışır . Test etmek için Internet Explorer sürümlerim yok, bu yüzden lütfen kendinizi JSFiddle örneğiyle test edin.

JSFiddle örneği

Bağlantı URLöğesi olmadan URL'lerin kendileri için bu desteği sunacak bir de nesne var. Şu anda hiçbir kararlı tarayıcı desteklemiyor gibi görünüyor, ancak Firefox 26'da geldiği söyleniyor. Bunu destekleyebileceğinizi düşündüğünüzde, buradan deneyin .

— Nicole
kaynak

OP, "pencerenin geçerli URL'sini" değil, "bir URL" istedi. Dize olarak bir URL'niz varsa ne olur?

— Josh Noe

2

@JoshNoe Artık bağlantı elemanlarında aynı özellikleri kullanabileceğiniz ortaya çıkıyor. Güncellenmiş cevaba bakınız.

— Nicole

Güzel bilgi için teşekkürler. Ben IE 9 ve IE 8 ile test (simüle IE 9 kullanın) her ikisi de çalışır. Tabii ki Chrome ve Firefox ile en son sürüm :)

— Zhao

49

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

Normal bir dizi gibi erişebileceğiniz tüm URL bölümlerini içeren bir dizi verir.

Ya da @Dylan tarafından önerilen ve sadece yol parçalarıyla daha da zarif bir çözüm:

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

— Jose Faeti
kaynak

2

window.location.pathname.split ( '/'); URL'nin farklı bölümlerine standart protokolü ve www vb. erişmeye çalışıyorsanız çoğu durumda daha zarif bir çözümdür

— Dylan

1

window.location.pathname.split ('/'). filtre (işlev (v) {dönüş v;}); Javascript 1.6 ve üstü için boş öğeleri kaldıracaktır.

— Dhaval Desai

28

Bu geçerli url ise window.location.pathname'i kullanın, aksi takdirde bu normal ifadeyi kullanın:

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

— kimse
kaynak

Neredeyse mükemmel - ancak window.location.pathname'den farklı olarak, Windows üzerindeki yol adına sürücü harfini içermez.

— Theo

1

Bir yol adı olmasa bile çalışan bir normal ifade için şunu kullanın:/.+?\:\/\/.+?(\/.+?)?(?:#|\?|)?$/

— Scottmas

3

URL adı verilen kullanışlı bir Web API yöntemi var

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

Snippet'i genişlet

— mplungjan
kaynak

0

Bir değişkenin içinde sakladığınız bir URL'nin bölümlerini almak istiyorsanız, URL-Parse'yi önerebilirim

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

Belgelere göre, aşağıdaki parçaları çıkarır:

Döndürülen url örneği aşağıdaki özellikleri içerir:

protokol: URL'nin protokol şeması (örn. http :). eğik çizgi: Protokolün ardından iki eğik çizgi (//) gelip gelmediğini gösteren bir boolean. auth: Kimlik doğrulama bilgileri bölümü (ör. kullanıcı adı: şifre). username: Temel kimlik doğrulamanın kullanıcı adı. password: Temel kimlik doğrulama şifresi. host: Port numarasına sahip host adı. ana bilgisayar adı: Bağlantı noktası numarası olmayan ana bilgisayar adı. port: İsteğe bağlı port numarası. pathname: URL yolu. query: Ayrıştırma false olarak ayarlanmadığı sürece sorgu dizesi içeren ayrıştırılmış nesne. hash: URL'nin pound işareti (#) dahil olmak üzere "fragman" bölümü. href: Tam URL. origin: URL'nin kaynağı.

— Marian Klühspies
kaynak

0

Soyut bir URL dizeniz varsa (geçerli değil window.location), bu numarayı kullanabilirsiniz:

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"

Jlong sayesinde

— krolovolk
kaynak