源墨

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