我们来简单的回顾下前两篇文稿中,我们讨论了那些内容。首先我们知道了 “正则表达式” 是神马,如何去定义,并写出第一个过滤字母的程序。
在了解修饰符的概念和作用后,我们能够使用 '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 | 匹配非单词边界。 |