javascript高级程序设计(第三版)学习笔记（一）正则表达式整理

摘要：1、创建正则表达式第一种方式：注意这里的正则表达式不能使用单引号或者双引号，如下varpattern1=/[abc]/i;//匹配第一个"a...

1、创建正则表达式

第一种方式：注意这里的正则表达式不能使用单引号或者双引号，如下

var pattern1 = /[abc]/i; // 匹配第一个"a"或"b"或"c"，不区分大小写

第二种方式：使用RegExp构造函数创建，该构造函数传入两个参数，都是字符串，所以需要特别注意""符号的转换，所有元字符（下面有讲元字符）需要双重转义，如下

复制代码代码如下:

var patt1 = new RegExp("[abc]","gi"); // 这里等价于 var patt1 = /[abc]/gi;

alert("[abc]".match(patt1)); // return a

var patt2 = new RegExp("[abc]","gi"); // 这里等价于 var patt2 = /[abc]/gi; 而在引号内""必须转移为""

alert("[abc]".match(patt2)); // return [abc]

说到这里思考两个问题：

a、如果这里的正则表达式，是通过字符串和某个变量动态组合而成的，如何使用第一种方式创建正则表达式？

显然，用第二种创建正则表达式的方式，肯定没有任何问题，因为，传入的第一个参数本身就是一个字符串。要用第一种方式创建，这里需要用到eval()函数，如下

复制代码代码如下:

var str = "abc"; // 这可能是一个动态的变量

var patt1 = eval("/["+str+"]/"); // 等价于 var patt1 = /[abc]/;

alert("[abc]".match(patt1)); // return [abc]

b、上面两种创建方法有什么不同之处？

《javascript高级程序设计（第三版）》中讲：区别在于是否共享，使用第一种方式创建的正则，共享，第二种不共享。经楼主实践发现结果有点出入，两种创建方式结果一样，都是（true true true），各位可以自行测试。所以这里MARK一下，这两种创建方式没什么区别。

复制代码代码如下:

var re = null,i;

for(i=0;i<3;i++){

re = /cat/g;//书：实例属性不会重置，下面的结果应该是 true false true

alert(re.test("catasdfdfdf"));

}

for(i=0;i<3;i++){

re = new RegExp("cat","g");//书：实例属性会重置,下面的结果应该是 true true true

alert(re.test("catasdfdfdf"));

}

这里顺便讲一下匹配模式的三个标志：g、i、m

g：设置了g之后，模式被应用于所有字符串，发现第一个匹配项后，不会立即停止，模式的lastIndex会移至下一个位置，待下一次应用此模式的时候，再次从lastIndex开始匹配，如果匹配到最后了，lastIndex才会被重置为0；

i：这个很好理解，不区分大小写；

m：表示多行模式，即在到达一行文本末尾的时候还会继续查找下一行，进行匹配；

2、元字符： ( [ { ^ $ | ) ? * + . ] }

这些字符在正则表达式中有一或多种特殊用途，因此如果想匹配这些字符，都需要进行转义。如：

复制代码代码如下:

var pattern1 = /[abc]/i; // 匹配第一个"[abc]"，不区分大小写

var pattern2 = /[abc]/i; // 匹配第一个"a"或"b"或"c"，不区分大小写

3、RegExp实例属性

global、ignoreCase、multiline、lastIndex、source，这些属性用处不大，其中lastIndex可用于调试，简单示例

复制代码代码如下:

var patt1 = /cat/g;

patt1.test("catasdfdfdf");

dw(patt1.global); // 是否设置了g，全局模式 // true

dw(patt1.ignoreCase); // 是否设置了i，不区分大小写 // false

dw(patt1.multiline); // 是否设置了m,多行匹配，到了一行末尾，能够继续匹配下一行 // false

dw(patt1.lastIndex); // 表示开始搜索下一个匹配项的开始位置，第一次为0 // 3

dw(patt1.source); // 返回正则表达式字面量 // cat

4、范围集合类：[] ^ |

[abc]，表示a或者b或者c中的任意一个字符

