js之正则表达式(上)

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

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

1》new修饰符方式创建

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

 

2》字面量的方式创建

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

 

 

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

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

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

1 var d= /Box/i;  //忽略大小写的匹配
2 alert(d.test('box'));   //true
3 
4 alert(/Box/i.test('this is a box'));    //true    : 匹配字符串中是否 “含有” 匹配字符串
5 
6 alert(d.exec('box'));    //box   
7 
8 alert( typeof d.exec('s'));  //object

 

 

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

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

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

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

 

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

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

 

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

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

 

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

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

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

 

 

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

 

4、获取和控制(*重点)

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

 

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

1 var pattern =/[a-z]oogle/;   //[a-z] 表示  小写字母中的 任意一个
2 alert(pattern.test("google")); //true
3 
4 //下面一定要注意(****)
5 var pattern =/[A-Z]oogle/;    //匹配的时候 是 匹配 字符串中是否含有  “匹配的字符串”
6 alert(pattern.test('aaaaaaGGGGoogleaaaa'));   //true
7 
8 alert(/[0-9]aaaa/.test("444aaaa"));   //true 

 

还可以进行“复合”匹配

1 var pattern3=/[a-zA-Z0-9]/; //匹配的 a-z和A-Z和0-9都可以  类似于"/w"
2 
3 var pattern4=/[^a-z]oogle/;   //[^a-z] 代表的就是 非 a-z  的字符

 

2》空白字符的匹配 

代码演示:

1 //空格字符的匹配  \s
2 var pattern =/goo\sgle/;
3 var str='goo gle';
4 
5 alert(pattern.test(str));    //true

 

3》锚字符的匹配

 

 主要是对匹配的控制

 代码演示:

1 var pattern ='/^[0-9]oogle/'  //^  位于 匹配字符串的 开头  代表 匹配字符串的 匹配是 从 字符串的  开头开始的
2 alert(pattern.test("4444oogle"));//false  因为是 从 最前面的 那个 4 进行匹配的
3 
4 alert(/^[0-9]+oogle/.test("4444oogle"));  //true   +  代表是 1个 或 多个
5 
6 //全局控制
7 var pattern2=/^\woogle$/;    //^讲开头控制住,,$将结尾控制住,,所以 就是全局控制,,,\w 代表 匹配 数字字母和_

 

 \b:行尾匹配

1 var pattern2 =/google\b/;    //\b 代表是否到达结尾;;;就是e 是否是 最后一个字符
2 var str2='googleeeee';
3 
4 alert(pattern2.test(str2));    //false
5 alert(pattern2.test('google'));  //true

 

5》重复匹配 

代码演示:

1 var pattern =/go{3}gle/;   //限定 o 为三个
2 var pattern2=/go{2,4}gle/;   //限定 o 为2 到4 个
3 var pattern3=/go{3,}gle/;    //限定o为  3个 或者 3个以上
4 
5 var d='google';
6 alert(pattern.test(d));   //false
7 alert(pattern2.test('goooogle'));   //true
8 alert(pattern3.test('gooooogle'));   //true

 

6》替代匹配

代码演示:

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

 

7》分组匹配

记录字符:

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

()分组匹配演示:

1 var pattern3 =/google{4,8}$/;    //代表 匹配 e字符 4到 8 次
2 var str3='googleeeee';
3 
4 alert(pattern3.test(str3));    //true
5 
6 var pattern4=/(google){4,8}/;    //表示 匹配  google  4到 8 次
7 alert(pattern4.test('googlegooglegooglegoogle'));//true

 

$1:取到匹配到的第一个分组的字符串(难点):

1 var pattern =/8(.*)8/;
2 var str='This is a 8google8';
3 //只要匹配 一次就可以;;不管是怎样的  匹配
4 //pattern.test(str);
5 
6 str.match(pattern);//和上面 一样,,下面也能够 取到  分组匹配到的 字符串
7 
8 //上面两种任意一种方式还要是匹配,之后就可以通过下面 取到第一分组 匹配到的字符串。
9 alert(RegExp.$1);     //google

 

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

1 var str2='You are a 8shit8';
2 
3 document.write(str2.replace(pattern,'<strong>$1</strong>'));   //$1  取出 匹配到的  分组字符串 

 

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

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

 

8》贪婪和惰性

示例一:

 1 var pattern =/[a-z]+/;      //贪婪模式
 2 var str='ddfdfds';
 3 
 4 alert(str.replace(pattern,1)); //1    //只会 匹配到 第一个  将第一个 替换掉
 5 
 6 pattern=/[a-z]/g; //进行全局匹配
 7 
 8 alert(str.replace(pattern,1));     //1111111
 9 
10 //使用 惰性模式
11 pattern =/[a-z]+?/;
12 alert(str.replace(pattern,1));   //1dfdfds

 

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

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

 

输出结果:

使用惰性模式:

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

 

输出结果:

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

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

 

输出结果:

 

posted @ 2014-03-04 14:50  小小gogo  Views(1663)  Comments(5Edit  收藏  举报