从绝对URL获取相对URL

Question

从绝对URL获取相对URL

40

我想使用正则表达式和replace方法从JavaScript中的绝对路径获取相对路径。

我尝试了以下代码，但它不起作用：

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

- user549757

1

我想要将输出作为“/mypage.jsp”，提供给“http://localhost/mypage.jsp”。 - user549757

8个回答

31

下面的代码片段返回页面的绝对URL。

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

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

 var myURL=window.location.pathname;

查看使用JavaScript获取相对URL以获得更多详细信息和实现相同功能的多种方式。

- Srinivas Ramakrishna

location.pathname 显然是获取相对形式的活动 URL 的最佳选择！但为什么不直接使用 location.href 获取绝对 URL 呢？ - MalcolmOcean

4

为什么window.location.pathname显然是正确答案，但排名如此靠后？ - thedayturns

9

这个答案是错误的，如果URL带有查询参数或哈希值，而它们不应该被省略，则会出错。 - jimrandomh

30

如果你所说的"相对URL"指的是第一个单独的 / 后面的部分，那么很简单：

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

该正则表达式匹配字符串中第一个单独的/之前的所有字符，并用空字符串替换它们。

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

- Tim Pietzcker

@Tim - 按照你说的方式它不起作用。它把整个URL都输出了 :( - user549757

@Tim - 是的，现在可以了。但还有一个小问题。我想要第二个单斜杠后面的部分，请问你能帮我修改一下这个正则表达式吗？ - user549757

@Tim - 嘿，谢谢Tim +1，我用str.replace(/[\w]*:\/\/[\w]*\/[\w]*/,"")让它工作了，但还在等待你的解决方案。 :) - user549757

在您的示例中（在您的问题中），只有一个斜杠 - 那么应该发生什么？ - Tim Pietzcker

@Tim - 嗯，根据我的问题，我接受了你的答案。但是它并没有满足我的实际需求，所以我一直在等待你对我的评论做出回应，因为我认为你的方法更有前途。如果您能告诉我如何获得第二个单斜杠后面的部分，我将不胜感激。 - user549757

显示剩余2条评论

21

const url = new URL('https://www.example.com/path/#anchor?query=value');
const rel = url.toString().substring(url.origin.length)

console.log(rel)
// Output: /path/#anchor?query=value

- nullable

3

这对我来说完美地运作了，看起来是最简单的答案。 - Jake

5

不要使用正则表达式等低级工具。这些问题已经被其他很多人解决了，特别是一些边缘情况。

看一下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"

- koppor

1

别忘了在字符串中，\是转义字符，所以如果你想要在字符串中写正则表达式，请确保每个你需要的\都要输入两次\。例如：/\w/ → "\\w"

- LeleDumbo

1

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

- m93a

1

请注意，您必须在Gist中包含代码，并修改URL.prototype。 - Raine Revere

0

以下是一个脚本，我们只有一个问题，那就是手动操作。我们想要添加分割属性，即如果您的站点链接是：Get relative URL from absolute URL，我们想要的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>

- Shivasagar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lonesomeday · Accepted Answer

一个不错的方法是利用浏览器本身的链接解析能力，使用 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对象相同。

从绝对URL获取相对URL

URL.getRelativeURL

现场试用。 在Gist上查看。

`URL.getRelativeURL`

现场试用。在Gist上查看。