JavaScript - Dapatkan Porsi URL Path

Apa cara yang benar untuk menarik keluar jalur dari URL menggunakan JavaScript?

Contoh:
Saya punya URL
http://www.somedomain.com/account/search?filter=a#top
tetapi saya hanya ingin mendapatkan bagian ini
/ akun / pencarian

Saya menggunakan jQuery jika ada sesuatu di sana yang dapat dimanfaatkan.

Ada properti window.locationobjek bawaan yang akan menyediakannya untuk jendela saat ini.

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

Perbarui, gunakan properti yang sama untuk URL apa pun:

Ternyata skema ini sedang distandarisasi sebagai antarmuka yang disebut URLUtils , dan coba tebak? Baik yang ada window.locationobjek dan anchor elemen mengimplementasikan antarmuka.

Jadi, Anda dapat menggunakan properti yang sama di atas untuk URL apa pun - cukup buat jangkar dengan URL dan akses ke properti:

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]: Dukungan browser untuk properti yang menyertakan port tidak konsisten, Lihat: http://jessepollak.me/chrome-was-wrong-ie-was-right

Ini berfungsi di versi terbaru Chrome dan Firefox . Saya tidak memiliki versi Internet Explorer untuk diuji, jadi silakan menguji diri Anda dengan contoh JSFiddle.

Contoh JSFiddle

Ada juga URLobjek yang datang yang akan menawarkan dukungan ini untuk URL sendiri, tanpa elemen jangkar. Sepertinya tidak ada browser yang stabil mendukungnya saat ini, tetapi dikatakan akan datang di Firefox 26. Ketika Anda berpikir Anda mungkin memiliki dukungan untuk itu, coba di sini .

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

Akan memberi Anda array yang berisi semua bagian URL, yang dapat Anda akses seperti array normal.

Atau solusi yang lebih elegan yang disarankan oleh @Dylan, dengan hanya bagian jalur:

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

Jika ini adalah saat penggunaan url window.location.pathname sebaliknya menggunakan ekspresi reguler ini:

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

Ada metode API Web yang berguna yang disebut 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"))

Jika Anda ingin mendapatkan bagian dari URL yang Anda simpan dalam variabel, saya dapat merekomendasikan URL-Parse

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

Menurut dokumentasi, itu mengekstrak bagian-bagian berikut:

Contoh url yang dikembalikan berisi properti berikut:

protokol: Skema protokol URL (misalnya http :). garis miring: Boolean yang menunjukkan apakah protokol diikuti oleh dua garis miring (//). auth: Bagian informasi otentikasi (mis. nama pengguna: kata sandi). nama pengguna: Nama pengguna otentikasi dasar. kata sandi: Kata sandi otentikasi dasar. host: Nama host dengan nomor port. hostname: Nama host tanpa nomor port. port: nomor port opsional. pathname: jalur URL. kueri: Objek parsing yang berisi string kueri, kecuali parsing disetel ke false. hash: Bagian "fragmen" dari URL termasuk tanda pound (#). href: URL lengkap. asal: Asal usul URL.

Jika Anda memiliki string URL abstrak (bukan dari yang sekarang window.location), Anda dapat menggunakan trik ini:

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"

Terima kasih untuk jlong