javascripturlmobilebrowser

Will 'http:url' work for all browsers and devices?


In making a function that validates a user URL and prepends http: at the front, I have to take cases of www, https and // into account as being valid urls. The way I have it written now (see below), I only prepend http: , so that cases of //stackoverflow.com don't turn into http: ////stackoverflow.com.

This means that a URL like stackoverflow.com becomes http:stackoverflow.com.

In Firefox and Chrome, this works just fine, but these URLS will be clicked from a variety of browsers and devices. Is it something that'll work universally? It'll be easy to rewrite this check for a // case, but I'm interested in the answer.

Prepend method:

function prependHTTPtoWebURL() {
    var url = (el('org_website').value);
    var httpVar;
    var testFor;

    if (url) {// If there's a website URL value
        testFor = url.toLowerCase();
        if (testFor.indexOf("http") != 0){
            httpVar = 'http:'; //add it
            url = httpVar + url;
         el('org_website').value = url;
     }
    }
}

Solution

  • Try playing with regex. Check this code for instance:

    var someurl = "www.google.com";
    var otherurl = "google.com";
    var anotherurl = "//google.com";
    
    function prependHTTPtoWebURL(url) {
        var newurl = url.replace(/^(http)?(:)?(\/\/)?/i,'');
        return 'http://' + newurl;
    }
    
    console.log(prependHTTPtoWebURL(someurl));
    console.log(prependHTTPtoWebURL(otherurl));
    console.log(prependHTTPtoWebURL(anotherurl));
    

    The ouput in console.log will be:

    http://www.google.com
    http://google.com
    http://google.com
    

    Since you are specifying a subdomain (www) on the first one, that is respected. It avoids ending with four diagonals, like http:////. If your url was something like :google.com, it would also fix it correctly.

    You can see it live here: http://jsfiddle.net/zRBUj/

    Edit: Adding the /i Kate mentioned.