史上最全面的正则表达式系列学习笔记(基础篇1)

hellow大家好，在上期的正则火星文的课程中，我们着重向大家介绍了正则表达式的一些基础常识和概念。了解了RegExp对象的构造方法和以及基本属性和方法。但是对于正则表达式的规则只是简单的提及了修饰符(g/i/m)的基本含义。

本期我们将开始细致的向大家介绍正则表达式的基本规则。

匹配规则

首先我们应该了解，正则表达式是由两种基本字符串组成：原义文本字符和元字符。

原义文本字符(literal characters)

也被称作字面量字符，简单的理解就是正则表达式的一个字符对应字符串的一个字符，比如说下面这个例子 /hellow/表示的就是匹配字符串中hellow的文本。

元字符(metacharacters)

具有特殊含义的字符，不代表本身字面意思。

比如我们经常见到的这些转义字符

字符	描述
\n	匹配换行键
\r	匹配回车键
\t	匹配制表符 tab（U+0009）
\v	匹配垂直制表符（U+000B）
\f	匹配换页符（U+000C）
\0	匹配null字符（U+0000）
[\b]	匹配退格键(U+0008)，不要与\b混淆。
\cX	匹配Ctrl-[X]，其中的X是A-Z之中任一个英文字母，用来匹配控制字符
\xhh	匹配一个以两位十六进制数（\x00-\xFF）表示的字符
\uhhhh	匹配一个以四位十六进制数（\u0000-\uFFFF）表示的 Unicode 字符

除此之外正则表达式还有以下这些有特殊意义的字符 * + ? & ^ . | \ () [] {}

接下来我们一一为大家讲解

字符类 []

之前我们有学习了最基本的原义字符匹配，比如

var str = 'hellow123'.replace(/1/g,'!')
console.log(str) //hellow!23

如果我们想把123都换成!,显然直接写/123/g是不行的。

[]就是做这个用的，字符类（class）表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。 上面的例子就可以写成：

var str = 'hellow123'.replace(/[123]/g,'!')
console.log(str) //hellow!!!

来看一下过程图解

字符类取反 ^

还是上面的例子，我们给写长一点hellow1234567890,如果想把除了123之外的所有字符都变成!该怎么办呢，当然我们可以运用上面的方法把所有要变的都列出来，但是太长了。

^就是做这个用的,字符类取反(脱字符):如果方括号内的第一个字符是[^]，则表示除了字符类之中的字符，其他字符都可以匹配。

上面可以写成

var str = 'hellow1234567890'.replace(/[^123]/g,'!')
console.log(str)//!!!!!!123!!!!!!!

来看一下过程图解

范围类 -

假设我们现在有这样一个需求要把hellow1234567890所有的数字变成!，该怎么办呢?当然可以写成[1234567890],那要是所有字母呢，岂不是要把所有字母列一遍？

-就是做这个用的,某些情况下，对于连续序列的字符，-用来提供简写形式，表示字符的连续范围。比如，[abc]可以写成[a-c]，[0123456789]可以写成[0-9]，同理[A-Z]表示26个大写字母。

上面可以写成

var str = 'hellow1234567890'.replace(/[0-9]/g,'!')
console.log(str)//hellow!!!!!!!!!!

来看一下过程图解

举几个例子

正则	描述
[a-zA-Z]	匹配所有字母包含大小写
[0,3]	匹配数字0，1，2，3
[\u0128-\uFFFF]	匹配unicode
[1-59]	不代表1到59，只代表1到5
[0-9-]	匹配区间0-9和-
[A-z]	注意ASCII编码之中，大写字母与小写字母之间还有其他字符

预定义类 \

通常在我们的日常用语中描述一类东西，并不会把他里面的每一项都列举出来，而是给以统称，这样比较方便。比如我们会说，我想把这个字符串中的所有数字换成感叹号，而不会去说我想把这个字符串中的0到9换成感叹号。

\就是做这个用的,预定义类：正则表达式给我们预定义了一些简写的方式

正则	描述	等价	记忆方式
\d	数字字符	[0-9]	digit
\D	非数字字符	[^0-9]
\s	空白符	[\t\n\x0B\f\r]	space
\S	非空白符	[^\t\n\x0B\f\r]
\w	单词字符（字母、数字、下划线）	[a-zA-Z_0-9]	word
\W	非单词字符	[^a-zA-Z_0-9]
.	除了回车符、换行符、字符行分隔符、段分隔符以外的所有字符	[^\n\r\u2028\u2029]	……

使用一下

var str = 'hellow-1234567890'.replace(/\d/g,'!')
console.log(str)//hellow-!!!!!!!!!!

如果要匹配任意字符怎么办?可以使用 [\d\D]、[\w\W]、[\s\S] 和 [^] 中任何的一个。

来看一下过程图解(匹配所有)

位置边界^ $ \b \B

回归到现实的需求，我们已经只加上修饰符g就会进行全局匹配，不加只会匹配第一个，那么我们要想匹配特定位置规则的字符该这怎么办呢？比如这个@qq@163@foxmail，我们想知道这个字符串是不是以@开始的。

正则表达式也给我们提供了基于位置的匹配规则

正则	描述
^	以xx开头
$	以xx结尾
\b	单词边界，指[a-zA-Z_0-9]之外的字符
\B	非单词边界

写一下

var str = /^@/g.test('@qq@163@foxmail')
console.log(str)//true

var str = /@$/g.test('@qq@163@foxmail')
console.log(str)//false

var str = 'hellow word12-3545'.replace(/\b/gm,'!')
console.log(str)//!hellow! !word12!-!3545!

var str = 'hellow word12-3545'.replace(/\B/gm,'!')
console.log(str)//h!e!l!l!o!w w!o!r!d!1!2-3!5!4!5

来看一下图解(单词边界)

这里我们再提一下和修饰符m的搭配使用

var s =  `@qq
@163
@foxmail`;
var str = s.replace(/^@/g,'!')
console.log(str)
//!qq
@163
@foxmail


var str1 = s.replace(/^@/gm,'!')
console.log(str1)
//!qq
!163
!foxmail

今天的正则火星文基础篇先讲到这里， 给大家留个作业，试着用已经掌握的知识，解决下面的问题

• 只能输入字母数字下划线
• 不能输入特殊字符
• 校验订单金额是否是数字(包含小数 )
• 校验手机号码是否符合规则

在下一期中会给大家继续介绍JavaScript中正则表达式基础篇的相关内容。敬请期待！如果你有什么好的建议欢迎留言给我们。