Get relative URL from absolute URL

问题:

I want to get the relative URL from an absolute URL in JavaScript using regex and the replace method.

I tried the following but it is not working:

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

回答1:

If by "relative URL" you mean the part of the string after the first single /, then it's simple:

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

This matches all the characters up to the first single / in the string and replaces them with the empty string.

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

回答2:

A nice way to do this is to use the browser's native link-parsing capabilities, using an a element:

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
    };
}

You can then access the pathname with getUrlParts(yourUrl).pathname.

The properties are the same as for the location object.

回答3:

Below snippet returns the absolute URL of the page.

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

If you need only the relative url just use below snippet

 var myURL=window.location.pathname;

Checkout get relative URL using Javascript for more details and multiple ways to achieve the same functionality.

回答4:

Don't use low-level stuff like regexp etc. These things have been solved by so many other people. Especially the edge cases.

Have a look at URI.js, it should do the job: 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:

URL.getRelativeURL

There's an public-domain extension for the standard URL object called getRelativeURL.
It's got a few cool tweaks like force reload, you should check it out!

Try it live.       View on Gist.

---

Example usage

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

回答6:

don't forget that \ is an escape character in strings, so if you would like to write regex in strings, ensure you type \ twice for every \ you need. Example: /\w/ → "\\w"

回答7:

Below you can find script on that here we have only one problem which is one manual work, we want to add split attribute ie, if your site link is: Get relative URL from absolute URL

we want to url as below: /questions/6263454/get-relative-url-from-absolute-url

so in below code we have to add .com instead of .net ie, var res = at.split(".net"); here we want to add as per our requirement now i need to seperate after .com so code will be "var res = at.split(".com");".

i think you guys got that point if you have still doubt let me know please and to see changes in code by inspecting:

$(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>