JavaScript - получить часть пути URL

180

Как правильно вытащить только путь из URL с помощью JavaScript?

Пример: у
меня есть URL
http://www.somedomain.com/account/search?filter=a#top,
но я просто хотел бы получить эту часть
/ account / search

Я использую jQuery, если есть что-то, что можно использовать.

javascript jquery url

— BuddyJoe
источник

427

Есть свойство встроенного 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 и т. д.

— Dylan

1

window.location.pathname.split ('/'). filter (function (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

Для регулярного выражения, которое работает, даже если нет пути, используйте:/.+?\:\/\/.+?(\/.+?)?(?:#|\?|)?$/

— Scottmas

3

Существует полезный метод веб-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-Parse

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

Согласно документации, он извлекает следующие части:

Возвращенный экземпляр URL содержит следующие свойства:

протокол: схема протокола URL (например, http :). косые черты: логическое значение, указывающее, следует ли за протоколом две прямые косые черты (//). auth: часть информации аутентификации (например, имя пользователя: пароль). username: имя пользователя базовой аутентификации. пароль: пароль базовой аутентификации. host: Имя хоста с номером порта. имя хоста: имя хоста без номера порта. порт: необязательный номер порта. путь: URL-путь. query: Анализируемый объект, содержащий строку запроса, если для синтаксического анализа не установлено значение false. hash: часть фрагмента URL, включая знак решетки (#). href: полный URL. origin: источник 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"

Благодаря джлонг

— krolovolk
источник