How Can I Validate A Url In Javascript Using Regular Expression

i want to validate a textbox who have some url value like blogs address or site adress how can i validate this textbox in js

Solution 1:

I assume, that you know how to get the value of <input> with JavaScript. So your problem is writing the specific function for validating the URL.

First we might consider checking that the URL is syntactically correct.

Some examples, that our URL validator should definitely consider OK:

http://www.example.com.
http://www.google.ee/search?q=foo&sourceid=opera&ie=utf-8&oe=utf-8
https://ama-z-on.co.uk/index.html?a=hei%20hoo
ftp://ftp.linux.ee/public/gentoo/i386/portage-snapshot.tar.bz
http://he.wikipedia.org/wiki/שטרגליים#.D7.A8.D7.90.D7.95_.D7.92.D7.9D
sftp://123.1.255.128:80/pub

And that's only a small fraction of the real variety of URL-s possible. And HTTP and FTP aren't the only protocols possible for URL. Oh man, that URL-validation is really hard.

But lets assume that a valid URL should start with some letters, then "://" and after that what ever. To test that kind of pattern you would use a regular expression which in JavaScript looks like this:

functionvalidateUrl(url) {
  return/^[a-z]+:\/\//i.test(url);
}

Regular expressions are a whole big topic, that you should consider learning by yourself, but just a brief explanation here:

• / - start of regular expression
• ^ - matches the beginning of string
• [a-z] - matches either a, b, c, ..., x, y, or z.
• + - means that the previous pattern can be repeated one or more times.
• : - matches the colon symbol itself.
• \/ - matches forward-slash / (without the backslash JavaScript would think it's the end of regular expression).
• / - ends the regular expression.
• i - this is a modifier, that makes this regular expression case-insensitive.
• .test(url) - calls the test method of regular expression object with url as the parameter. When parameter matches the regular expression, it returns true otherwise false.

Additionally you might want to allow entering an URL without the http:// part - this means you really need to validate the domain name or IP address or whatever that follows it.

I guess you are pretty confused by now, and that's intentional. You really shouldn't write JavaScript to do URL validation by yourself, it's too hard to get it right. Instead you should use a library function, that is tested and confirmed to be correct by many experts.

Maybe the JavaScript fraimwork you are using already has a good tool for that job. In that case use it. Unfortunately I can not suggest any specific library for URL validation specifically.

Additionally you might want to consider pinging the URL as Josh Stodola suggested, to check that it really exists. Although, the particular way Josh suggest, might be problematic in case the resource referenced by URL is 10GB file :)

Solution 2:

Do a basic RegExp test for formatting. Then ping the URL using an XMLHttpRequest to make sure it exists. An example using jQuery...

var url = $("#txtUserWebSite").val();
var reg = /^(([\w]+:)?\/\/)?(([\d\w]|%[a-fA-f\d]{2,2})+(:([\d\w]|%[a-fA-f\d]{2,2})+)?@)?([\d\w][-\d\w]{0,253}[\d\w]\.)+[\w]{2,4}(:[\d]+)?(\/([,-+_~.\d\w]|%[a-fA-f\d]{2,2})*)*(\?(&?([,-+_~.\d\w]|%[a-fA-f\d]{2,2})=?)*)?(#([,-+_~.\d\w]|%[a-fA-f\d]{2,2})*)?$/; 

if(!reg.test(url)) {
  alert("Invalid URL!");
  returnfalse;
}

$.get(url, function(dat, stat) {
  if(stat == "success")
    alert("Valid URL!");
  elsealert("Invalid URL!");
})

Solution 3:

var regExpUrl = newRegExp( "^((http|https|ftp)\://){1}([a-zA-Z0-9\.\-]+\.(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$");

var inputArrs = [
	"http://190.190.1.190:8080",
	"https://190.190.1.190:8080",
	"http://190.190.1.190:8080/",
	"http://190.190.1.190:8080/xampp/",
	"http://190.190.1.190:8080/testproject",
	"http://190.190.1.190:8080/testproject/admin/index.php",
	"http://190.190.1.190:8080/testproject/admin/index.php?a=asdf&asdf",
	"http://190.190.1.190:8080/phpmyadmin",
	"http://www.google.com.au",
	"https://www.google.com.au/asdf/asdf/asdfasdf?asdf=asdf&asdf=asdf",
	"http://google.com.au",
	"https://google.com.au",
	"www.google.com.au",
	"google.com.au",
	"http://www.google.com.au",
	"test",
	"!@#!@#!@#",
	"123",
	"210.110",
	"y.y.y.y",
	"255.0.0.y",
	"666.10.10.20",
	"4444.11.11.11",
	"33.3333.33.3",
	"190.190.1.190",
	"190.190.1.190",
	"190.190.1.190:80",
	"190.190.1.190:8080",
	"190.190.1.190:",
	
];

inputArrs.forEach(function(input) {
	if(regExpUrl.test(input)) {
		res = "URL/IP Valid";
	} else {
		res = "Invalid URL/IP";
	}
	prevVal = document.getElementById("response").innerHTML;
    document.getElementById("response").innerHTML = prevVal + "<br/>" + input + " = " + res + "<br/>";
});

<divid="response"></div>

<script>

var regExpUrl = newRegExp( "^((http|https|ftp)\://){1}([a-zA-Z0-9\.\-]+\.(\:[a-zA-Z0-9\.&amp;%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&amp;%\$#\=~_\-]+))*$");

var inputArrs = [
	"http://190.190.1.190:8080",
	"https://190.190.1.190:8080",
	"http://190.190.1.190:8080/",
	"http://190.190.1.190:8080/xampp/",
	"http://190.190.1.190:8080/testproject",
	"http://190.190.1.190:8080/testproject/admin/index.php",
	"http://190.190.1.190:8080/testproject/admin/index.php?a=asdf&asdf",
	"http://190.190.1.190:8080/phpmyadmin",
	"http://www.google.com.au",
	"https://www.google.com.au/asdf/asdf/asdfasdf?asdf=asdf&asdf=asdf",
	"http://google.com.au",
	"https://google.com.au",
	"www.google.com.au",
	"google.com.au",
	"http://www.google.com.au",
	"test",
	"!@#!@#!@#",
	"123",
	"210.110",
	"y.y.y.y",
	"255.0.0.y",
	"666.10.10.20",
	"4444.11.11.11",
	"33.3333.33.3",
	"190.190.1.190",
	"190.190.1.190",
	"190.190.1.190:80",
	"190.190.1.190:8080",
	"190.190.1.190:",
	
];

inputArrs.forEach(function(input) {
	if(regExpUrl.test(input)) {
		res = "URL/IP Valid";
	} else {
		res = "Invalid URL/IP";
	}
	prevVal = document.getElementById("response").innerHTML;
    document.getElementById("response").innerHTML = prevVal + "<br/>" + input + " = " + res + "<br/>";
});

</script>

<divid="response"></div>

Solution 4:

Check out the Regular Expression Library, which has a large repository of regular expressions for all kinds of validations. They also provide an online testing tool.