我们来简单的回顾下前两篇文稿中，我们讨论了那些内容。首先我们知道了 “正则表达式” 是神马，如何去定义，并写出第一个过滤字母的程序。
在了解修饰符的概念和作用后，我们能够使用 'g' 匹配字符串中所有的符合项目，亦能够使用 'i' 区分大小写。
这篇文稿中，我们来整体的了解下正则表达式的概念与相关应用。
一、定义方法与修饰符，此处不赘述，请参考第一，第二篇文稿。
http://www.cnblogs.com/dereksunok/p/3670355.html
http://www.cnblogs.com/dereksunok/p/3672473.html
二、查找范围
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [^abc] | 查找任何不在方括号之间的字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
| [a-Z] | 查找任何从小写 a 到大写 Z 的字符。 |
| [adgk] | 查找给定集合内的任何字符。 |
| [^adgk] | 查找给定集合外的任何字符。 |
| [red|blue|green] | 查找任何指定的选项。 |
参考上面表格中的内容，示例代码走一个。
代码五：将阿拉伯数字替换成中文
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <body> 7 <span id="str"></span> 8 <script> 9 window.onload = function() { 10 filterLetters(); 11 } 12 13 function filterLetters() { 14 var str = '他有1本css相关的书，还有2本js方面的和4本java方面的参考手册。'; 15 //纯粹瞎编，少年们不要在意这些细节 16 var reg = /[0-9]/g; 17 str = str.replace(reg,function(at){return changeNumToZH(at);}); 18 document.getElementById('str').innerHTML=str; 19 } 20 function changeNumToZH(string){ 21 switch(string){ 22 case '0':return '零'; 23 break; 24 case '1':return '一'; 25 break; 26 case '2':return '二'; 27 break; 28 case '3':return '三'; 29 break; 30 case '4':return '四'; 31 break; 32 case '5':return '五'; 33 break; 34 case '6':return '六'; 35 break; 36 case '7':return '七'; 37 break; 38 case '8':return '八'; 39 break; 40 case '9':return '九'; 41 break; 42 default:return '-1'; 43 break; 44 } 45 } 46 </script> 47 </body> 48 </html>
简单分析》
上面的小程序里，我们接触到 replace() 这个方法的另一种作用，str.replace(reg,function(string){ return string; }); 第二个参数可以是一个字符串，也可以是一个带参数的函数。
我们在字符串中找到所有的数字后，使用 changeNumToZH(string) 使用返回值的方法将匹配的数字替换成英文。仅此而已。
我们一步步挖掘正则表达式的语法规则，将它神秘的面纱一层层剥下。
到这里，我们回顾下第二篇结尾留给大家思考的问题：若字符串中有多个大小写不一的匹配项时，我们该如何写这个小程序呢？
在了解了查找范围的功能后，仔细的少年们一定会关注到 (red | blue | green) 的作用。
我们来体验一下这个神奇的功能！
代码六：忽略大小写查找并替换所有匹配项
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <body> 7 <p id="txt">He was very wealthy, he is very attractive, he is a school tyrants!</p> 8 <p style="color:#999;">他很富有，他很有魅力，他是一个学霸！（他是我们的“敌人”，“她”是我们的“朋友”，把‘He’变成‘she’）</p> 9 <p id="text01"></p> 10 <script> 11 window.onload = function() { 12 filterLetters(); 13 } 14 15 function filterLetters() { 16 var str = document.getElementById("txt").innerHTML; 17 var reg = /(he|He)/g; 18 str = str.replace(reg,"she"); 19 var reg02 = /s/; 20 str = str.replace(reg02,'S'); 21 document.getElementById('text01').innerHTML=str; 22 } 23 </script> 24 </body> 25 </html>
三、元字符
| 元字符 | 描述 |
|---|---|
| . | 查找单个字符，除了换行和行结束符。 |
| w | 查找单词字符。 |
| W | 查找非单词字符。 |
| d | 查找数字。 |
| D | 查找非数字字符。 |
| s | 查找空白字符。 |
| S | 查找非空白字符。 |
| 匹配单词边界。 | |
| B | 匹配非单词边界。 |
| 查找 NUL 字符。 | |
| 查找换行符。 | |
| f | 查找换页符。 |
| 查找回车符。 | |
| 查找制表符。 | |
| v | 查找垂直制表符。 |
| xxx | 查找以八进制数 xxx 规定的字符。 |
| xdd | 查找以十六进制数 dd 规定的字符。 |
| uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
看过上边的参考，我们抛开元字符本身的概念，联系一下英语中“元音字母”的概念，大家就能想到其中的奥妙所在。这是javascript在提供现成的工具给我们使用。
其中有一点需要注意的是，要尽量避免使用 '.' （查找单个字符，除了换行和行结束符），这个过滤的方法太泛泛，把握不好很容易出错。
让我们感到很惊奇的有 w W d D s S，代码走起：
代码七：查找出所有的数字，并加上单位符号。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <body> 7 <p id="txt">公司今年的开支预算大约是100000，业绩达到500000，广告投放40000。</p> 8 <p id="text01"></p> 9 <script> 10 window.onload = function() { 11 filterLetters(); 12 } 13 14 function filterLetters() { 15 var str = document.getElementById("txt").innerHTML; 16 var reg = /d+/g; 17 var arry = str.match(reg); 18 str = str.replace(reg,function(exc){ 19 return "￥"+exc; 20 }) 21 document.getElementById('text01').innerHTML=str; 22 } 23 </script> 24 </body> 25 </html>
很简单的小程序，我们学会使用 replace()方法中的函数参数去遍历正则表达式过滤出来的项目。唔，自信心是不是又增加了一成！
只不过里面有一个小符号 “+” 略有生疏，这是什么意思呢？我们把“+”去掉试试
1 function test(){ 2 var strs = '100000'; 3 var reg = /d/g; 4 strs.match(reg); 5 }
运行后得到了我们不太想得到的结果：
由此可知“+”的含义是不是找到临近的相同匹配项目呢？我们来看下正则表达式中另一个重要的工具，量词
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
| n{X} | 匹配包含 X 个 n 的序列的字符串。 |
| n{X,Y} | 匹配包含 X 或 Y 个 n 的序列的字符串。 |
| n{X,} | 匹配包含至少 X 个 n 的序列的字符串。 |
| n$ | 匹配任何结尾为 n 的字符串。 |
| ^n | 匹配任何开头为 n 的字符串。 |
| ?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
看到这些更加怪异的代码，心里是不是会不自由得发出这样的心声，这特么的怎么用啊？
朋友们莫急，我们不是已经了解了“+”的用法吗？表格中前六项都是类似含义的用法，我们来看看 “^” 和 “$”的用法。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <body> 7 <p>输出结果：<span id="text01">.</span></p> 8 <button id="btn01" onclick="filterStart();">filterStart</button><br> 9 <button id="btn01" onclick="filterStop();">filterStop</button> 10 <script> 11 window.onload = function() { 12 13 } 14 15 function filterStart() { 16 var str = "123 abc"; 17 var reg = /^d+/g; 18 var resalut = reg.test(str); 19 var s = str.match(reg) 20 document.getElementById('text01').innerHTML=resalut +" 匹配项："+ s; 21 } 22 23 function filterStop(){ 24 var strs = 'abc cba 321'; 25 var regs = /d+$/g; 26 var resalut = regs.test(strs); 27 var s = strs.match(regs) 28 document.getElementById('text01').innerHTML=resalut +" 匹配项："+ s; 29 } 30 </script> 31 </body> 32 </html>
代码走起，云消雾散了吧！