[a-z]、[A-Z]、[0-9]，表示小写字母，大写字母，0到9的数字

[^a-z]、[^A-Z]、[^0-9]，表示非小写字母，非大写字母，非0到9的数字

[abc|def]，表示abc和def中的任意一个

复制代码代码如下:

alert(/[abc]/.test("a"));//true

alert(/[abc]/.test("gg"));//false

alert(/[^abc]/.test("a"));//false

alert(/[^abc]/.test("gg"));//true

alert(/[a-z]/.test("A"));//false

alert(/[A-Z]/.test("A"));//true

alert(/[abc|def]/.test("def"));//true

5、量词类：? * + {m} {m,n} {m,}

? 0或1次，放在量词后面，表示非贪婪品匹配，后面讲解

* 0或多次

+ 1或多次

{m} m次

{m,n} 至少m次，至多n次

{m,} 至少m次

复制代码代码如下:

alert(/a?/.test("a"));//true

alert(/a?/.test("b"));//true 可以出现0次

alert(/a*/.test("a"));//true

alert(/a*/.test("b"));//true 可以出现0次

alert(/a+/.test("a"));//true

alert(/a+/.test("b"));//false

alert(/a{3}/.test("aaaaa"));//true

alert(/a{3}/.test("bbbbb"));//false 看到网上一些文章将，这里应该是0或者3次，这里楼主测试了几个浏览器，没有0次

alert(/a{3,5}/.test("aaaaa"));//true

alert(/a{3,5}/.test("bbbbbb"));//false

alert(/a{3,}/.test("aaaaa"));//true

alert(/a{3,}/.test("bbbbbb"));//false

6、边界类： ^ $ b B

^ 表示开头的标志，注意，不能紧接着左中括号，比如[^A-Z]，这样表示非

$ 表示结尾的标志

b 单词边界的标志，这样理解，它表示单词间那个看不到的东西，一侧是单词字符，一侧是非单词字符(包括各种标点和空白字符或中文)

B 非单词边界的标志

复制代码代码如下:

alert(/^居$/.test("居")); // 只限一个居 true

alert(/^居$/.test("居居")); // 只限一个居 false

alert(/b啊/.test("a啊")); // true 思考一下：为什么这个和下面的结果不一样？？

alert(/b啊/.test("-啊")); // false

alert(/B啊/.test("a啊")); // false

alert(/B啊/.test("-啊")); // true

alert(/b啊/.test("a啊")); 中，"a"和"啊"之间存在一个b，因为b的左边是"a"，右边是"啊"，所以能够匹配，为true；

相反：alert(/b啊/.test("-啊")); 中，"啊"的左边有个b，但是b的左边是"-"，不是单词字符，所以，不能匹配，为false

7、预定义类： d D s S w W .

d 表示0-9的数字字符，相当于 [0-9]

D 表示非0-9的数字字符，相当于 [^0-9]

复制代码代码如下:

alert(/d/.test("1"));//true

alert(/D/.test("1"));//false

s 空白字符，相当于 [nrftx0B ] ，注意空格也算

S 非空白字符，相当于 [^nrftx0B ]

复制代码代码如下:

alert(/s/.test(" "));//true，空格也算

alert(/S/.test("nrftx0B "));//false

alert(/S/.test("nrftx0B "));//true

w 单词字符，相当于 [a-zA-Z0-9_]

W 非单词字符，相当于 [^a-zA-Z0-9_]

复制代码代码如下:

alert(/w/.test("afdas"));//true

alert(/W/.test("afdas"));//false

(点). 表示除了n和r意外的任意字符，相当于 [^nr]

复制代码代码如下:

alert(/./.test("nr"));//false ，只有这两个，其他的都能够被 . 匹配

alert(/./.test(" "));//true

8、RegExp实例方法：exec() test() match()

exec()：返回第一个匹配项信息的数组，没能匹配成功返回null，用法：pattern.exec(str); 需要注意有没有"g"的不一样

复制代码代码如下:

var re1 = /([a-z]*)bbb/;//贪婪

document.write(re1.test("abbbaabbb1234")+" ");//true

