javascript高级语法三

一、js的正则表达式

　　1、什么是正则表达式

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

　　2、正则表达式的创建方式：

　　　　2.1 方式1：new方式创建

　　　　　　var box = new RegExp('box', 'ig');

　　　　2.2 方式2：字面量方式创建

　　　　　　var box = /box/ig;

　　　　2.3第一个参数表示被匹配的字符串，第二个参数表示正则的匹配方式，主要有三个匹配类型分别为：

　　　　　　i:忽略被匹配字符串的大小。

　　　　　　g:被匹配的字符串进行全局匹配。

　　　　　　m:被匹配的字符串进行多行匹配。

　　3、正则表达式的匹配方法：

　　　　3.1方法1：new()方法　　　

　　　　　　3.1.1使用new运算符的test方法示例：

　　　　　　　　var pattern = new RegExp('box', 'i'); //创建正则模式，不区分大小写

　　　　　　　　var str = 'This is a Box!'; //创建要比对的字符串

　　　　　　　　alert(pattern.test(str)); //通过test()方法验证是否匹配，返回的是个布尔值，true或flase

　　　　　　3.1.2使用字面量方式的test方法示例:

　　　　　　　　var pattern = /box/i; //创建正则模式，不区分大小写

　　　　　　　　var str = 'This is a Box!';

　　　　　　　　alert(pattern.test(str));

　　　　　　3.1.3使用一条语句实现正则匹配

　　　　　　　　alert(/box/i.test('This is a Box!')); //模式和字符串替换掉了两个变量

　　　　3.2方法2：exec()方法

　　　　　　3.2.1方法与test()类似。

　　　　　　　　var pattern = /box/i;  //创建正则模式，不区分大小写

　　　　　　　　var str = 'This is a Box!';  //创建要比对的字符串

　　　　　　　　alert(pattern.exec(str)); //匹配了返回数组，否则返回null

　　4、string中的正则

　　　　4.1使用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); //获取数组的长度

　　　　　　注释：如果是局部搜索，数组中就只能匹配到一个元素。

　　　　4.2 使用search来查找匹配数据

　　　　　　var pattern = /box/ig;

　　　　　　var str = 'This is a Box!，That is a Box too';

　　　　　　alert(str.search(pattern)); //查找到第一个符合条件的字符串就返回该位置，如果没有查找到则返回-1

　　　　　　注释：因为search方法查找到第一个就会返回，也就是说无需g全局

　　　　4.3 使用replace替换匹配到的数据

　　　　　　var pattern = /box/ig;//全局搜索

　　　　　　var str = 'This is a Box!，That is a Box too';

　　　　　　alert(str.replace(pattern, 'Tom')); //将Box替换成了Tom，返回的是替换后的字符串

　　　　　　注释：如果是全局查找就会替换查找到的所有字符串

　　　　4.4使用split拆分成字符串数组

　　　　　　var pattern = / /ig;

　　　　　　var str = 'This is a Box!，That is a Box too';

　　　　　　alert(str.split(pattern)); //将空格拆开分组成数组，返回的是个查分后的数组

　　5、RegExp对象的静态和动态属性

　　　　5.1RegExp对象的静态属性

