Regular expression

var reg = new RegExp(" wEb");
var re = / /;
var Re = /Web/;
var RE = /web/gi;

A simple regular expression uses no special characters for defining the string to be used in a search it contains only a string you want you want to find in you test string. If we need to assign a pattern (rules) the test line should match we have to use special characters. For example, if we want to find out if my test string contains a phone number in the form ***-**** we need to use special character \d, which indicates that any digit matches this character but nothing but a digit, then my regular expression would be:

var reg = /\d\d\d-\d\d\d\d/;

matching metacharacters
Character	Matches	Example
\b	Word boundary	/\bor/ matches "origami" and "or" but not "normal" /or\b/ matches "traitor" and "or" but not "perform" /\bor\b/ matches "or" and nothing else
\B	Word nonboundary	/\Bor/ matches "normal" but not "origami" /or\B/ matches "normal" and "origami" but not "traitor" /\Bor|B/ matches "normal" but not "origami" or "traitor"
\d	Numeral 0 through 9	/\d\d\d/ matches "212" and "415" but not "B17" or "ABC"
\D	Nonnumeral	/\D\D\D/ matches "ABC" and "GEF" but not "B17" or "123"
\s	Single white space	/over\sbite/ matches "over bite" but not "overbite" or "over  bite"
\S	Single nonwhite space	/over\Sbite/ matches "over-bite" but not "overbite" or "over bite"
\w	Letter, numeral, or underscore	/A\w/ matches "A1" and "AC" but not "A+"
\W	Non letter, numeral, or underscore	/A\W/ matches "A+" but not "AC" and "A2"
.	Any character except new line	/.../ matches "abC", "12f", "1+ ", or ant three characters
[...]	Character set	/[AN]BC/ matches "ABC" and "NBC" but not "BBC"
[^...]	Negated character set	/[^AN]BC/ matches "BBC" and "CBC" but not "ABC" or "NBC"
Counting metacharacters
Character	Matches last character	Example
*	Zero or more times	/Ja*vaScript/ matches "JvaScript", "JavaScript", and "JaaaavaScript" but not "JuvaScript"
?	Zero or one time	/Ja?vaScript/ matches "JvaScript" or "JavaScript" but not "JaavaScript"
+	One or more times	/Ja+vaScript/ matches "JavaScript" or "JaaaavaScript" but not "JvaScript"
{n}	Exactly n times	/Ja{2}vaScript/ matches "JaavaScript" but not "JvaScript" or "JaaaavaScript"
{n,}	n or more times	/Ja{2,}vaScript/ matches "JaavaScript" or "JaaaavaScript" but not "JvaScript"
{n, m}	At least n at most m times	/Ja{2,3}vaScript/ matches "JaavaScript" or "JaaavaScript" but not "JvaScript" or "JaaaaavaScript"
positional metacharacters
Character	Matches located	Example
^	At the beginning of the string	/^Fread/ matches "Fred is OK" but not "I'm with Fred" or "Is Fred here?"
$	At the end of the string	/Fread$/ matches "I'm with Fred" but not "Fred is OK" or "Is Fred here?"

For example if you want to make sure that a match for a Roman numeral is found only when it is at the start of a line and has a dot after it you check for the match

   /^[IVXMDC]+\./

Not to be confused with the metacharacters listed in the table above are escaped string characters for

Symbol	Escape symbol	Description
tab	\t	Tabulation symbol
newline	\n	New line symbol
return	\r	carriage return
formfeed	\f	Formfeed symbol (printer command)
vtab	\v	Vertical tabulation symbol
.	\.	Dot
^	\^	Caret symbol
$	\$	Dollar sign
\	\\	Backslash
/	\/	Slash
-	\-	Dash
(	\(	Open parenthesis
)	\)	Close parenthesis

Properties of RegExp object

