js之正则表达式（上）

1、正则表达式的创建方式

两种方式创建：通过new修饰符创建和字面量的方式创建

1》new修饰符方式创建

 var b2=new RegExp('Box','ig');  //第二个参数是 模式字符串： 用来限定 匹配的方式
 // g :全局匹配    i：忽略大小写的匹配    m ：多行匹配

2》字面量的方式创建

 var d= /Box/i;    //   //之间的是 参数字符串；；第二个/ 后面的是 模式字符串

 2、js中正则表达式的测试方式

两种测试方式：test()方法：检测字符串中是否“含有”对应的模式字符串，返回值是true和false；

exec()方法：检测字符串中是否“含有”对应的模式字符串，返回值是匹配到的字符串的数组，如果没有就返回null（返回值类型：object）

 var d= /Box/i;  //忽略大小写的匹配
 alert(d.test('box'));   //true

 alert(/Box/i.test('this is a box'));    //true    : 匹配字符串中是否 “含有” 匹配字符串

 alert(d.exec('box'));    //box   

 alert( typeof d.exec('s'));  //object

3、String类方法中使用的正则表达式

String类的match()、search（）、replace()、split()

1》match()字符串的匹配方法，返回匹配到的数组

 var pattern=/Box/gi; //全局匹配  不区分大小写
 var b ='This is a box!It is a small box';
 alert(b.match(pattern));  //返回 的是 匹配到的数组 （box,box）
 //如果不是全局匹配，，那么 只会 匹配第一个 ，返回的数组 只会含有一个  元素
 pattern =/Box/i;
 alert(b.match(pattern));   //box

2》search()返回第一个匹配到的字符串索引位置 ,g(全局匹配)在这里不起作用，如果没有匹配到就返回-1

alert(b.search(pattern));     //

3》replace()：找到要被匹配的字符串，然后用指定的字符串进行替换；返回值：返回替换后的字符串

 alert(b.replace(pattern,'shit'));  //返回 替换后的 字符串

注意：如果不是全局匹配的换，只有第一个匹配到的字符串被替换

4》split()按照指定的 “匹配符” 进行分割

 alert(b.split(pattern));      // This is a ,!It is a small ,

正则表达式的静态方法和实例方法在这里就不做介绍，因为不常用，所以用的时候在查。

4、获取和控制（*重点）

1》单个字符和数字的匹配

下面通过代码进行演示其使用的方式

 var pattern =/[a-z]oogle/;   //[a-z] 表示  小写字母中的 任意一个
 alert(pattern.test("google")); //true

 //下面一定要注意(****)
 var pattern =/[A-Z]oogle/;    //匹配的时候 是 匹配 字符串中是否含有  “匹配的字符串”
 alert(pattern.test('aaaaaaGGGGoogleaaaa'));   //true

 alert(/[0-9]aaaa/.test("444aaaa"));   //true 

还可以进行“复合”匹配

 var pattern3=/[a-zA-Z0-9]/; //匹配的 a-z和A-Z和0-9都可以  类似于"/w"

 var pattern4=/[^a-z]oogle/;   //[^a-z] 代表的就是 非 a-z  的字符

2》空白字符的匹配 

代码演示：

 //空格字符的匹配  \s
 var pattern =/goo\sgle/;
 var str='goo gle';

 alert(pattern.test(str));    //true

3》锚字符的匹配

主要是对匹配的控制

代码演示：

 var pattern ='/^[0-9]oogle/'  //^  位于 匹配字符串的 开头  代表 匹配字符串的 匹配是 从 字符串的  开头开始的
 alert(pattern.test("4444oogle"));//false  因为是 从 最前面的 那个 4 进行匹配的

 alert(/^[0-9]+oogle/.test("4444oogle"));  //true   +  代表是 1个 或 多个

 //全局控制
 var pattern2=/^\woogle$/;    //^讲开头控制住，，$将结尾控制住，，所以 就是全局控制，，，\w 代表 匹配 数字字母和_

\b：行尾匹配

 var pattern2 =/google\b/;    //\b 代表是否到达结尾；；；就是e 是否是 最后一个字符
 var str2='googleeeee';

 alert(pattern2.test(str2));    //false
 alert(pattern2.test('google'));  //true

5》重复匹配 

代码演示：

 var pattern =/go{3}gle/;   //限定 o 为三个
 var pattern2=/go{2,4}gle/;   //限定 o 为2 到4 个
 var pattern3=/go{3,}gle/;    //限定o为  3个 或者 3个以上

 var d='google';
 alert(pattern.test(d));   //false
 alert(pattern2.test('goooogle'));   //true
 alert(pattern3.test('gooooogle'));   //true

6》替代匹配

代码演示：

 var pattern =/box|\w+oogle/;  //字符串匹配到 'box' 或者 '\w+oogle'都会返回 true
 alert(pattern.test('box'));       //true
 alert(pattern.test('shigggoogle'));   //true

7》分组匹配

记录字符：

使用RegExp的静态属性 $1 获得 是分组中的内容。

（）分组匹配演示：

 var pattern3 =/google{4,8}$/;    //代表 匹配 e字符 4到 8 次
 var str3='googleeeee';

 alert(pattern3.test(str3));    //true

 var pattern4=/(google){4,8}/;    //表示 匹配  google  4到 8 次
 alert(pattern4.test('googlegooglegooglegoogle'));//true

$1:取到匹配到的第一个分组的字符串（难点）：

 var pattern =/8(.*)8/;
 var str='This is a 8google8';
 //只要匹配 一次就可以；；不管是怎样的  匹配
 //pattern.test(str);

 str.match(pattern);//和上面 一样，，下面也能够 取到  分组匹配到的 字符串

 //上面两种任意一种方式还要是匹配，之后就可以通过下面 取到第一分组 匹配到的字符串。
 alert(RegExp.$1);     //google

演示一个案例，将匹配到的字符串 加粗，打印出来

 var str2='You are a 8shit8';

 document.write(str2.replace(pattern,'<strong>$1</strong>'));   //$1  取出 匹配到的  分组字符串 

演示第二个案例，将 'google baidu'  两个单词位置调换

 var pattern2=/(.*)\s(.*)/;
 var str='google baidu';
 alert(str.replace(pattern2,'$2 $1'));  //将 他们的 位置 调换 

8》贪婪和惰性

示例一：

 var pattern =/[a-z]+/;      //贪婪模式
 var str='ddfdfds';

 alert(str.replace(pattern,1)); //1    //只会 匹配到 第一个  将第一个 替换掉

 pattern=/[a-z]/g; //进行全局匹配

 alert(str.replace(pattern,1));     //

 //使用 惰性模式
 pattern =/[a-z]+?/;
 alert(str.replace(pattern,1));   //1dfdfds

下面是显示贪婪模式的经典例子

 //贪婪模式
 var pattern2=/8(.*)8/g;
 var str='8google8 8google8 8google8';    //最先 匹配的  两边的 88   因为 . 也 匹配 8
 //<strong>google8 8google8 8google</strong>
 document.write(str.replace(pattern2,'<strong>$1</strong>'));

输出结果：

使用惰性模式：

 //下面使用 惰性模式
 pattern2=/8(.*?)8/g;
 document.write(str.replace(pattern2,"<strong>$1</strong>"));
 //输出结果:
 //<strong>google</strong>
 //<strong>google</strong>
 //<strong>google</strong>

输出结果：

使用 另一种 禁止贪婪的模式：

 pattern2=/8([^8]*)8/g;
 document.write(str.replace(pattern2,"<strong>$1</strong>"));   //和上面 的 实现的 效果一样

输出结果：