Detect whether a string isn't a URL in JavaScript?

Question

For example:

You have this string: var x = "/windows/far/away/foo.jpg"

How I now if that string is a URL or no?

What I need to do is:

if (x.charAt(0) == '/') {
   x = "http://www.example.com/" + x;
}
else {
   x = "http://www.example.com/one/two/three" + x;
}

The problem here is: What will happens when x will be a URL? like:

x = "http://www.externalpage.com/foo.jpg";

As you can see, x.charAt(0) is 'h' and the result will be:

http://www.example.com/one/two/threehttp://www.externalpage.com/foo.jpg

Now, the solution "maybe" like this:

if (is_valid_url( x )) {
 ....
}
else {
 ....
}

I'm using this function for this:

function is_valid_url(str) {
  var pattern = new RegExp('^(https?:\/\/)?'+ // protocol
    '((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|'+ // domain name
    '((\d{1,3}\.){3}\d{1,3}))'+ // OR ip (v4) address
    '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ // port and path
    '(\?[;&a-z\d%_.~+=-]*)?'+ // query string
    '(\#[-a-z\d_]*)?$','i'); // fragment locater
  if(!pattern.test(str)) {
    alert("Please enter a valid URL.");
    return false;
  } else {
    return true;
  }
}

But this function only works with http and https, this will not work with other schemes like ftp or another....

I hope you understand the problem and bring me a solution. Thanks.

possible duplicate of [What is the best regular expression to check if a string is a valid URL?](http://stackoverflow.com/questions/161738/what-is-the-best-regular-expression-to-check-if-a-string-is-a-valid-url) — Barmar, Apr 30 '13 at 08:07
What is the problem you're solving? Because a URL can virtually be anything. — Lee Kowalkowski, Apr 30 '13 at 08:09
+1 @LeeKowalkowski. [Describe your actual problem, not your attempts to solve it.](http://meta.stackexchange.com/a/66378/216326). — georg, Apr 30 '13 at 08:47

score 3 · Answer 1 · answered Apr 30 '13 at 08:14

3

To make it work with other protocols, just replace https? in the pattern with an expression that matches any protocols you want, like:

var pattern = new RegExp('^((http|https|ftp|gopher|ssh|telnet):\/\/)?'+ // protocol

answered Apr 30 '13 at 08:14

Guffa

687,336
108
737
1,005

gopher? You must be kidding. – georg Apr 30 '13 at 08:48

Lee Kowalkowski · Answer 2 · 2013-04-30T08:30:15.960

1

It looks like you actually want to normalise an image's URL, i.e. whatever string you are given, you want to convert to an absolute URL. I'd do this:

var x = /* insert arbitrary string here */;
var img = document.createElement('img');
img.src = x;
var absoluteUrl = img.src;

Let the browser do the grunt work.

If this is specific to images, you can also use the img.onload and img.onerror events to detect whether the URL references an image.

edited Apr 30 '13 at 08:30

answered Apr 30 '13 at 08:24

Lee Kowalkowski

11,591
3
40
46

It might be wiser to use an `` so that a _GET_ is not performed. One should be wary of possible abuse. – Paul S. Apr 30 '13 at 08:32
@PaulS. If you don't want to use `onload` and `onerror` to verify the URL references an image, then using `` and `a.href` will prevent the browser from making a GET request. This will prevent immediate automatic requests, but from an abuse vector point of view, the URL would be entirely unvalidated. It depends on context really, if the value of `x` is determined by current user or whether it can be possibly be determined by an untrusted user of the site. – Lee Kowalkowski Apr 30 '13 at 08:42

score 1 · Answer 3 · edited May 23 '17 at 12:04

Similar to the answer of Lee Kowalkowski, I'd suggest using an <a> element to "make the browser do the work for you". This means that no GET request is fired, protecting you and your users from possible malicious entries during any verify step. It does, however, mean you don't know if the URL points to a real place.

function fixURL(str) {
    var a = document.createElement('a');
    a.href = str;
    return a.href;
}


fixURL('foo/bar');       // "https://stackoverflow.com/questions/16295050/foo/bar"
fixURL('/foo/bar');      // "https://stackoverflow.com/foo/bar"
fixURL('ftp://foo/bar'); // "ftp://foo/bar"

After this step you might also want to check against known "bad" URLs (possibly do that server-side).

Hermann Stephane Ntsamo · Answer 4 · 2013-04-30T08:30:17.403

0

Replaced the protocol with ((news|(ht|f)tp(s?)):\/\/) that will match news://, http://, https://, ftp://

function is_valid_url(str) {
  var pattern = new RegExp('^((news|(ht|f)tp(s?)):\\/\\/)'+ // protocol
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
    '(\\#[-a-z\\d_]*)?$','i'); // fragment locater
  if(!pattern.test(str)) {
    alert("Please enter a valid URL.");
    return false;
  } else {
    return true;
  }
}

edited Apr 30 '13 at 08:30

answered Apr 30 '13 at 08:16

Hermann Stephane Ntsamo

588
4
8

cut out the stuff you didn't touch and just include the part you modified. Also make a small explanation to make this a +1 answer. – Christoph Apr 30 '13 at 08:20
You need to use `\\ ` instead of `\ ` to escape that `\ `, when writing a _RegExp_ using a _String_ literal. – Paul S. Apr 30 '13 at 08:27

Detect whether a string isn't a URL in JavaScript?

4 Answers4