JavaScript中的正则表达式

最近一直用到正则表达式，今天跟着教程系统学习了一下，整理笔记如下：

1.字符串操作函数

search
substring
charAt
split

1.1 search

1 2	var str='abcdef'; alert(str.search('b'));//1, 找到则返回所在位置

1 2	var str='abcdef'; alert(str.search('m'));//-1, 没找到返回-1

1.2 substring

1 2	var str='abcdef'; alert(str.substring(2,4)); //cd, 返回[2,4)

1 2	var str='abcdef'; alert(str.substring(2)); //cdef, 只提供一个参数时，取到字符串结尾

1.3 charAt

1 2	var str='abcdef'; alert(str.charAt(3)); //d

1.4 split

1 2	var str='ab-cd-ef'; alert(str.split('-')); //[ab,cd,ef]

2.正则表达式

两种书写方式
标志的介绍
元字符介绍
量词的介绍
方括号介绍

2.1 两种书写方式

perl风格（字面量形式）：

1	var re = /[bc]at/i; // re = /pattern/attributes;

Javascript风格（使用RegExp构造函数定义）：

1	var re = new RegExp("[bc]at","i"); // re = new RegExp(pattern, attributes);

2.2 标志的介绍

i: 不区分大小写模式（case-insensitive）
g: 全局模式（global），不是在发现第一个匹配项时立即停止

var str = 'abc 853 isaf98024 sfk';
var re1 = /\d/;
var re2 = /\d/g;
alert(str.match(re1));//8
alert(str.match(re2));//8,5,3,9,8,0,2,4

2.3 元字符介绍

\d ：匹配数字

1
2
3

var str = 'abc 853 isaf98024 sfk9we 98';
var re = /\d/;
alert(str.search(re));//4 第一个数字出现的位置

\D ：匹配非数字，等价于[^0-9]

\w ：匹配英文、数字，下划线，等价于[a-z0-9_]

\W ：匹配除了英文、数字，下划线以外的字符，等价于[^a-z0-9_]

\s ：匹配空白字符

\S ：匹配非空白字符

.(点) ：匹配任意字符，尽量少用

2.4 量词的介绍

{n} ：正好出现n次

1	var re = \d{8}; // 匹配连续8位数字

{n,m} ：最少n次，最多m次

1	var re = [1-9]\d{4,10};//5-11位非0开头的QQ号

{n,} ：n最少出现n次，最多次数不限

n+ ：n至少出现一次，等价于{1,}

var str = 'abc 853 isaf98024 sfk';
var re1 = /\d/g;
var re2 = /\d+/g;
alert(str.match(re1));//8,5,3,9,8,0,2,4
alert(str.match(re2));//853,98024

n? ：n出现一次或者不出现，等价于{0,1}

1 2	//电话号码中以0开头的3-4位区号可有可无，和后面非0开头的8位电话号，用-连接 var re = /(0\d{2,3}-)?[1-9]\d{7}/;

n* ：等价于{0,}，不推荐使用

var str = 'abc 853 isaf98024 sfk';
var re1 = /\d+/g;
var re2 = /\d*/g;
alert(str.match(re1));//853,9802
alert(str.match(re2));//,,,,853,,,,,,98024,,,,,

^n ：匹配开头为n的字符串
n$ ：匹配结尾为n的字符串

3.和正则表达式搭配的函数

match
replace
test

3.1 match

返回指定的值，而非字符串的位置

1
2
3

var str = 'abc 853 isaf98024 sfk';
var re = /\d/;
alert(str.match(re));//8

3.2 replace

var str = 'abc abc abc';
var re = /a/g;
alert(str.replace(re,'0'));//0bc 0bc 0bc
``` 

**3.3 test**

只要string中有re满足的部分即会返回true
``` javascript
//只要string中有re满足的部分即会返回true
re.test(string);

4.实例

邮箱校验
去除一段文字中的html标签

4.1 邮箱校验

邮箱的拼写规则：英文/数字/下划线 @ 英文/数字 . 英文
邮箱的正则表达式：/ \w+ @ [a-z0-9]+ \. [a-z]+ / i

1
2
3

var re = /\w+@[a-z0-9]+\.[a-z]+/i;
re.test('abc@bcd.com');//true
re.test('abc@bcd.com啦啦啦');//true

注意到第二次校验的邮箱并不符合格式要求，但是结果仍然返回true。这是因为test函数，只要string中有正则表达式满足的部分即会返回true。

对正则表达式限制首部和尾部，可以避免这一问题，此时只有string从第一个字符到最后一个字符完全匹配成功，才会返回true，修改后的正则表达式如下：

1	var re = /^\w+@[a-z0-9]+\.[a-z]+$/i;

4.2 去除一段文字中的html标签

如下一段文字中，多次出现html标签，在这个例子中，我们用正则表达式匹配每个标签，方便进一步对标签做删除操作。

正是盛夏时节，不比初春时的一片新绿，知道好日子才开始，所以明亮快活，眼前的绿是沉甸甸的，许是因为知道绚烂已到了顶，以后的日子只有每况愈下。一如我此时的心情。 十天前，我换灯泡时从梯子上摔下来，醒时已经是在这具身体前主人的床上了。据丫鬟说，我是从阁楼的楼梯上摔了下来，然后昏迷了一天一夜。

取出html标签，即取出<>包裹的内容，于是又如下正则表达式：

1	var re = /<.+>/g;

但是此时取出的是上面完整的段落，造成这样的原因是正则表达式的贪婪性，即会取出满足表达式的尽可能长的字符串，于是从段首的“<”开始，一直取到断尾的“>”。

正则表达式中 .+ 描述的不准确，并不是“<>”中任何字符都可以出现，其自身就不可以出现，修改正则表达式为：

1	var re = /<[^<>]+>/g;

———————- 2016年5月16日更新 ———————-

5.正则表达式中包含变量

今天写正则的时候遇到一个问题，我希望得到的正则表达式是下面这样的，其中stations[i]是个字符串变量

1	var re = /.*stations[i]/;

然而这样写的结果，得到的正则真的是就是原样的 /.*stations[i]/，stations[i]被当成了一个字符串处理了，而不是变量。

找到的解决办法是使用JavaScript风格的书写方式，如下：

1	var re = new RegExp(".*"+stations[i]);

OK~就是这么简单！

参考资料：

智能社JavaScript视频教程-32.JS中的正则表达式
 廖雪峰JavaScript教程-RegExp
W3School-JavaScript RegExp 对象