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

史上最全面的正则表达式系列学习笔记(基础篇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中正则表达式基础篇的相关内容。敬请期待！若是你有什么好的建议欢迎留言给咱们。