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

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

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

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

Есть свойство встроенного 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. Если вы думаете, что у вас может быть поддержка, попробуйте здесь .

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

Даст вам массив, содержащий все части URL, к которым вы можете обращаться, как обычный массив.

Или еще более элегантное решение, предложенное @Dylan, только с частями пути:

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

Если это текущий URL, используйте window.location.pathname, в противном случае используйте это регулярное выражение:

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

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

Если вы хотите получить части 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.

Если у вас есть абстрактная строка 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"

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