8.正则表达式

正则表达式

学习要点：
1.什么事正则表达式
2.创建正则表达式
3.获取控制
4.常用的正则

假设用户需要在HTML表单中填写姓名、地址、出生日期等。那么在将表单提交到服务器进一步处理前，Javascript
程序会检查表单以确认用户输入了信息并且这些信息时符合要求的。

一、什么是正则表达式

正则表达式（regular expression）是一个描述字符模式的对象。ECMAScript的RegExp类表示正则表达式，而String
和RegExp都定义了使用正则表达式进行强大的模式匹配的文本检索与替换的函数。

正则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后，表单就会被发送到服务器，在服务器
端通常会用PHP、ASP.NET等服务器脚本对其进行进一步处理。因为客户端验证，可以节约大量的服务器端的资源
，并且提供更好的用户体验。

二、创建正则表达式

创建正则表达式和创建字符串类似，创建正则表达式提供了两种方法，一种是采用new运算符，另一种是采用字面量
方式。

1.两种创建方式
var box = new RegExp('box'); //第一个参数字符串，返回/box/两个反斜杠是正则表达式的字面量表示法
var box = new RegExp('box' , 'ig'); //第二个参数可选模式修饰符

模式修饰符的可选参数

参数 含义
i 忽略大小写
g 区局匹配
m 多行匹配