document.write(re1.exec("abbbaabbb1234")+" ");//abbbaabbb,abbbaa,这里贪婪匹配到abbaabbb，然后$1为abbbaa，所以此时返回abbbaabbb,abbbaa

var re1 = /([a-z]*)bbb/g;//贪婪

document.write(re1.test("abbbaabbb1234")+" ");//true

document.write(re1.exec("abbbaabbb1234")+" ");//null //因为设置了g标识，并为贪婪匹配，而上面的test已经贪婪匹配到abbbaabbb，后面只有1234，所以此时匹配不到，返回null

test()：在只需要知道是否匹配，不需要知道具体匹配什么文本的情况下，使用这个放个比较方便，用法：pattern.test(str);

复制代码代码如下:

var re1 = /([a-z]*)bbb/;//贪婪

document.write(re1.test("abbbaabbb1234")+" ");//true

var re1 = /([a-z]*)bbb/g;//贪婪

document.write(re1.test("abbbaabbb1234")+" ");//true

document.write(re1.test("abbbaabbb1234")+" ");//false 要理解这里为什么是false，因为设置了g，那么这次的匹配是从1开始的

document.write(re1.test("abbbaabbb1234")+" ");//true

match()：这个函数比较特别，在设置g和不设置的情况下，表示形式完全不一样，在未设置g的情况下，表现形式和exec一样，设置了g的情况下，将返回所有匹配到的值的集合，用法：str.match(pattern)

复制代码代码如下:

var re1 = /([a-z]*)bbb/;//贪婪

document.write("abbbaabbb1234".match(re1)+" ");//abbbaabbb,abbbaa 这里的abbbaabbb是匹配到的整个字符串，abbbaa是匹配第一个小括号的字符串

var re1 = /([a-z]*)bbb/g;//贪婪

document.write("abbbaabbb1234".match(re1)+" ");//abbbaabbb，在设置了g后，match()返回所有匹配到的值

最后，exec()和未设置g的match()，最后返回的数组的第一个元素是整个匹配的字符串，如果模式中存在小括号，那么第二个元素是第一个括号的匹配内容，以此类推，第三个、第四个。。。比如：

复制代码代码如下:

var re1 = /(a(b(c)))d/;

var str = "abcdd";

var matches = str.match(re1);

alert(matches[0]);//abcd //这里是整个字符串

alert(matches[1]);//abc //这里是第一个小括号

alert(matches[2]);//bc // 这里是第二个小括号

alert(matches[3]);//c // 这里是第三个小括号

9、贪婪和非贪婪匹配 ?

贪婪匹配：匹配到之后，继续往后匹配到字符串结束，然后选择最长的。比如：对于字符串"aaaaaab"，要匹配/a+/,那么匹配的将是"aaaaaa"，而不是一个"a"。

非贪婪匹配：匹配到之后，马上停止。比如：对于字符串"aaaaaab"，要匹配/a+?/,那么匹配的将是"a"，而不是一个"aaaaaa"。用法就是在量词后面加"?"。

复制代码代码如下:

var re1 = /a+/;

var str = "aaaaaaa";

alert(str.match(re1));// aaaaaaa

var re1 = /a+?/;

var str = "aaaaaaa";

alert(str.match(re1));// a

下面给一个综合一点的例子：讲解了贪婪和非贪婪，全局g，exec和match的区别？？？

复制代码代码如下:

var re1 = /([a-z]*)bbb/;//贪婪

var re2 = /([a-z]*?)bbb/;//非贪婪

document.write(re1.test("abbbaabbb1234")+" ");//true

document.write(re1.exec("abbbaabbb1234")+" ");//abbbaabbb,abbbaa,这里贪婪匹配到abbaabbb，然后$1为abbbaa，所以此时返回abbbaabbb,abbbaa

document.write("abbbaabbb1234".match(re1)+"<hr>");//abbbaabbb,abbbaa,这里贪婪匹配到abbaabbb，然后$1为abbbaa，所以此时返回abbbaabbb,abbbaa

document.write(re2.test("abbbaabbb1234")+" ");//true

