Không có câu trả lời nào trong số này dường như giải quyết hoàn toàn câu hỏi, trong đó yêu cầu một url tùy ý, không cụ thể là url của trang hiện tại.
Phương pháp 1: Sử dụng API URL (báo trước: không hỗ trợ IE11)
Bạn có thể sử dụng API URL (không được IE11 hỗ trợ, nhưng có sẵn ở mọi nơi khác ).
Điều này cũng làm cho nó dễ dàng truy cập các thông số tìm kiếm . Một phần thưởng khác: nó có thể được sử dụng trong Công nhân web vì nó không phụ thuộc vào DOM.
const url = new URL('http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');
Phương pháp 2 (cách cũ): Sử dụng trình phân tích cú pháp tích hợp của trình duyệt trong DOM
Sử dụng cái này nếu bạn cần cái này để làm việc trên các trình duyệt cũ hơn.
// Create an anchor element (note: no need to append this element to the document)
const url = document.createElement('a');
// Set href to any path
url.setAttribute('href', 'http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');
Đó là nó!
Trình phân tích cú pháp tích hợp của trình duyệt đã hoàn thành công việc của nó. Bây giờ bạn chỉ có thể lấy các phần bạn cần (lưu ý rằng điều này hoạt động cho cả hai phương pháp trên):
// Get any piece of the url you're interested in
url.hostname; // 'example.com'
url.port; // 12345
url.search; // '?startIndex=1&pageSize=10'
url.pathname; // '/blog/foo/bar'
url.protocol; // 'http:'
Phần thưởng: Tìm kiếm thông số
Rất có thể bạn cũng muốn phá vỡ các thông số url tìm kiếm, vì '? Start Index = 1 & pageSize = 10' không thể sử dụng quá nhiều.
Nếu bạn đã sử dụng Phương pháp 1 (API URL) ở trên, bạn chỉ cần sử dụng getters searchParams:
url.searchParams.get('startIndex'); // '1'
Hoặc để có được tất cả các tham số:
function searchParamsToObj(searchParams) {
const paramsMap = Array
.from(url.searchParams)
.reduce((params, [key, val]) => params.set(key, val), new Map());
return Object.fromEntries(paramsMap);
}
searchParamsToObj(url.searchParams);
// -> { startIndex: '1', pageSize: '10' }
Nếu bạn đã sử dụng Phương pháp 2 (cách cũ), bạn có thể sử dụng một cái gì đó như thế này:
// Simple object output (note: does NOT preserve duplicate keys).
var params = url.search.substr(1); // remove '?' prefix
params
.split('&')
.reduce((accum, keyval) => {
const [key, val] = keyval.split('=');
accum[key] = val;
return accum;
}, {});
// -> { startIndex: '1', pageSize: '10' }