源墨
V1
2023/05/04阅读:10主题:萌绿
前端需要掌握的正则
是否每次需要正则的时候你都是谷歌百度一下,拿来主义?
每次想好好学正则总是记不住正则的字符意义?
你能写出这些简单的正则表达式么?
-
十进制整数正则 -
十进制的整数和小数正则 -
手机号正则 -
邮箱正则
如果你可以写出来,那说明你已经掌握了正则表达式的用法,不用往下看了~
先来扫一眼定义和各种字符含义,不想看的可以直接拉到最下面看怎么写以上几个正则表达式!
正则表达式的定义
-
正则表达式(regular expression)是一个描述字符模式的对象。JavaScript的RegExp类表示正则表达式,String和RegExp都定义了方法,RegExp使用正则表达式进行强大的模式匹配和文本检索与替换功能。 -
JavaSeript中的正则表达式 用RegExp对象表示,可以使用RegEXP()构造函数来创建RegExp对象,不过RegExp对象更多的是通过一种特殊的直接量语法来创建,就像通过引号包裹字符的方式来定义字符串直接量一样,正则表达式直接量定义为包含在一对斜杠(/)之间的字符,例如:
var pattern = /s$/;
-
运行这段代码创建一个新的RegExp对象,并将它赋值给变量pattern。这个特殊的RegExp对象用来匹配所有以字母 “s”结尾的字符申。用构造函数RegExp()也可以定义个与之等价的正则表达式,代码如下:
var pattern = new RegExp("s$");
正则的特殊符号
( [ { \ ^ $ | ) ] } ? = ! : * + . /
这些特殊符号的含义你能一眼看出来么?
正则的字符类
字符 | 匹配解释 | 例子 |
---|---|---|
[...] | 方括号内的任意字符 | /[ab]/ 表示和字母a,b中任意一个都匹配 |
[^...] | 不在方括号内的任意字符 | /[^ab]/ 表示除了字母a,b之外的所有字符 |
. | 除换行符和其他Unicode行终止符之外的任意字符 | - |
\w | 任何ASCII字符组成的单词 | 等价于[a-zA-Z0-9] |
\W | 任何不是ASCII字符组成的单词 | 等价于[^a-zA-Z0-9] |
\s | 任何Unicode空白符 | - |
\S | 任何非Unicode空白符的字符,注意\w和\S不同 | - |
\d | 任何ASCII数字 | 等价于[0-9] |
\D | 任何ASCII数字之外的任何字符 | 等价于[^0-9] |
[\b] | 退格直接量(特例) | - |
ASCII和Unicode
-
ASCII(American Standard Code for Information Interchange) 美国信息交换标准代码是基于拉丁字母的一套电脑编码系统,主要用于显示现代英语和其他西欧语言。它是最通用的信息交换标准,并等同于国际标准 ISO/IEC 646。ASCII第一次以规范标准的类型发表是在1967年,最后一次更新则是在1986年,到目前为止共定义了128个 (0~127) 字符
-
Unicode(统一码),也叫万国码、单一码,由统一码联盟开发,是计算机科学领域里的一项业界标准,包括字符集、编码方案等。
-
Unicode包含ASCII码
正则的重复字符语法
字符 | 匹配解释 | 例子 |
---|---|---|
{n,m} | 匹配前一项至少n次,但不能超过m次 {n,} | {1,3}表示匹配1~3次 |
{n,} | 匹配前一项n次或者更多次 | {1,}表示匹配至少1次 |
{n} | 匹配前一项n次 | {1}表示匹配1次 |
? | 匹配前一项0次或 者1次,也就是说前一项是可选的 | 等价于{0,1} |
+ | 匹配前一项1次或多次 | 等价于{1,} |
* | 匹配前一项0次或多次 | 等价于{0,} |
正则的选择、分组和引用字符
字符 | 匹配解释 | 例子 |
---|---|---|
| | 匹配的是该符号左边的子表达式或右边的子表达式 | /ab|cd/表示匹配字符串"ab"或者字符串"cd" |
(……) | 组合,將几个项组合为一个单元,这个单元可通过 "*"、"+" 、"?"和"|"等符号加以修饰,而且可以记住和这个组合相匹配的字符串以供此后的引用使用 | /hello(world)?/表示可以匹配字符串"hello", 其后的"world"可有可无。 |
\n | 和第n个分组第一次匹配的字符相匹配,组是圆括号中的子表达式(也有可能是嵌套的),组索引是从左到右的左括号数, "(?:" 形式的分组不编码 | /(['"])[^'"]*\1/表示匹配位于单引号双引号之内的0个或多个字符;\1表示匹配第一个带圆括号的子表达式所匹配的模式 |
(?:……) | 只组合,把项组合到一个单元,但不记忆与该组相匹配的字符 | /([Hh]ello(?:java)?)(script)/ 从左到右数总共3个左括号,但是出现(?:所以总共三个分组,索引编码却只有2个,\2引用的是(script)匹配的字符 |
锚字符
字符 | 匹配解释 | 例子 |
---|---|---|
^ | 匹配字符串的开头,在多行检索中,匹配一行的开头 | /^hello/表示匹配以hello开头的字符串 |
$ | 匹配字符串的结尾,在多行检索中,匹配一行的结尾 | /hello$/表示匹配以hello结尾的字符串 |
\b | 一个单词的边界,简言之,就是位于字符(\w和 \W之间的位置,或位于字符 \w 和字符串的开头或者结尾之间的位置 (但需要注意,[\b]匹配的是退格符) | - |
\B | 匹配非单词边界的位置 | - |
(?=p) | 零宽正向先行断言,要求接下来的字符都与p匹配,但不能包括匹配p的那些字符 | /hello(?=:)/ 可以匹配"hello: world"中的hello,不能匹配"hello coder"中的hello,因为它后面没有冒号 |
(?!p) | 零宽负向先行断言,要求接下来的字符不与p匹配 | 等价于[^p] |
匹配模式的标记
字符 | 匹配解释 | 例子 |
---|---|---|
g | 全局模式,表示查找字符串的全部内容,而不是找到第一个匹配的内容就结束。 | /a/g 匹配字符串中的所有"a" |
i | 不区分大小写,表示在查找匹配时忽略 pattern 和字符串的大小写。 | /[bc]at/i 匹配第一个"bat"或"cat",忽略大小写 |
m | 多行模式,表示查找到一行文本末尾时会继续查找。 | - |
y | 粘附模式,表示只查找从 lastIndex 开始及之后的字符串。 | - |
u | Unicode 模式,启用 Unicode 匹配。 | - |
s | dotAll 模式,表示元字符.匹配任何字符(包括\n 或\r) | - |
以上字符含义记住了么?
以上各种字符含义扫一眼也许你还是记不住,没关系!
我也记不住┓( ´∀` )┏
让我们康康开头那几个正则怎么写!
正文开启(^▽^)
十进制整数正则
思考十进制整数有哪些?
-
十进制是由0~9组成的,正则里是不是用[0~9]或者\d表示 -
整数是不是包含正数、负数和零 -
整数的个数没有限制
有没有思路?先思考再看下面的步骤
就用最简单的几个字符来写{}、[],^,$
-
正整数的正则是不是不能以0开头 所以只能1~9开头,结尾可以0~9,而且是可以0~无穷个,所以:
/^[1-9][0-9]{0,}$/
-
负整数的正则其实跟正整数一样只是多了一个"-"号而已,所以在正整数基础上加一个"-"号:
/^-[1-9][0-9]{0,}$/
-
正整数与负整数可以合并起来,"-"号是0个或1个,用?或者{0,1}表示
/^-{0,1}[1-9][0-9]{0,}$/
-
十进制整数还包括0,所以最终十进制整数的正则如下:
/^-{0,1}[1-9][0-9]{0,}|0$/
或
/^-?[1-9]\d*|0$/
十进制的整数和小数正则
思考十进制整数和小数有哪些?
-
整数"2", -
小数点在后面"2." -
小数点在中间"2.2" -
小数点在前面".2"
根据以上例子可以一步一步的实现
也是用简单的几个字符{}、[],^,$来写
-
整数"2"直接引用上一个题目的结果
const reg1 = /^-{0,1}[1-9][0-9]{0,}|0$/
-
小数点在后面"2.",也就是整数+".","."在正则表达式里需要转义"\."
const reg2 = /^-{0,1}[1-9][0-9]{0,}|0\.$/
-
小数点在中间"2.2"
const reg3 = /^-{0,1}[1-9][0-9]{0,}|0\.[0-9]{1,}$/
-
小数点在前面".2"
const reg4 = /^-{0,1}\.[0-9]{0,}$/
-
reg1reg2合并,"."是可有可无,所以加个"\.{0,1}""
const reg12 = /^(-{0,1}[1-9][0-9]{0,}|0)\.{0,1}$/
-
reg2reg3合并,小数点后面的数字是可有可无
const reg23 = /^(-{0,1}[1-9][0-9]{0,}|0)\.[0-9]{0,}$/
-
reg1reg2reg3合并,小数点和后面的数字总体是可有可无
const reg123 = /^(-{0,1}[1-9][0-9]{0,}|0)(\.[0-9]{1,}){0,1}$/
-
reg1reg2reg3reg4合并,是reg123分组或reg4就行
const reg1234 = /^(-{0,1}[1-9][0-9]{0,}|0)(\.[0-9]{1,}){0,1}|(-{0,1}\.[0-9]{0,})$/
是不是分解步骤后一点都不难了
最后
手机号正则和邮箱正则就留给你来思考怎么写,你能写出来么?
欢迎留言
关注我不迷路

作者介绍
源墨
V1