Жодна з цих відповідей, здається, не повністю стосується питання, яке вимагає довільного URL-адреси, а не конкретного URL-адреси поточної сторінки.
Спосіб 1: Використовуйте API URL (застереження: немає підтримки IE11)
Ви можете використовувати API URL (не підтримується IE11, але доступний у будь-якому іншому місці ).
Це також полегшує доступ до пошукових парам . Ще один бонус: його можна використовувати в Web Worker, оскільки він не залежить від DOM.
const url = new URL('http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');
Спосіб 2 (старий спосіб): Використовуйте вбудований аналізатор браузера в DOM
Використовуйте це, якщо вам це потрібно для роботи і на старих браузерах.
// 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');
Це воно!
Вбудований аналізатор браузера вже зробив свою роботу. Тепер ви можете просто взяти потрібні деталі (зауважте, що це працює для обох методів вище):
// 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:'
Бонус: парами пошуку
Швидше за все, ви, ймовірно, захочете розірвати параметри URL-адреси пошуку, оскільки "? StartIndex = 1 & pageSize = 10" не є надто корисним самостійно.
Якщо ви використовували метод 1 (API API) вище, ви просто використовуєте пошукові параметри:
url.searchParams.get('startIndex'); // '1'
Або отримати всі параметри:
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' }
Якщо ви використовували метод 2 (старий спосіб), ви можете використовувати щось подібне:
// 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' }