Получить относительный URL из абсолютного URL

Я хочу получить относительный URL-адрес из абсолютного URL-адреса в JavaScript с помощью regex и метода replace.

Я пробовал следующее, но он не работает:

var str="http://localhost/mypage.jsp";
document.write(str.replace("^[\w]*\/\/[\w]*$",""));

Ответ 1

Если по "относительному URL" вы понимаете часть строки после первого сингла /, тогда это просто:

document.write(str.replace(/^(?:\/\/|[^\/]+)*\//, ""));

Это соответствует всем символам до первого сингла / в строке и заменяет их пустой строкой.

In: http://localhost/my/page.jsp → Out: /my/page.jsp

Ответ 2

Хороший способ сделать это - использовать собственные возможности разбора ссылок на браузер, используя элемент a:

function getUrlParts(url) {
    var a = document.createElement('a');
    a.href = url;

    return {
        href: a.href,
        host: a.host,
        hostname: a.hostname,
        port: a.port,
        pathname: a.pathname,
        protocol: a.protocol,
        hash: a.hash,
        search: a.search
    };
}

Затем вы можете получить доступ к имени пути с помощью getUrlParts(yourUrl).pathname.

Свойства те же, что и для объекта location.

Ответ 3

Ниже фрагмента возвращает абсолютный URL страницы.

 var myURL = window.location.protocol + "//" + window.location.host  + window.location.pathname;

Если вам нужен только относительный URL-адрес, просто используйте ниже фрагмент

 var myURL=window.location.pathname;

Оформить заказ получить относительный URL-адрес с помощью Javascript для получения более подробной информации и нескольких способов достижения такой же функциональности.

Ответ 4

Не используйте низкоуровневые вещи, такие как regexp и т.д. Эти вещи были решены многими другими людьми. Особенно случаи кросс.

Посмотрите URI.js, он должен выполнить задание: http://medialize.github.io/URI.js/docs.html#relativeto

var uri = new URI("/relative/path");
// make path relative
var relUri = uri.relativeTo("/relative/sub/foo/sub/file"); // returns a new URI instance
// relUri == "../../../path"

Ответ 5

не забывайте, что \ является escape-символом в строках, поэтому, если вы хотите писать регулярное выражение в строках, убедитесь, что вы набираете \ дважды для каждого \, который вам нужен. Пример: /\w/ → "\\w"

Ответ 6

`URL.getRelativeURL`

Существует расширение общедоступного домена для стандартного объекта URL, называемого getRelativeURL.
Он получил несколько интересных трюков, таких как перезагрузка силы, вы должны проверить это!

Попробуйте вживую. Просмотр в Gist.

Пример использования

//syntax: <URL to convert>.getRelativeURL(<relative to this URL>)

//link from Mypage to Google
a = new URL("https://google.com/search");
a.getRelativeURL("https://mypage.com")
== "//google.com/search";

//link from the current location.href
a.getRelativeURL();

//link from Olutsee to Polk
var from = new URL("http://usa.com/florida/baker/olutsee");
var to   = new URL("http://usa.com/florida/polk");
to.getRelativeURL(from) == "../../polk";