Get an Absolute URL with JavaScript

By  on  

Dealing with URL formats can be a real nightmare.  Think of how just a few characters can effect a URL's absolute endpoint:

  • starting or not starting with /
  • starting with //
  • starting with ?
  • starting with #
  • ...and so on

What if you want an absolute URL though?  One that starts with http or https?  You can use an A element to get that absolute URL!

The JavaScript

I'm going to use a function that returns a function so that only one A element is ever created:

var getAbsoluteUrl = (function() {
	var a;

	return function(url) {
		if(!a) a = document.createElement('a');
		a.href = url;

		return a.href;
	};
})();

No matter how you pass in the URL string, the URL will come out absolute.  Of course strings like `javascript:;` wont come out any different, but real qualified URLs will come out as absolute!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • By
    Spyjax:  Ajax For Evil Using Dojo

    The idea of Spyjax is nothing new. In pasts posts I've covered how you can spy on your user's history with both MooTools and jQuery. Today we'll cover how to check user history using the Dojo Toolkit. The HTML For the sake of this...

  • By
    Translate Content with the Google Translate API and JavaScript

    Note:  For this tutorial, I'm using version1 of the Google Translate API.  A newer REST-based version is available. In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be...

Discussion

  1. You can actually even remove the condition, changing the code to

    var getAbsoluteUrl = (function() {
    	var a = document.createElement('a');
    
    	return function(url) {
    		a.href = url;
    
    		return a.href;
    	};
    })();
    
    • True but you’re creating the element even if getAbsoluteUrl is never called.

    • Anees Iqbal

      How about

      var getAbsoluteUrl = (function() {
      	var a = null;
      	return function(url) {
      		a = a || document.createElement('a');
      		a.href = url;
      
      		return a.href;
      	};
      })();
      
    • Adam

      David,

      As you pointed out you create the object whether or not its called, so why not do it this way then:

      var getAbsoluteUrl = function(url) {
        var a = document.createElement('a');
        getAbsoluteUrl = function(url) {
          a.href=url;
          return a.href;
        }
        return getAbsoluteUrl(url);  
      }
      

      The benefit of this approach is that you don’t execute anything unless getAbsoluteUrl is called. Its not a huge improvement, unless you use Immediately Invoked Function Expressions a LOT within your code to create closures.

    • Sean

      I’m confused as to why the second function? Couldn’t it be removed to be:

      var getAbsoluteUrl = function(url) {
        var a = document.createElement('a');
        a.href=url;
        return a.href;
      }
      
    • Adam

      Sean,

      The second function lets you create the anchor once and reuse it. This saves time and memory.

    • Sean

      Thanks Adam, that makes sense :)

  2. Uhhh…
    You could also use the URL() object.
    https://developer.mozilla.org/en-US/docs/Web/API/URL

  3. Hi David. Great idea for a post! To make it better don’t forget that every piece of advice needs a context — so tell the reader where to paste that code — is it in their address bar, do they need to tweet it, or do they need domain specific pre-requisite knowledge to get this to work?

    I’m on a “dumb it down please” mission today :)

  4. So is flexbox, technically. And Selection, and XMLDocument and HTMLPictureElement.

    It’s there. It’s stable and it’s cross browser (IE 10). It also lets you resolve absolute URLs with different domains than the existing page.

  5. Andy Earnshaw

    Patrick, you’re wrong about IE 10 support. That refers to URL.createObjectURL(), not the URL constructor that implements the URLUtils interface. This method works all the way back beyond IE 6, and I’ve been using it for years to parse and resolve URLs. It’s a handy little technique that avoids complex regular expressions, give credit where it’s due!

    • Well, even better then. Nice to know.

    • Do you have a source for that statement? I just tested Patrick’s example in IE 6 and IE 8 and they crashed with “‘URL’ is undefined”.

  6. Yeah or…

    (function(a){
    
    String.implement('toURL', function(){
      a.href = this;
      return this;
    });
    
    })(document.createElement('a'));
    
    • MaxArt

      You should warn that you’re using MooTools, @Olmo.

    • I was being playful with David :P, but if you’d like:

      (function(a){
      
        String.prototype.toURL = function(){
          a.href = this;
          return this;
        };
      
      })(document.createElement('a'));
      
    • Extending the prototype… a big no-no

    • MooTools? In 2015??? Well I never…

    • alberto.c

      Why is bad idea to extend the prototype?

  7. This is super easy! worth trying.

  8. Cant this work?

    location.protocol + "/root/path"

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!