get url relative to another url in javascript

Question

i want to get url relative to another url

for example

"../d.html".relativeTo("/a/b/c.html"); //==> "/a/d.html"

"g.html".relativeTo("/a/b/c.html"); //==> "/a/b/g.html"

"./f/j.html".relativeTo("/a/b/c.html"); //==> "/a/b/f/j.html"

"../../k/w.html".relativeTo("/a/b/c.html"); //==> "/k/w.html"

"http://www.google.com".relativeTo("/a/b/c.html"); //==> "http://www.google.com"

i think there is a simple solution for that because browsers does it for relative url links.

i have tried

String.prototype.relativeTo=function(input){
    if(/^https?:\/\//i.test(this)) {
        return this.valueOf();
    }
    else {
        var a = document.createElement("a");
        a.href = input.replace(/\w+\.\w+/, "") + this;
        return a.href;
    }
}

but it returns absolute url

is there some simple way to do that?

"is there some simple way" .... define "simple". Show us what you have tried. This isn't a code writing service and you are expected to show your attempts to solve your issue yourself...then people help when code doesn't act as expected — charlietfl
– charlietfl, Commented Oct 7, 2016 at 17:47
i want to write code to process on strings and check these test cases but i though it should have simple solution — fingerpich
– fingerpich, Commented Oct 7, 2016 at 18:02
But the key there is that you need to write the code....and ask questions here when you have problems with that code. You have numerous conditions to check so no it's not really a simple exercise. What is your use case? — charlietfl
– charlietfl, Commented Oct 7, 2016 at 18:08
well there possibly is but that depends on what higher level problem you are trying to solve. Based on those string evaluations and expected output shown ...you would need to write your own parser — charlietfl
– charlietfl, Commented Oct 7, 2016 at 18:24
@jgozal they typically fall into 2 main categories. One being...I tried some stuff that didn't work ... show me how. --OR-- Give me the code , I haven't tried or done any research ... then the minority are legit but show little sign of research effort. It's always best to try to prompt some sign of effort put in. Poorly phrased questions are also hard to interpret users intent as this one is — charlietfl
– charlietfl, Commented Oct 7, 2016 at 21:42

Ashot · Accepted Answer · 2017-03-08 09:29:57Z

2

Really interesting, anyway I would like to answer

String.prototype.startsWith = function (input) {
   return this.substring(0, input.length) === input;
};

String.prototype.relativeTo = function (input) {
   var toTop = /..\//gi;
   var abs = /^https?:\/\//i;
   var inCurrent = './';
   var matches;

   if (abs.test(this)) {
     return this.valueOf();
   }

   function getLastSegmentIndex() {
     return (input.lastIndexOf('/') + 1) - (input.length - 1);
   }

   try {
     matches = this.match(toTop).length;
   } catch (e) {
     matches = 0;
   }

   if (!matches) {
     return input.slice(0, -getLastSegmentIndex()) + this.valueOf();
   } else if (this.startsWith(inCurrent)) {
     return input.slice(0, -getLastSegmentIndex()) +     


     this.replace(inCurrent, '');
   }

   var segments = input.split('/');
   var i = 0;

   for (; i < matches + 1; i++) {
    segments.pop();
   }

   segments.push((this.replace(toTop, '')));
   return segments.join('/');
};

edited Mar 8, 2017 at 9:29

answered Oct 7, 2016 at 20:26

Ashot

1,3091 gold badge12 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fingerpich Over a year ago

thank you. just change "return this;" to "return this.valueOf();" for absolute url. thank you again.

Collectives™ on Stack Overflow

get url relative to another url in javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related