Get the full URI from the href property of a link

Question

Hello SO,

I would like to have a confirmation on some point.

My goal is to always get the same string (which is the URI in my case) while reading the href property from a link. Example:

<a href="test.htm" /> with base_url = http://domain.name/

<a href="../test.htm" /> with base_url = http://domain.name/domain/

<a href="http://domain.name/test.htm" /> with base_url = any folder from http://domain.name/

I need to get http://domain.name/test.htm from the 3 situations above (or any other identical string).

After some tests, it appears that my_a_dom_node.href always return the full-qualified URI, including the http://domaine.name, which should be okay for what I want.

jQuery has a different behaviour and $(my_a_dom_node).attr('href') returns the content (text) that appears inside the HTML. So my trick is to use $(my_a_dom_node).get(0).href to get the full URI.

The question is: can I rely on this?

Answer 1

You could recompose the full url using a bit of javascript :

function parseLink(link) {
    var baseUrl = location.href.substring(0,location.href.lastIndexOf('/'));
    if (link.indexOf('/') != -1) {
        link = link.substring(link.lastIndexOf('/')); 
    } else {
        link = "/"+ link;
    }
    var fullUrl = baseUrl + link;
    return fullUrl
}

Answer 2

YES, you can rely!

Once when people was using simple javascript many asked the opposite of what you are asking, they wanted to get the real url as written in the href attribute and not the full one, in such case they used to simply do:

my_a_dom_node.getAttribute('href', 2); //works both IE/FF

Then it came jQuery that helped people not to waste their time in finding out they would need such a huge amount of code and it returns the real url as written in the href attribute. Funny that now someone is asking how to get the full url when jQuery returns the one in the href attribute.

Answer 3

Yes, you can rely on this.

Looking through the jQuery (1.4.2) source code, I see the jQuery.attr() function being used (condensed to the relevant parts):

jQuery.extend({
  // ...
  attr: function( elem, name, value, pass ) {
    // ...

    var attr = !jQuery.support.hrefNormalized && notxml && special ?
               // Some attributes require a special call on IE
               elem.getAttribute( name, 2 ) :
               elem.getAttribute( name );

    // Non-existent attributes return null, we normalize to undefined
    return attr === null ? undefined : attr;    
  }
});

So it´effectively calls elem.getAttribute('href') which returns the actual attribute value, while the href property by design returns the canonical URL.

However, there is a reference to jQuery.support.hrefNormalized, of which the jQuery support site has to say:

• hrefNormalized: Is equal to true if the .getAttribute() method retrieves the href attribute of elements unchanged, rather than normalizing it to a fully-qualified URL. (It is currently false in IE, the URLs are normalized). DOM l3 spec

This basically means that jQuery finds out browser behavior on its own and adapts accordingly to provide a consistent result.