JavaScript - Отримати частину шляху URL-адреси

179

Який правильний спосіб витягнути лише шлях із URL-адреси за допомогою JavaScript?

Приклад: у
мене є URL-адреса
http://www.somedomain.com/account/search?filter=a#top,
але я просто хотів би отримати цю частину
/ рахунок / пошук

Я використовую jQuery, якщо є щось, що може бути використане.

javascript jquery url

— BuddyJoe
джерело

425

Існує властивість вбудованого window.locationоб'єкта, який забезпечить це для поточного вікна.

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

Оновіть, використовуйте ті самі властивості для будь-якої URL-адреси:

Виявляється, ця схема стандартизується як інтерфейс під назвою URLUtils , і вгадайте, що? І існуючий window.locationоб'єкт, і елементи якоря реалізують інтерфейс.

Таким чином, ви можете використовувати ті самі властивості, наведені вище для будь-якої URL-адреси - просто створіть якір з URL-адресою та отримайте доступ до властивостей:

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]: Підтримка веб-переглядача для властивостей, що включають порт, не відповідає. Див.: Http://jessepollak.me/chrome-was-wrong-ie-was-right

Це працює в останніх версіях Chrome і Firefox . У мене немає версій Internet Explorer для тестування, тому будь ласка, протестуйте себе на прикладі JSFiddle.

Приклад JSFiddle

Також є URLоб’єкт, який буде надавати, який пропонує цю підтримку самих URL-адрес, без елемента прив’язки. Схоже, наразі не підтримують стабільні веб-переглядачі, але, як кажуть, він надходить у Firefox 26. Коли ви думаєте, що у вас може бути підтримка, спробуйте його тут .

— Ніколь
джерело

ОП запитав "URL-адресу", а не "поточну URL-адресу вікна". Що робити, якщо у вас є URL-адреса як рядок?

— Джош Ное

2

@JoshNoe Виявляється, тепер ви можете використовувати ті самі властивості для елементів якоря. Дивіться оновлену відповідь.

— Ніколь

Дякую за приємну інформацію. Я тестував IE 9 і IE 8 (використовуйте IE 9 для імітації) обидві роботи. Звичайно працює з Chrome і Firefox останньою версією :)

— Чжао

49

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

Дасть вам масив, що містить усі частини URL, до яких ви можете отримати доступ, як звичайний масив.

Або все більш елегантне рішення, запропоноване @Dylan, з лише частинами шляху:

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

— Хосе Фаети
джерело

2

window.location.pathname.split ('/'); є більш елегантним рішенням у більшості випадків, якщо ви намагаєтесь отримати доступ до різних розділів URL-адреси, як стандартний протокол, так і www.

— Ділан

1

window.location.pathname.split ('/'). filter (функція (v) {return v;}); видалить порожні елементи для Javascript 1.6 і вище.

— Дхаваль Дезай

28

Якщо це поточний URL, використовуйте window.location.pathname, інакше використовуйте цей регулярний вираз:

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

— ніхто
джерело

Практично ідеально, але на відміну від window.location.pathname, воно не включає літеру диска в імені шляху в Windows.

— Тео

1

Для регулярного вираження, яке працює навіть тоді, коли немає імені шляху, використовуйте:/.+?\:\/\/.+?(\/.+?)?(?:#|\?|)?$/

— Скотмас

3

Існує корисний метод Web API під назвою 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"))

Розгорніть фрагмент

— mplungjan
джерело

0

Якщо ви хочете отримати частини URL-адреси, які ви зберегли у змінній, я можу порекомендувати URL-розбір

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

Згідно з документацією, вона витягує такі частини:

Повернений екземпляр URL містить такі властивості:

протокол: схема протоколу URL-адреси (наприклад, http :). косої риски: Булевий сигнал, який вказує, чи слідкують за протоколом два передніх косої риски (//). auth: частина інформації про автентифікацію (наприклад, ім'я користувача: пароль). ім'я користувача: Ім'я користувача базової автентифікації. пароль: пароль базової автентифікації. хост: ім'я хоста з номером порту. ім'я хоста: ім'я хоста без номера порту. порт: Необов'язковий номер порту. ім'я: шлях URL. запит: Розбір об’єкта, що містить рядок запиту, якщо для синтаксичного розбору встановлено значення false. хеш: частина "фрагмента" URL-адреси, включаючи знак фунта (#). href: Повна URL-адреса. походження: походження URL-адреси.

— Маріан Клухспі
джерело

0

Якщо у вас є абстрактний рядок URL-адреси (не з поточного window.location), ви можете скористатися цим фокусом:

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

— krolovolk
джерело