Javascript Get absolute URL from relative escaped url

Question

I have a js function which receives a url like:

http://example.com/folder1/folder2/../page.html

Note that the url is absolute, but it has ../ in the middle so the actual html page it points to, lives in folder1 instead of folder2.

How can I convert http://example.com/folder1/folder2/../page.html into http://example.com/folder1/page.html?

Note that my url may contain multiple pieces of ../

Is there a built-in facility in Javascript for this ? (for ex: in C# I would run it through URI class which does this for me.)

UPDATE: to clarify a bit, I do not want to create or use a DOM element for this.

possible duplicate of Javascript: REGEX to change all relative Urls to Absolute — Donal Fellows
– Donal Fellows, Commented Dec 5, 2012 at 11:22

cnlevy · Accepted Answer · 2018-04-24 14:31:06Z

2

function relativeToAbsolute(relativeUrl) {
  var a = document.createElement('a');
  a.href = relativeUrl;
  return a.href;
}

url = relativeToAbsolute("http://example.com/folder1/folder2/../page.html");

console.log(url)

edited Apr 24, 2018 at 14:31

cnlevy

11.1k3 gold badges23 silver badges22 bronze badges

answered May 6, 2014 at 3:08

Marcus Cavanaugh

1661 silver badge5 bronze badges

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

2 Comments

Siddharth Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post.

Marcus Cavanaugh Over a year ago

It does, in fact, answer the question. As the author mentioned on NickWoodham's post, he did not have an anchor tag to work with. As my answer demonstrates, you do not need an HTML tag in the document to provide the functionality the author requested.

Cerbrus · Accepted Answer · 2012-12-05 11:42:07Z

1

This should do the trick:

function relativeToAbsolute(url){
    arr = url.split("/") // Cut the url up into a array
    while(!!~arr.indexOf("..")){ // If there still is a ".." in the array
        arr.splice(arr.indexOf("..") - 1, 2); // Remove the ".." and the element before it.
    }
    return arr.join("/"); // Rebuild the url and return it.
}
console.log(relativeToAbsolute("http://example.com/folder1/folder2/../page.html"));
console.log(relativeToAbsolute("http://example.com/folder1/folder2/../../page.html"));

// Returns:
// http://example.com/folder1/page.html
// http://example.com/page.html

answered Dec 5, 2012 at 11:42

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

2 Comments

Madushan Over a year ago

Thanks.. One (silly) question.. Can I replace while(!!~arr.indexOf("..")) with while(arr.indexOf("..") > -1) ? What's the difference ?

Cerbrus Over a year ago

Yes, you can. The difference is that !!~ uses abitwise invert (~) to output a "true-ish" value only if the searched string in in the array, and a double boolean not (!!) to cast the output value to true or false instead of a number. Performance-wise, it barely makes a difference, though. I just like the !!~ ;-)

Nick Woodhams · Accepted Answer · 2012-12-27 23:06:00Z

1

It's actually much simpler.

<a id="mylink" href="/static/img/photo.jpg">My Photo</a>

<script>
var javascript_object = document.getElementById('#mylink');
var url = javascript_object.href; //returns absolute url

//want to write it back? just reverse it
javascript_object.href = url;
</script>

Disclaimer: I have only tested in Chrome so far.

answered Dec 27, 2012 at 23:06

Nick Woodhams

12.8k11 gold badges56 silver badges52 bronze badges

1 Comment

Madushan Over a year ago

I tried this before, but it can't work with my specific scenario... (I receive the url only, which may not be bound to a DOM element) Thanks anyway. This would be the way to do it if the link is bound to a anchor tag..

Collectives™ on Stack Overflow

Javascript Get absolute URL from relative escaped url

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related