JavaScript - Nhận phần đường dẫn URL

Cách chính xác để rút ra đường dẫn từ URL bằng JavaScript là gì?

Ví dụ:
Tôi có URL
http://www.somedomain.com/account/search?filter=a#top
nhưng tôi chỉ muốn lấy phần
/ tài khoản / tìm kiếm này

Tôi đang sử dụng jQuery nếu có bất cứ thứ gì có thể được tận dụng.

Có một thuộc tính của window.locationđối tượng tích hợp sẽ cung cấp điều đó cho cửa sổ hiện tại.

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

Cập nhật, sử dụng các thuộc tính tương tự cho bất kỳ URL nào:

Hóa ra lược đồ này đang được chuẩn hóa như một giao diện gọi là URLUtils , và hãy đoán xem? Cả hai window.locationđối tượng hiện có và các phần tử neo thực hiện giao diện.

Vì vậy, bạn có thể sử dụng các thuộc tính tương tự ở trên cho bất kỳ URL nào - chỉ cần tạo một neo với URL và truy cập các thuộc tính:

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]: Hỗ trợ trình duyệt cho các thuộc tính bao gồm cổng không nhất quán, Xem: http://jessepollak.me/chrome-was-wrong-ie-was-right

Điều này hoạt động trong các phiên bản mới nhất của Chrome và Firefox . Tôi không có phiên bản Internet Explorer để kiểm tra, vì vậy vui lòng tự kiểm tra với ví dụ về JSFiddle.

Ví dụ về JSFiddle

Ngoài ra còn có một URLđối tượng sắp tới sẽ cung cấp hỗ trợ này cho chính URL mà không có phần tử neo. Có vẻ như không có trình duyệt ổn định nào hỗ trợ nó vào thời điểm này, nhưng nó được cho là sẽ xuất hiện trong Firefox 26. Khi bạn nghĩ rằng bạn có thể có hỗ trợ cho nó, hãy dùng thử tại đây .

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

Sẽ cung cấp cho bạn một mảng chứa tất cả các phần URL mà bạn có thể truy cập như một mảng bình thường.

Hoặc một giải pháp thanh lịch hơn bao giờ hết được đề xuất bởi @Dylan, chỉ với các phần đường dẫn:

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

Nếu đây là url hiện tại, hãy sử dụng window.location.pathname nếu không hãy sử dụng biểu thức chính quy này:

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

Có một phương pháp API Web hữu ích được gọi là 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"))

Trong trường hợp bạn muốn nhận các phần của URL mà bạn đã lưu trữ trong một biến, tôi có thể đề xuất Phân tích URL

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

Theo tài liệu, nó trích xuất các phần sau:

Ví dụ url được trả về chứa các thuộc tính sau:

giao thức: Sơ đồ giao thức của URL (ví dụ http :). dấu gạch chéo: Một boolean cho biết liệu giao thức được theo sau bởi hai dấu gạch chéo (//). auth: Phần thông tin xác thực (ví dụ: tên người dùng: mật khẩu). Tên người dùng: Tên người dùng xác thực cơ bản. mật khẩu: Mật khẩu xác thực cơ bản. máy chủ: Tên máy chủ với số cổng. tên máy chủ: Tên máy chủ không có số cổng. cổng: Số cổng tùy chọn. tên đường dẫn: đường dẫn URL. truy vấn: Đối tượng được phân tích cú pháp chứa chuỗi truy vấn, trừ khi phân tích cú pháp được đặt thành false. hàm băm: Phần "đoạn" của URL bao gồm dấu thăng (#). href: URL đầy đủ. nguồn gốc: Nguồn gốc của URL.

Nếu bạn có một chuỗi URL trừu tượng (không phải từ hiện tại window.location), bạn có thể sử dụng thủ thuật này:

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"

Cảm ơn jlong