JavaScript中的正则表达式
最近一直用到正则表达式,今天跟着教程系统学习了一下,整理笔记如下:
1.字符串操作函数
- search
- substring
- charAt
- split
1.1 search
1 | var str='abcdef'; |
1 | var str='abcdef'; |
1.2 substring
1 | var str='abcdef'; |
1 | var str='abcdef'; |
1.3 charAt
1 | var str='abcdef'; |
1.4 split
1 | var str='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),不是在发现第一个匹配项时立即停止
1 | var str = 'abc 853 isaf98024 sfk'; |
2.3 元字符介绍
\d :匹配数字
1 | var str = 'abc 853 isaf98024 sfk9we 98'; |
\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,}
1 | var str = 'abc 853 isaf98024 sfk'; |
n? :n出现一次或者不出现,等价于{0,1}1
2//电话号码中以0开头的3-4位区号可有可无,和后面非0开头的8位电话号,用-连接
var re = /(0\d{2,3}-)?[1-9]\d{7}/;
n* :等价于{0,},不推荐使用
1 | var str = 'abc 853 isaf98024 sfk'; |
^n :匹配开头为n的字符串
n$ :匹配结尾为n的字符串
3.和正则表达式搭配的函数
- match
- replace
- test
3.1 match
返回指定的值,而非字符串的位置
1
2
3var str = 'abc 853 isaf98024 sfk';
var re = /\d/;
alert(str.match(re));//8
3.2 replace
1 | var str = 'abc abc abc'; |
4.实例
- 邮箱校验
- 去除一段文字中的html标签
4.1 邮箱校验
邮箱的拼写规则:英文/数字/下划线 @ 英文/数字 . 英文
邮箱的正则表达式:/ \w+ @ [a-z0-9]+ \. [a-z]+ / i
1 | var re = /\w+@[a-z0-9]+\.[a-z]+/i; |
注意到第二次校验的邮箱并不符合格式要求,但是结果仍然返回true。这是因为test函数,只要string中有正则表达式满足的部分即会返回true。
对正则表达式限制首部和尾部,可以避免这一问题,此时只有string从第一个字符到最后一个字符完全匹配成功,才会返回true,修改后的正则表达式如下:
1 | var re = /^\w+@[a-z0-9]+\.[a-z]+$/i; |
4.2 去除一段文字中的html标签
如下一段文字中,多次出现html标签,在这个例子中,我们用正则表达式匹配每个标签,方便进一步对标签做删除操作。
<p> 正是盛夏时节,不比初春时的一片新绿,知道好日子才开始,所以明亮快活,眼前的绿是沉甸甸的,许是因为知道绚烂已到了顶,以后的日子只有每况愈下。一如我此时的心情。<br><br> 十天前,我换灯泡时从梯子上摔下来,醒时已经是在这具身体前主人的床上了。据丫鬟说,我是从阁楼的楼梯上摔了下来,然后昏迷了一天一夜。<br> <br>
取出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 对象