• source - contains the pattern string
• global - this Boolean property contains true if this is a global pattern (created with option g). This property is important when we replace a pattern with a substring to perform operation with all occurrences of the pattern not only the first one.
• ignoreCase - this Boolean property indicates if we take case of the characters into consideration while looking for a match.
• multiline - this Boolean property indicates whether or not to search in strings across multiple lines.
• lastIndex - this property contains the index of the last found match in the string. This is importnant because we may neet to find all matches for the pattern in the string, not only the first one.

car re = /\bbe\b/g ; 

Using Regular Expressions

var reg = /word/i;
var str = "This String Has seven WORDs in IT.";
if( reg.test(str) )
  alert("There is a match");
else
  alert("There is no match");

If you also need to know where is the substring matching the pattern in a big string you can use search() method of the string object. This method takes only one argument the regular expression containing the pattern and does the search against the string object executing the method. It returns a character offset of the substring matching the pattern if there is a match and -1 otherwise. Here is an example:

var reg = /word/i;
var str = "This String Has seven WORDs in IT.";
alert( "Matching string offset is " + str.search(reg) )

Another way to find a match in a string is to invoke exec() method of the regular expression. For example, if we are interested in finding substring " be " in the string

 var str = "To be, or not to be: That is the question.";
 var re = /\bbe\b/g;
 var foundArray = re.exec(str);
 var msg = '';
 if( foundArray != null ){
 	for(i=0;i<foundArray.length;i++){
 		msg += 'foundArray['+i+'] = '+foundArray[i] + 
                   'foundArray.index = '+foundArray.index+'\n';
  	}
 }

If the return value foundArray is null that means there is no match. The first element of the result array always contains the substring matching the pattern, values of other elements depends on the parenthesis put in the pattern. For more details see the next section.

The following page contains an example that demonstrates all three methods described above.

Getting information about a match

For example, if we are checking that a date was entered in either in "mm/dd/yyyy" or "mm-dd-yyyy" format and also need to know the values of the month, day, and year we can use the following regular expression:

 
var re = /\b(1[0-2]|0?[1-9])[\-\/](0?[1-9]|[12][0-9]|3[01])[\-\/]((19|20)\d{2})/

