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](http://stackoverflow.com/questions/7544550/javascript-regex-to-change-all-relative-urls-to-absolute) — Donal Fellows, Dec 05 '12 at 11:22

score 2 · Answer 1 · edited Apr 24 '18 at 14:31

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 '18 at 14:31

cnlevy

10,630
3
20
21

answered May 06 '14 at 03:08

Marcus Cavanaugh

166
1
5

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](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – Siddharth May 06 '14 at 03:49
1

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. – Marcus Cavanaugh May 06 '14 at 18:24

score 1 · Accepted Answer · answered Dec 05 '12 at 11:42

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 05 '12 at 11:42

Cerbrus

70,800
18
132
147

Thanks.. One (silly) question.. Can I replace `while(!!~arr.indexOf(".."))` with `while(arr.indexOf("..") > -1)` ? What's the difference ? – Madushan Dec 06 '12 at 06:46
1

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](http://jsperf.com/indexof-doubly-negated-bitwise-not-vs-greater-than-or-e/2), though. I just like the `!!~` ;-) – Cerbrus Dec 06 '12 at 07:22

score 1 · Answer 3 · answered Dec 27 '12 at 23:06

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 '12 at 23:06

Nick Woodhams

11,977
10
50
52

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.. – Madushan Dec 28 '12 at 02:38

Javascript Get absolute URL from relative escaped url

3 Answers3