属  性	短  名	含  义
input	$_	返回当前被匹配的字符串
lastMatch	$&	返回最后一个匹配的字符串
lastParen	$+	返回最后一对圆括号内的匹配子串
leftContext	$`	返回最后一次匹配字符串的前面的子符串
multiline	$*	用于指定是否所有的表达式都用于多行的布尔值
rightContext	$'	在上次匹配之后的子串

　　　　5.2使用静态属性时应该先创建好正则然后再通过RegExp对象来执行它的属性

　　　　eg:

　　　　　　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

　　　　　　注释：Opera不支持input、lastMatch、lastParen和multiline属性。IE不支持multiline属性。所有的属性可以使用短名来操作　　　　　　　　　　　　　RegExp.input可以改写成RegExp['$_']，依次类推。但RegExp.input比较特殊，它还可以写成RegExp.$_。

　　　　5.3RegExp对象的实例属性

属  性	含  义
global	Boolean值，表示g是否已设置
ignoreCase	Boolean值，表示i是否已设置
lastIndex	整数，代表下次匹配将从哪里字符位置开始
multiline	Boolean值，表示m是否已设置
Source	正则表达式的源字符串形式

　　　　　　5.4使用实例属性

　　　　　　　　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，第二次匹配的位

　　　　　　　　注释：以上基本没什么用。并且lastIndex在获取下次匹配位置上IE和其他浏览器有偏差，主要表现在非全局匹配上。lastIndex还支持手动设置，直接赋值操作，了解就好。

　　6、正则表达式中的元字符（正则表达式匹配模式的设置）

　　　　6.1正则表达式元字符是包含特殊含义的字符。反斜杠后的元字符将失去其本身含义而具有特殊含义。

字符类：单个字符和数字

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

字符类：空白字符

元字符/元符号	匹配情况
\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
x{m,}或x{,n}	匹配最少m个x或者是最多n个x

字符类：替代字符

元字符/元符号	匹配情况
this|where|logo	匹配this或where或logo中任意一个

字符类：记录字符

元字符/元符号	匹配情况(前天是必须要把字符串匹配出来)
(string)	用于反向引用的分组
\1或$1	匹配第一个分组中的内容
\2或$2	匹配第二个分组中的内容
\3或$3	匹配第三个分组中的内容

　　　　6.2各种元字符的例子

　　　　　　略

　　　　　　5、使用锚元字符匹配*/

　　　　　　　　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));

　　　　　　6、使用或模式匹配*/

　　　　　　　　var pattern = /google|baidu|bing/; //匹配三种其中一种字符串

　　　　　　　　var str = 'google';

　　　　　　　　alert(pattern.test(str));

　　　　　　7、使用分组模式匹配

　　　　　　　　var pattern = /8(.*)8/; //获取8..8之间的任意字符

　　　　　　　　var str = 'This is 8google8';

　　　　　　　　str.match(pattern);

　　　　　　　　alert(RegExp.$1); //得到第一个分组里的字符串内容

　　　　　　　　var pattern = /8(.*)8/;

　　　　　　　　var str = 'This is 8google8';

　　　　　　　　var result = str.replace(pattern,'<strong>$1</strong>'); //得到替换的字符串输出，其中strong是字符串加粗

　　　　　　　　document.write(result)；//网页上输出result的内容

　　　　　　　　var pattern = /(.*)\s(.*)/;

　　　　　　　　var str = 'google baidu';

　　　　　　　　var result = str.replace(pattern, '$2 $1'); //将两个分组的值替换输出

　　　　　　　　document.write(result);

　　　　6.3贪婪匹配和惰性匹配

贪  婪（最大范围的匹配）	惰  性（最小范围的匹配）
+	+?
?	??
*	*?
{n}	{n}?
{n,}	{n,}?
{n,m}	{n,m}?

　　　　　　1、关于贪婪和惰性

　　　　　　　　var pattern = /[a-z]+?/; //?号关闭了贪婪匹配，只替换了第一个

　　　　　　　　var str = 'abcdefjhijklmnopqrstuvwxyz';

　　　　　　　　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</strong>');

　　　　　　　　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</strong>');

　　　　　　　　document.write(result);

　　　　2、使用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才能返回goo，否则返回null

　　　　　　var str = 'google';

　　　　　　alert(pattern.exec(str));

　　　　　　使用特殊字符匹配

　　　　　　var pattern = /\.\[\/b\]/; //特殊字符，用\符号转义即可

　　　　　　var str = '.[/b]';

　　　　　　alert(pattern.test(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 = /[\w]+\.zip|rar|gz/; //\w表示所有数字和字母加下划线

　　　　var str = '123.zip'; //\.表示匹配.，后面是一个选择

　　　　alert(pattern.test(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') + '|'); //使用了分组获取

　　5.简单的电子邮件验证

　　　　var pattern = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/;

　　　　var str = 'yc60.com@gmail.com';

　　　　alert(pattern.test(str));

　　　　var pattern = /^([\w\.\-]+)@([\w\.\-]+)\.([\w]{2,4})$/;

　　　　var str = 'yc60.com@gmail.com';

　　　　alert(pattern.test(str));