正则表达式那些事儿（三）

我们来简单的回顾下前两篇文稿中，我们讨论了那些内容。首先我们知道了 “正则表达式” 是神马，如何去定义，并写出第一个过滤字母的程序。

在了解修饰符的概念和作用后，我们能够使用 '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 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NUL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\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>

代码走起，云消雾散了吧！

 

参考手册：http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

posted @ 2014-04-21 17:40  勤劳的码农  阅读(338)  评论(0)  编辑  收藏  举报