`URL.getRelativeURL`

Question

我想使用regex和replace方法从JavaScript中获取绝对URL的相对URL。

我尝试了以下操作，但它无法正常工作：

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

如果“相对网址”是指第一个/之后的字符串部分，那么很简单：

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

这匹配字符串中第一个单/的所有字符，并用空字符串替换它们。

在：http://localhost/my/page.jsp - ＆gt;出：/my/page.jsp

Answer 3

以下代码段返回页面的绝对网址。

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

如果您只需要相对网址，请使用以下代码段

 var myURL=window.location.pathname;

结帐get relative URL using Javascript了解更多详情和实现相同功能的多种方法。

Answer 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"

Answer 5

不要忘记\是字符串中的转义字符，因此如果您想在字符串中编写正则表达式，请确保为所需的每个\键入\两次。示例：/\w/→"\\w"

Answer 6

`URL.getRelativeURL`

标准URL对象的公共域扩展名为 getRelativeURL 。
它有一些很酷的调整，如强制重装，你应该检查一下！

Try it live. View on 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";

Answer 7

下面您可以找到脚本，在这里我们只有一个问题，即一项手动工作，我们要添加split属性，即，如果您的站点链接为：Get relative URL from absolute URL

我们要输入如下网址： / questions / 6263454 / get-relative-url-from-absolute-url

因此，在下面的代码中，我们必须添加.com而不是.net，即， var res = 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>

Answer 8

const url = new URL(absoluteUrl);
const rel = url.toString().substring(url.origin.length)

从绝对URL获取相对URL

8 个答案:

`URL.getRelativeURL`

Try it live. View on Gist.