假设用户需要在 HTML 表单中填写姓名、地址、出生日期等。那么在将表单提交到服务器进一步处理前，JavaScript 程序会检查表单以确认用户确实输入了信息并且这些信息是符合要求的。
一、什么是正则表达式
正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript的RegExp类表示正则表达式，而 String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。
正则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后，表单就会被发送到服务器，在服务器端通常会用 PHP、ASP.NET 等服务器脚本对其进行进一步处理 。
因为客户端验证，可以节约大量的服务器端的系统资源，并且提供更好的用户体验。
二、创建正则表达式
创建正则表达式和创建字符串类似，创建正则表达式提供了两种方法，一种是采用new运算符，另一个是采用字面量方式。
1、两种创建方式
var box=new RegExp('box'); //第一个参数字符串
alert(box);
var box=new RegExp('box', 'ig'); //第二个参数可选模式修饰符
alert(box);
模式修饰符的可选参数
| 参数 | 含义 |
| i | 忽略大小写 |
| g | 全局匹配 |
| m | 多行匹配 |
var box=/box/; //直接用两个反斜杠，使用字面量方式的正则 alert(box); var box=/box/ig; //在第二个斜杠后面加上模式修饰符 alert(box);
2、测试正则表达式
RegExp对象包含两个方法：test()和 exec()，功能基本相似，用于测试字符串匹配。test()方法在字符串中查找是否存在指定的正则表达式并返回布尔值，如果存在则返回 true，不存在则返回 false。exec()方法也用于在字符串中查找指定正则表达式，如果 exec()方法执行成功，则返回包含该查找字符串的相关信息数组。如果执行失败，则返回 null。
RegExp对象的方法
| 方法 | 功能 |
| test | 在字符串中测试模式匹配，返回true或false |
| exec | 在字符串中执行匹配搜索，返回结果数组 |
/*使用new运算符的test方法示例*/
var pattern=new RegExp('box','i'); //创建正则模式，不区分大小写
var str='This is a Box!'; //创建要比对的字符串
alert(pattern.test(str)); //通过test()方法验证是否匹配
/*使用字面量方式的test方法示例*/
var pattern=/box/i; //创建正则模式，不区分大小写 var str='This is a Box!'; alert(pattern.test(str));
/*使用一条语句实现正则匹配*/
alert(/Box/i.test('box')); //模式和字符串替换掉了两个变量
/*使用exec返回匹配数组*/
var pattern=/box/i; var str='This is a Box!'; alert(pattern.exec(str)); //匹配了返回数组，否则返回null
PS：exec 方法还有其他具体应用，我们在获取控制学完后再看。
3、使用字符串的正则表达式方法
除了test()和exec()方法，String对象也提供了4个使用正则表达式的方法。
String 对象中的正则表达式方法
| 方法 | 含义 |
| match(pattern) | 返回pattern中的子串或null |
| replace(pattern, replacement) | 用replacement替换pattern |
| search(pattern) | 返回字符串中pattern开始位置 |
| split(pattern) | 返回字符串按指定pattern拆分的数组 |
/*使用match方法获取获取匹配数组*/
var pattern=/box/ig; //全局搜索 var str='This is a Box!，That is a Box too'; alert(str.match(pattern)); //匹配到两个Box,Box alert(str.match(pattern).length); //获取数组的长度
/*使用search来查找匹配数据*/
var pattern=/box/ig; var str='This is a Box!，That is a Box too'; alert(str.search(pattern)); //查找到返回位置，否则返回-1
PS：因为search方法查找到即返回，也就是说无需g全局
/*使用replace替换匹配到的数据*/
var pattern=/box/ig; //开启全局 var str='This is a Box!，That is a Box too'; alert(str.replace(pattern,'Tom')); //将Box替换成了Tom
/*使用split拆分成字符串数组*/
var pattern=/ /ig; var str='This is a Box!，That is a Box too'; alert(str.split(pattern)); //将空格拆开分组成数组 alert(str.split(pattern).length);
RegExp对象的静态属性
| 属性 | 短名 | 含义 |
| input | $_ | 当前被匹配的字符串 |
| lastMatch | $& | 最后一个匹配字符串 |
| lastParen | $+ | 最后一对圆括号内的匹配子串 |
| leftContext | $` | 最后一次匹配前的子串 |
| multiline | $* | 用于指定是否所有的表达式都用于多行的布尔值 |
| rightContext | $' | 在上次匹配之后的子串 |
* /* 使用静态属性/ */
var pattern=/(g)oogle/; var str='This is google!'; pattern.test(str); //执行一下 alert(RegExp.input); //This is google! alert(RegExp.leftContext); //This is alert(RegExp.rightContext); //! alert(RegExp.lastMatch); //google alert(RegExp.lastParen); //g alert(RegExp.multiline); //false
PS：Opera浏览器不支持input、lastMatch、lastParen和multiline属性。IE浏览器不支持multiline属性。
所有的属性可以使用短名来操作。RegExp.input可以改写成RegExp['$_']，依次类推。但RegExp.inpu比较特殊，它还可以写成RegExp.$_。
RegExp对象的实例属性
| 属性 | 含义 |
| global | Boolean值，表示g是否已设置 |
| ignoreCase | Boolean值，表示i是否已设置 |
| lastIndex | 整数，代表下次匹配将从哪里字符位置开始 |
| multiline | Boolean值，表示m是否已设置 |
| Source | 正则表达式的源字符串形式 |
/*使用实例属性*/
var pattern=/google/ig; alert(pattern.global); //true，是否全局了 alert(pattern.ignoreCase); //true，是否忽略大小写 alert(pattern.multiline); //false，是否支持换行 alert(pattern.lastIndex); //0，下次的匹配位置 alert(pattern.source); //google，正则表达式的源字符串 var pattern=/google/g; var str='google google google'; pattern.test(str); //google，匹配第一次 alert(pattern.lastIndex); //6，第二次匹配的位
PS：以上基本没什么用。并且lastIndex在获取下次匹配位置上IE和其他浏览器有偏差 ，主要表现在非全局匹配上。lastIndex 还支持手动设置，直接赋值操作。
评论