var box = /box/; //直接用两个反斜杠
var box = /box/ig; //在第二个反斜杠后面加上模式修饰符

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 s 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('This is a 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!, This 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! , This is a Box too';
alert(str.search(pattern)); //查找到返回位置，否则返回-1

PS：因为search方法查找到即返回，也就是说无需g全局

/*使用replace 替换匹配到的数据*/
var pattern = /box/ig;
var str = 'This is a Box! , This is a Box too';
alert(str.replace(pattern,'Tom')); //将Box替换为Tom

/*使用split拆分成字符串数组*/
var pattern = / /ig;
var str = 'This is a Box! , This is a Box too ';
alert(str.split(pattern)); //将空格拆分成数组

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、lastMath、lastParen和multiline属性。IE不支持multiline属性。
所有的属性可以使用短名来操作

RegExp.input可以写成RegExp['$_']，以此类推，但RegExp.input比较特殊，它还可以写成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还支持手动设置，直接赋值操作。

三、获取控制

正则表达式元字符是包含特殊含义的字符。它们有一些特殊功能，可以控制匹配模式的方式，反斜杠的元字符将
失去其特殊的含义。

字符类：单个字符和数字
元字符/元符号 匹配情况
. 匹配除换行外的任意字符
[a-z0-9] 匹配括号中的字符集中的任意字符
[^a-z0-9] 匹配任意不在括号中的字符集中的字符
\d 匹配数字
\D 匹配非数字，同[^0-9]相同
\w 匹配字母和数字及_
\W 匹配非字母和数字及_

字符类：空白字符
元字符/元符号 匹配情况
\0 匹配null字符
\b 匹配空个字符
\f 匹配进制字符
\n 匹配换行字符
\r 匹配回车字符
\t 匹配制表符
\s 匹配空白字符、空格、制表符和换行符
\S 匹配非空白字符

 

字符类：锚字符
元字符/元符号 匹配情况
^ 行首匹配
$ 行尾匹配
\A 只有匹配字符串开始处
\b 匹配单词边界，词在[]内时无效
\B 匹配非单词边界
\G 匹配当前搜索的开始位置
\Z 匹配字符串结束处或行尾
\z 只匹配字符串结束处

字符类：重复字符
元字符/元符号 匹配情况
x? 匹配0个或1个x
x* 匹配0个或任意多个x
x+ 匹配至少一个x
(xyz)+ 匹配至少一个(xyz)
x{m,n} 匹配最多m个、最多n个x

字符类：替换字符
元字符/元符号 匹配情况
this|where|logo 匹配this、where或logo中的任意一个

字符类：记录字符
元字符/元符号 匹配情况
(string) 用于反向引用的分组
\1或$1 匹配第一个分组中的内容
\2或$2 匹配第二个分组中的内容
\3或$3 匹配第三个分组中的内容

 

/*使用点元字符*/
var pattern = /g..gle/; //匹配一个任意字符
var str = 'google';
alert(pattern.test(str));

 

/*重复匹配*/
var pattern = /g.*gle/; //匹配0个一个或多个
var str = 'google'; //*,?,+,{n,m}
alert(pattern.test(str));

 

/*使用字符串匹配*/
var pattern = /g[a-zA-Z_]*gle/; //[a-z]*表示任意个a-z中的字符
var str = 'google';
alert(pattern.test(str));

var pattern = /g[^0-9]*gle/; //[^0-9]*表示任意个非0-9的字符
var str = 'google';
alert(pattern.test(str));

var pattern = /[a-z][A-Z]+/; //[A-Z]+表示A-Z一次或多次
var str = 'gOOGLE';
alert(pattern.test(str));

 

/*使用元符号匹配*/
var pattern = /g\w*gle/; //\w*匹配任意多个所有字母数字_
var str = 'google';
alert(pattern.test(str));

var pattern = /google\d*/; //\d*匹配任意多个数字
var str = 'google444';
alert(pattern.test(str));

var pattern = /\D{7,}/; //\D{7,}匹配至少7个非数字
var str = 'google8';
alert(pattern.test(str));

 

/*使用锚元字符匹配*/
var pattern = /^google$/; //^强制从开头匹配，$强制从结尾开始匹配
var str = 'google';
alert(pattern.test(str));

var pattern = /goo\sgle/; //\s可以匹配到空格
var str = 'goo gle';
alert(pattern.test(str));

var pattern = /google\b/; //\b可以匹配到是否到了边界
var str = 'google';
alert(pattern.test(str));

 

/*使用或模式匹配*/
var pattern = /google|baidu|bing/; //匹配三种其中一种字符串
var str = 'google';
alert(pattern.test(str));

 

/*使用分组模式匹配*/
var pattern = /google{4,8}/; //匹配分组里的字符串4-8次
var str = 'googlegoogle';
alert(pattern.test(str));

var pattern = /8(.*)8/; //获取8..8之间的任意字符
var str = 'This is 8google8';
str.match(pattern);
alert(RegExp.$1); //得到第一个分组里的字符串内容RegExp表示获取模式中第一个分组对应的匹配字符串

var pattern = /8(.*)8/; //获取8..8之间的任意字符
var str = 'This is 8google8';
var result = str.replace(pattern,'<strong>$1</stong>'); //得到替换的字符串输出
document.write(result);

var pattern = /(.*)\s(.*)/;
var str = 'google baidu';
var result = str.replace(pattern,'$2 $1'); //将两个分组的值替换输出
document.write(result);

 

贪婪 惰性
+ +?
? ??
* *?
{n} {n}?
{n,} {n,}?
{n,m} {n,m}?

/*关于贪婪和惰性*/
var pattern = /[a-z]+?/; //?问号关闭了贪婪匹配，只替换了第一个
var str = 'abcdefghijklmnopqrstuvwxyz';
var result = str.replace(pattern,'xxx');
alert(result);

var pattern = /8(.+?)8/g; //禁止了贪婪，开启的全局
var str = 'This is 8google8 , That is 8google8 , There is 8google8';
var result = str.replace(pattern,'<strong>$1</stong>');
document.write(result);

var pattern = /8([^8]*)8/g; //另一种禁止贪婪
var str = 'This is 8google8 , That is 8google8 , There is 8google8';
var result = str.replace(pattern,'<strong>$1</stong>');
document.write(result);

var pattern = /8(.*)8/;
var str = '8google8 8google8 8google8';
document.write(str.replace(pattern,'<strong>$1</strong>')); //使用了贪婪模式匹配到的是google8 8google8 8google

var pattern = /8(.*?)8/;
var str = '8google8 8google8 8google8';
document.write(str.replace(pattern,'<strong>$1</strong>')); //使用惰性google google google

 

/*使用exec返回数组*/
var pattern = /^[a-z]+\s[0-9]{4}$/i; //返回整个字符串
var str = 'google 2012';
alert(pattern.exec(str));

var pattern = /^[a-z]+/i; //只匹配字母
var str = 'google 2012';
alert(pattern.exec(str)); //返回google

var pattern = /^([a-z]+)\s([0-9]{4})$/i; //使用分组
var str = 'google 2012';
alert(pattern.exec(str)[0]); //返回google 2012
alert(pattern.exec(str)[1]); //返回google
alert(pattern.exec(str)[2]); //返回2012

 

/*捕获性分组和非捕获性分组*/
var pattern = /(\d+)([a-z])/; //捕获性分组，所有的分组都捕获返回
var str = '123abc';
alert(pattern.exec(str));

var pattern = /(\d+)(?:[a-z])/; //非捕获性分组
var str = '123abc';
alert(pattern.exec(str));

/*使用分组嵌套*/
var pattern = /(A?(B?(C?)))/; //从外往内捕获
var str = 'ABC';
alert(pattern.exec(str));

 

/*使用前瞻捕获*/
var pattern = /(goo(?=gle))/; //goo后面必须跟着gle才能捕获
var str = 'google';
alert(pattern.exec(str));

 

/*使用特殊字符匹配*/
var pattern = /(goo(?=gle))/; //goo后面必须跟着gle才能捕获
var str = 'google';
alert(pattern.exec(str));

 

/*使用换行模式*/
var pattern = /^\d+/mg; //启用换行模式
var str = '1.baidu\n2.google\n3.bing';
var result = str.replace(pattern,'#');
alert(result);

四、常用的正则
1.检查邮政编码
var pattern = /[1-9][0-9]{5}/; //共6位数字，第一位不能为0
var str = '224000';
alert(pattern.test(str));

2.检查文件压缩包
var pattern = /^[\d\w_]+\.(zip|rar|gz)$/; //\d\w_表示所有数字和字母加下划线
var str = '123.zip'; //\.表示匹配，后面是一个选择
alert(pattern.exec(str));

3.删除多余空格
var pattern = /\s/g; //g必须全局，才能全部匹配
var str = '111 222 333';
var result = str.replace(pattern,''); //把空格匹配成去空格
alert(result);

4.删除首位空格
var pattern = /^\s+/; //强制首
var str = ' goo gle';
var result = str.replace(pattern , '');
pattern = /\s+$/; //强制尾
result = result.replace(pattern , '');
alert('|'+result+'|');

var pattern = /^\s*(.+?)\s*$/; //使用了非贪婪捕获
var str = ' google ';
alert('|'+pattern.exec(str)[1]+'|');

var pattern = /^\s*(.+?)\s*$/;
var str = ' google ';
alert('|'+str.replace(pattern,'$1') + ?); //使用了分组获取

/*简单的电子邮件验证*/
var pattern = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\.-]+)\.([a-zA-Z]{2,4})$/;
var str = '15251693879@163.com';
alert(pattern.test(str));

var pattern = /^([\w\.\-]+)@([\w\.\-]+)\.([\w]{2,4})$/;
var str = '15251693879@163.com';
alert(pattern.test(str));

PS：以上是简单电子邮件验证，复杂的要比这个复杂很多，可以网上搜索相关资源