CODEWITHSUNDEEP
angularjsregex
mezt
mezt

Reputation: 89

AngularJS ng-pattern website pattern

/^[_a-z0-9]+(\.[_a-z0-9]+)*[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,7})$/

That's the pattern. It says "ok" when it's correct, and "not ok" when it's incorrect. So it says "ok" on www.google.com, but "not ok" when I type http://www.google.com

What I'd like is this pattern to allow http:// too, but it should never be a requirement.

Upvotes: 0

Views: 1141

Answers (2)

Ron DeFreitas
Ron DeFreitas

Reputation: 657

If you're looking to only allow http/https URL schemes (when the scheme is provided), the following modification to your regular expression will do the trick:

/^(http:\/\/|https:\/\/)?[_a-z0-9]+(\.[_a-z0-9]+)*[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,7})$/

You can use my answer as an example of how to add the url scheme group to your existing regex, but credit @simbabque, as he has a much more complete answer.

Upvotes: 1

simbabque
simbabque

Reputation: 54323

You can use the following regular expression, which I lifted off borrowed from the documentation of the Perl module URI on CPAN (escaping of slashes mine).

/(?:([^:\/?#]+):)?(?:\/\/([^\/?#]*))?([^?#]*)(?:\?([^#]*))?(?:#(.*))?/

It will give you all the different parts of the URI in capture groups.

Those parts are:

  • scheme (http:)
  • authority (not applicable here)
  • path (www.google.com)
  • query (q=querystring)
  • fragment (#anker)

See https://regex101.com/r/vS5qO1/1 to try it out.

Also note that this will parse all types of URIs, not only http(s). So stuff like ftp://[email protected] will also work.

Upvotes: 1

Related Questions