Entry

Are there any practical examples using regular expressions?

How to validate a user input for numbers in any format, safely?

How to make sure a text field contains a number (in the most safe way)?

Feb 12th, 2001 07:54
Iván Rivera, Mark Szlazak,

The best way is to use so called regular expressions. All browsers from
NS4 and up (and IE4 and up) have them implemented, so there is no reason
to shy away from them now. They exist in Javascript since its version
1.2, and look very much like their Perl counterparts: so if you know
Perl you will understand this without problems.
Regular expressions are native objects of the language. They are just
patterns against which strings match. The test() method of regular
expressions is used mainly to validate user input; we will use it to
check for real numbers in some string.
Suppose you have a textbox whose value is contained in the variable str
(for simplicity), and that you want to determine if str is a number or
not. We will demonstrate increasingly complex and powerful regular
expressions (also called regexps) to accomplish such a task.
1.- Whole, positive number:
  re = /^[0-9]+$/
  All regexps come enclosed in slashes '/'. There are other special
characters; in this case, '^' matches the beginning of a line, and '$'
the end of a line. Everything between '^' and '$' is assured to be an
isolated piece in the input string. Since that is what we want to detect
(a single whole number), this is obviously a good idea.
  '+' is a quantifier. It takes whatever finds before it to indicate
that it should be matched one or more times. There are two more
quantifiers: '*', meaning zero or more times, and '?', meaning zero or
one time.
  [ ] delimit a range. [0-9] indicates any character in the '0' to '9'
range, thus it matches 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9.
2.- Whole, positive number (shorter way):
  re = /^\d+$/
  There are several special codes indicated by the inverted slash,
followed by a letter. '\d' is, as you have guessed, 'any digit', and
thus the same as [0-9].
3.- Any whole number:
  re = /^-?\d+$/
  '-?' means 'with or without "-"'.
4.- Any real number with decimal point:
  re = /^-?\d+\.\d+$/
  When you want to use a special character as a literal for matching,
escape it with the inverted slash. The single dot '.' stands for 'any
single character', but '\.' means 'the dot itself' (that is, our decimal
separator).
5.- Any real number with or without decimal part:
  re = /^-?\d+(\.\d+)?$/
  Parentheses enclose a group of elements that behave like a single one.
Thus '(\.\d+)?' means 'dot followed by one or more digits, zero or one
time'.
6.- Limiting the number of decimals (useful for lots of currencies):
  re = /^-?\d+(\.\d{1,3})?$/
  Braces indicate that the previous element should be repeated {minimum,
maximum} times. Either can be omitted (but not the comma between them).
No minimum value is the same as 0, and no maximum value stands for
'any'. Note that {0,1} is equivalent to '?', {0,} is the same as '*' and
{1,} equals '+'.
It's simple to check for a match: the difficult part is composing the
regexp. Just pass your string (str) to the test method of the regexp,
like this:
  re.test(str)
This returns true (if there is a match) or false (if there isn't), so
you can use it in your conditionals.
As you see, regular expressions are somewhat a black art at first sight,
but if you take some time to delve into them, they will reveal
themselves as a powerful addition to your developer toolset.
Check the following URL for more information on regular expressions
(special characters, methods...):
http://developer.netscape.com/docs/manuals/js/core/jsref/regexp.htm
And have fun!
Iván