document.write(re2.exec("abbbaabbb1234")+" ");//abbb,a ，这里非贪婪匹配到abbb，然后$1为a，所以此时返回abbb,a

document.write("abbbaabbb1234".match(re2)+"<hr>");//abbb,a ，这里非贪婪匹配到abbb，然后$1为a，所以此时返回abbb,a

var re3 = /([a-z]*)bbb/g;//贪婪

var re4 = /([a-z]*?)bbb/g;//非贪婪

document.write(re3.test("abbbaabbb1234")+" ");//true

document.write(re3.exec("abbbaabbb1234")+" ");//null ，因为设置了g标识，并为贪婪匹配，而上面的test已经贪婪匹配到abbbaabbb，后面只有1234，所以此时匹配不到，返回null

document.write("abbbaabbb1234".match(re3)+"<hr>");//abbbaabbb，注意在设置了g标识后，match只返回匹配到的所有值，这里因为是贪婪匹配，所以匹配了abbbaabbb

document.write(re4.test("abbbaabbb1234")+" ");//true

document.write(re4.exec("abbbaabbb1234")+" ");//aabbb,aa ，因为设置了g标识，并为非贪婪匹配，而上面的test已经贪婪匹配到abbb，后面只有aabbb1234，所以此时在此匹配到aabbb，此时$1为aa，所以返回aabbb,aa

document.write("abbbaabbb1234".match(re4)+"<hr>");//abbb,aabbb 注意在设置了g标识后，match只返回匹配到的所有值，这里因为是非贪婪匹配，所以匹配了abbb,aabbb

10、反向引用

正则表达式中的匹配组捕获的子字符串。每个反向引用都由一个编号或名称来标识，并通过“编号”表示法进行引用。

复制代码代码如下:

/(w+)/.test("hello-world");

dwl(RegExp.$1);//hello

dwl(/(居)1/.test("居居"))//true 这里的1表示第一个小括号里面的内容

dwl("aa bbb cccc".replace(/(w{2,}) (w{2,}) (w{2,})/,"$3 $2 $1")); // cccc bbb aa

11、非捕获性分组 ?:

并不是每个小括号都能通过反向引用进行捕获，在小括号后面加上"?:"，即可进行设置非捕获性分组。

复制代码代码如下:

/(w+)-(w+)/.test("hello-world");

alert(RegExp.$0);//undefined

alert(RegExp.$1);//""不会被捕获

alert(RegExp.$2);//world

12、正向前瞻 ?= 和负向前瞻 ?!

(?=str) 匹配后面紧跟是str，比如 he 能够通过模式 /he(?=llo)/ 匹配字符串 "hello"

(?!str) 匹配后面紧跟不是str，比如 hel 能够通过模式 /he(?!llo)/ 匹配字符串 "hello"

复制代码代码如下:

//这样理解，将(?=str)或者(?!str)当做条件，然后考虑匹配其他的部分，匹配到了之后，再拿条件作对比，看符不符合

dwl("he-lloworld".match(/(w+)(?=world)/g)); //llo 这里先匹配(w+)，找到两个块，he和lloworld，其中he不符合(?=world)，而lloworld，只要拆成llo和world连接，就符合(?=world)，即，llo链接了一个world，所以这里匹配了llo

dwl("he-lloworld".match(/(w+)(?!world)/g)); //he,lloworld 这里先匹配(w+)，找到两个块，he和lloworld，其中he不符合(?=world)，而lloworld，只要不拆，就符合(?!world)，即，llo链接了一个world，所以这里匹配了he,lloworld

13、出几个实例题目？

a、讲一个字符串中的所有英文单词首字母大写？

复制代码代码如下:

var str = "你好hello世界woRld，我i爱love你you";

var str = str.toLowerCase().replace(/bw|sw/g,function(s){

return s.toUpperCase();

});

alert(str)

b、去除html代码中的所有标签，除了a标签

复制代码代码如下:

var str = "<a href='http://www.jb51.net/'>居居居居居居居居居</a ><hr/> by 居居居居居居居居居";

var str = str.replace(/<(?!(/?a))(.|s)*?>/g,""); // 这里用到了负前瞻