正则系列——JavaScript正则表达式基础语法巩固篇

浏览: 48 发布日期: 2017-09-17 分类: css3

上一章内容:正则表达式实战篇

知识回顾

前2章分别学习了正则表达式入门技巧,以及遇到正则需求该如何去分析问题,还有正则表达式实战的一些场景解释。

这一章内容偏向理论,推荐你点击开头的链接前往前2章节学习一下入门技巧,然后再看这一章内容,就不会那么迷茫了。我一向相信工程师要先学会做事,才能学懂理论,先学理论,再学做事的通常是纸上谈兵,一遇到实战就懵逼。

基础语法巩固

正则表达式引擎根据正则去匹配字符的时候,是通过检查索引的方式。

RegExp构造函数

JavaScript正则表达式有2种写法:比较常用的是第二种,第一种写法在一些replace替换时涉及到变量的时候,可能会用到,后面例子如果有这个需求,再说。

1、RegExp
下面其实是同一种写法,一个用 "正则",一个是用 /正则/,注意使用字符串写法的时候,特殊字符要进行转义。

var r = new RegExp("\\d+", 'g') //r.test('123') true
//或者是
var r = new RegExp(/\d+/, 'g')  //r.test('123') true

如果你没有转义特殊字符,那么正则就是错的,比如:

//我错了
var r = new RegExp("\d+", 'g') //r.test('123') false

2、/正则/
你还可以直接使用 /正则/ 的写法。

/\d+/g.test('123') // true

和RegExp有关的几个方法,compile()、exec()、test(),与之相对于的是search()、match()、replace()、split(),为了好记,我把她们叫做 “3妻4妾”。

3妻是RegExp的原配方法,4妾是字符串方法。

1、3妻
原配就是好,可以直接使用正则表达式调用它。

var r = /2/
r.compile(r) //重新编译正则,这个不太常用
r.exec('123') //获取正则匹配的字符所在的位置
r.test('123') //最受欢迎的妻子,判断字符串是否符合某个正则,true 或者 false

2、4妾
4妾不是RegExp的方法,而是字符串的方法。在控制台输入 ''.__proto__ ,就能看到字符串原型中的这4个方法,又因为她们都和正则有关,所以叫做RegExp的4个小妾。

var r = /2/
'123'.search(r) //返回匹配字符的位置,范围是0-n,如果不存在,则返回-1。
'123'.match(r) //返回数组,这个方法常用在提取字符串中的某些字符。
'123'.replace(r, '4') //最基本的用法是替换正则匹配到的字符串,还有一种高级用法,后面再讲。
'123'.split(r) //表示切割字符串,这里把2切割出来,'123'变成了["1", "3"].
//通常我们用它来切割字符串里面的空格或者回车符,然后再map渲染。
'1 2\n3'.split(/[\s\n]/g).map(v => v) //["1", "2", "3"].map()

修饰符

JavaScript中常用的修饰符有3种,i、g、m,g你可能经常看得到。

'Aasb'.match(/a/i) //i表示忽略大小写,匹配出来的是第一个A
'Aasb'.match(/a/ig) //想要匹配所有的a,就需要加上g全局搜索 ["A", "a"]
m: 多行匹配,具体用法不了解

元字符

“元”的含义是元始天尊,“元字符”是元始天尊制造的一个个基础符文,用这些基础符文可以组合出各种高级的正则表达式。

.:查找单个字符,除了换行和行结束符。
\w:查找字母和数字。
\d:查找数字。
\D:查找非数字字符。
\s:查找空白字符。
\S:查找非空白字符。
\b:匹配单词边界。
\B:匹配非单词边界。
\n:查找换行符。
\f:查找换页符。
\r:查找回车符。
\t:查找制表符。
\v:查找垂直制表符。

下面解释一下上面这些常用的元字符

查找单个字符,除了换行和行结束符。
换行符你可能知道,但是结束符是什么?在一个字符串最后,你肉眼看不到的地方,有一个结束符号,在101网站使用 /.*/ 测试一下就能看到了

'第一段\n第二段'.match(/./g) //["第", "一", "段", "第", "二", "段"]

//使用.+之后,匹配出来的效果就和split切割一样了。
'第一段\n第二段'.match(/.+/g) //["第一段", "第二段"]

查找字母和数字

'aA1'.match(/\w/g) // ["a", "A", "1"]
'aA1'.match(/\w+/g) // ["aA1"]

其他字符自己去101网站测试玩一下,很有趣的。

括号内的正则

我们经常看得到 []、()、{}这几种括号穿插在正则表达式中,让人眼花缭乱。但它的本质非常简单,很好理解。你需要注意 [^abc]中的 ^ 和写在/^abc$/的作用是不同的。

[abc]:查找方括号之间的任何字符。
[^abc]:查找任何不在方括号之间的字符。
[0-9]:查找任何从 0 至 9 的数字。
([0-9]|\d):查找任何指定的选项。
[0-9]{1}:查找一次数字。

看几个实例

实例1:

实例2:

实例3:

实例4:

量词

量词的意思是次数,前面我们已经使用到了一些量词符号,比如 +、 ?、 *、 {n, m}、 ^x$、最后还有零宽断言 ?=n、?!n

n+:匹配任何包含至少一个 n 的字符串。
n*:匹配任何包含零个或多个 n 的字符串。
n?:匹配任何包含零个或一个 n 的字符串。
n{X}:匹配包含 X 个 n 的序列的字符串。
n{X,}:X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。
n{X,Y}:X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次,至多 Y 次时匹配。
n{X,}:匹配包含至少 X 个 n 的序列的字符串。
n$:匹配任何结尾为 n 的字符串。
^n:匹配任何开头为 n 的字符串。
?=n:匹配任何其后紧接指定字符串 n 的字符串。
?!n:匹配任何其后没有紧接指定字符串 n 的字符串。

这一段内容没法用文字描述清楚,请自行在 https://regex101.com 测试吧,只有实践才能理解理论。当你练习的次数足够多了,之后,你会发现这些量词都不用刻意记住,凭着感觉就能随手写出来了。

总结

正则表达式理论知识点很多,这一章内容阅读起来像读天书,最重要的还是找到感觉,就像你第一次学习react、vue、angular的时候,完全找不到方向,慢慢的,写多了,突然有感觉了。正则还好,没有太多复杂的概念,就是符号多了点,常用的记住就行了。复杂的符号还是网上搜索吧,比如中文字符的正则,我真的记不住。。。

返回顶部