• 1[0-2]|0?[1-9] for the month (can start with 1 and then have only 0, 1, or 2 as the second digit, or can start with 0 and have anything but zero as the second digit). We also put parenthesis around this part of the regular expression to extract month from the matching string.
• 0?[1-9]|[12][0-9]|3[01] for the day (can start with 0 and have at least 1 after that, can start with 1 or two and have any digit after that, or can start with 3 and have only 0 or 1 after). This part is also inside parenthesis because we will need to know the day of the month as well.
• (19|20)\d{2} for the year (can start with 19 or 20 and have exactly two digit after that). This part of the pattern is inside the parenthesis (that'll give us the year) and also has it's own part parenthesised. This subpart will give us the century.

 
var re = /\b(1[0-2]|0?[1-9])[\-\/](0?[1-9]|[12][0-9]|3[01])[\-\/]((19|20)\d{2})/
var matchArray = re.exec("12/23/2001");
var msg = '';
if( matchArray ){
  for(i=0;i<matchArray.length;i++)
    msg += 'matchArray['+i+'] = '+matchArray[i]+'\n';
}
else{
   msg = "Doesn't match";
}
alert(msg);

String Replacement

 
 var re = /\d\d\d\d/;
 var str = "6532-6573-0912-2783";
 alert('Initially str = '+str);
 while( re.test(str) ){
    str = str.replace(re, '****');
    alert('Currently str = '+str);
 }
 alert('At the end str = '+str);

 
 var re = /\d\d\d\d/g;
 var str = "6532-6573-0912-2783";
 alert('Initially str = '+str);
 while( re.test(str) ){
    str = str.replace(re, '****');
    alert('Currently str = '+str);
 }
 alert('At the end str = '+str);

Some other properties of RegExp object

After a match is found in the course of one of the regular expression methods, the RegExp is informed of some key contextual information about the match. The leftContext property contains the part of the main string to the left of (up to but not including) the matches string. Be aware that the leftContext starts its string from the point at which the most recent search began. Therefore, for second or subsequent times through the same string with the same regular expression, the leftContext substring varies widely from the first time through.

The rightContext consists of a string starting immediately after the current match and extending to the end of the of the main string. As a subsequent method calls work on the same same string and regular expression, this value abviously shrinks in length untill no more matches are found. At this point, both properties revert to null. The short version of these properties are $` and $' for leftContext and rightContext, respectively.
Example:

  var reg1 = /\b\d{4}-\d{4}-\d{4}-\d{4}\b/ ;
  var str1 = "This is my credit card number 6532-6573-0912-2783. Don't tell anyone.";
  var reg2 = /\b\d{5}\b/;
  var str2 = "This is my zipcode 23423. Can tell anyone.";
  var found = reg1.exec(str1);
  var msg = '         After the first call:\n';
  if( found != null ){
     msg += 'RegExp.leftContext = '+RegExp.leftContext+'\n';
     msg += 'match substring = '+found[0]+'\n';
     msg += "RegExp.rightContext = "+RegExp.rightContext+'\n';
  } 
  msg += '--------------------------------------------\n';
  msg += '         After the second call:\n';
  found = reg2.exec(str2);
  if( found ){
     msg += 'RegExp.leftContext = '+RegExp.leftContext+'\n';
     msg += 'match substring = '+found[0]+'\n';
     msg += "RegExp.rightContext = "+RegExp.rightContext+'\n';
  }
  msg += '--------------------------------------------\n';
  alert(msg); 

Data-Entry Validation

<form action=do_something.php name=tform>
 Name: <input type=text name=uname><br>
 Phone: <input type=text name=phone><br>
 <input type=submit value=OK onClick="check_input();">
</form>

1. check the input in the name field and make sure it's a real name (doesn't start with a digit, doesn't contain underscores, punctuation signs, etc)
2. if name is incorrect, then this function should print an error message and focus the name field.
3. if name is correct, then it should check the correctness of the phone number (make sure it satisfies 123-3445 format).
4. if the phone is incorrect it prints an error message and focus the phone input field.
5. only if all data entered correctly this function sends information to the do_something.php script.

To check the correctness of the data we need to come up with regular expressions for each field we need to check. Let's say that for these two fields we decided to use:

var name_format = /^\w[\w ]*$/;
var phone_format = /^[1-9]\d\d[\- ]\d\d\d\d$/;

Since we do not want to extract any information from these fields, it's enough for us to use method test() to check the values in the text fields. We know how to make a small window with an error message, but what do we need to use to bring focus to the element whose data is incorrect. It turns out that JavaScript has a special method focus() of the input elements that does the job. Thus, if there is no match we need to do three things:

1. print an error message
2. bring focus to the element under consideration
3. make sure we are not invoking do_something.php script (this step we need to do only if we defined the button as of submit type)

function check_input()
{
  var phone_format = /^[1-9]\d\d[\- ]\d\d\d\d$/;
  var msg = "";
  if( document.tform.phone.value == 0 )
    msg = "you need to enter a phone number.";
  else if( !phone_format.test(document.tform.phone.value) )
    msg = "please enter the correct phone (format: ###-####).";
  if( msg != "" ){
    alert("Error: "+msg);
	document.tform.phone.focus();
	event.returnValue = false; // do NOT submit the data
	return false;
  }
  return true;
}

In the case of using simple button of the type button we do not need to use event.returnValue property, but we do need to actually submit the data (that is, send it to the server script) if everything is correct. To do that we need to use method submit() of a form element:

function check_input()
{
  ...
  // if everything is entered correctly
  document.tform.submit();
}

Another way to do the checking is called real-time checking. This method differs from the one describe above only that we do the checking for each element separately immediately after user completed entering data. To do that we need to define a handler for event Blur for the element we want to check:

...
<input type=expdate onBlur="check_date();">
...

Here is an example that checks the data-entry before submitting the form. Please notice that we used real-time checking for the first and the second entry and batch validation checking for all of them. Please also notice that to check the first entry data the .onChange= handler was changed as far as .onBlur= event handler was set to check the date information.