asked on

Parsing url in javascript

Hi,
I have a user enterable link in my application. If the user does not specify the protocol then i want to add http:// by default to it.
eg. if user enters www.google.com then i want to convert it to http://www.google.com
else if user enters http://www.google.com or https://... i want to keep it same.
basically i want to modify only those strings and prepend it with http:// if no url is specified.

How can i do it in javascript or jquery ?
Thanks

SOLUTION

Russ Suter

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SOLUTION

zephyr_hex (Megan)

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SOLUTION

Scott Fell

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Russ Suter

Here's the actual code snippet. I only used the jsfiddle example because it demonstrates the code actually working.

test1 = "http://www.mywebsite.com"
test2 = "https://www.mywebsite.com"
test3 = "www.mywebsite.com"

if (test1.startsWith("http://") || test1.startsWith("https://")) {
  alert('yes');
} else {
  alert('no');
}
if (test2.startsWith("http://") || test2.startsWith("https://")) {
  alert('yes');
} else {
  alert('no');
}
if (test3.startsWith("http://") || test3.startsWith("https://")) {
  alert('yes');
} else {
  alert('no');
}

Open in new window

Scott Fell

My code is wrong. url.substring(4) should be url.substring(0,4)

http://jsbin.com/foxojuyiko/edit?html,output

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script>
    $(function(){
  var url = $('#inputURL').val();
  if(url.substring(0,4)!=='http'){
     url = 'http://'+url;
  }
    $('#result').html(url);
});
  </script>
  <title>28931241</title>
</head>
<body>
<input id="inputURL" name="url" value="google.com">
  <div id="result"></div>
</body>
</html>

Open in new window

Scott Fell

I would add that if you are posting this data to update a database that will eventually be used to display information requiring http or https, then you should also have the same test in your server side code and not rely 100% on client side code for this.

ASKER CERTIFIED SOLUTION

ste5an

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Rohit Bajaj

ASKER

yes i want to preserve the protocol. it may start with ftp or anything else...
is there any js library which can parse a url gracefully or one can easily do it with some simple code like Aviv

Scott Fell

Did you try ste5an's code?

Rohit Bajaj

ASKER

Hi ste5an's code looks good... but i came across a scenario where this wont work.
eg. this is also a url : mailto:rohit@gmail.com
But the above code wont detect it....
I found a library for parsing uri's : https://medialize.github.io/URI.js/build.html
this library detects the mailto: protocol too..
But since i just need to separate out the protocol part, i want to avoid using a library... and instead use some regular expression....
The code URI.js is minified.... dont know how exactly they are separating out the protocol part.

ste5an

Yup. From RFC3986:

 URI         = scheme ":" hier-part [ "?" query ] [ "#" fragment ]
 scheme      = ALPHA *( ALPHA / DIGIT / "+" / "-" / "." )

Open in new window

Thus you need to look for the existence of a colon and whether the part before is a valid scheme name.

SOLUTION

Russ Suter

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer