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

Question

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

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

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

Answer 1

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

Answer 2

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

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

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

In: http://localhost/my/page.jsp -> Out: /my/page.jsp

Answer 3

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

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

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

 var myURL=window.location.pathname;

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

Answer 4

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

Взгляните на 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"

Answer 5

URL.getRelativeURL

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

Попробуй вживую. Посмотреть на Гист.

---

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

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

Answer 6

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

Answer 7

Ниже вы можете найти скрипт, в котором у нас есть только одна проблема - ручная работа, мы хотим добавить атрибут split, то есть, если ссылка на ваш сайт: Получить относительный URL из абсолютного URL

мы хотим использовать URL, как показано ниже: / questions / 6263454 / get -lative-url-from-absolute-url

, поэтому в приведенном ниже коде мы должны добавить .com вместо .net, т.е. varres = at.split (". net");здесь мы хотим добавить в соответствии с нашим требованием, теперь мне нужно разделить после .com, чтобы код был "var res = at.split (". com ");".

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

$(document).ready(function(){
	$("a").each(function(){
    var at= $(this).attr("href");
    var res = at.split(".net");
    var res1 = res[0];
    var res2 = res[1];
    alert(res2);
    $(this).attr("href",res2);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <a href="https://jsfiddle.net/boilerplate/jquery2">Change color</a>
</div>
<div id="banner-message">
  <p>Hello World</p>
  <a href="https://jsfiddle.net/boilerplate/jquery3">Change color</a>
</div>