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]*$"开发者_如何学JAVA,""));

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.

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.

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

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

 

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"

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

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"

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>