正则

正则表达式

概念

Regular Expression

正则表达式是用于匹配字符串中字符组合的模式（文本搜索/替换）

正则表达式是对象

这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。

可以简化字符串操作

// 举个例子, 提取字符串中的数字
let str = "abas3244sda5552"

// 使用 api
let nums = [...str].filter(a => !Number.isNaN(parseInt(a)))
console.log(nums.join(""))

// 使用 正则表达式
console.log(str.match(/\d/g).join(""))

创建一个正则表达式

// 1.使用双斜杠 /pattern/attributes
let re = /ab+c/

// 2.使用构造函数 new RegExp(pattern, attributes)
let re = new RegExp("ab+c")

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 “g”、”i” 和 “m”。

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red|blue|green)	查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NUL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

属性	描述	FF	IE
global	RegExp 对象是否具有标志 g。	1	4
ignoreCase	RegExp 对象是否具有标志 i。	1	4
lastIndex	一个整数，标示开始下一次匹配的字符位置。	1	4
multiline	RegExp 对象是否具有标志 m。	1	4
source	正则表达式的源文本。	1	4

RegExp 对象方法

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

支持正则表达式的 String 对象的方法

方法	描述	FF	IE
search	检索与正则表达式相匹配的值。	1	4
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。	1	4

几个正则例子

手机号匹配

/^1[34578]\d{9}$/g

^ 从字符串开头进行匹配

$ 从字符串末尾进行匹配

1 第一位为1

[34578] 第二位一般是 3/4/5/7/8

\d 表示所有数字

{9} 表示重复的次数（这里表示 9 个数字）

g 表示全局模式

qq 号匹配

/^[1-9][0-9]{4,9}$/g

{4,9} 表示重复次数的范围 （这里表示 4-9 个数字）

十六进制表示颜色

#4BD1CC 或 #0AB
/#?([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g

#? 表示 # 可有可无（开发时根据实际情况写）

(a|b) 表示两组（两种情况）

常见邮箱格式

可接受的字符有 英文字符 数字 _ - .

分成三组 12345678@qq.com
/^([A-Za-z0-9_\-\.]+)@([A-Za-z0-9_\-\.]+)\.([A-Za-z]{2,6})$/g

-在正则中表示范围，.表示除了换行符外的任意字符，所以都需要转义

理论上来说是需要控制长度的，这里就不限定字符数了（+表示 1个字符到无限个字符）

url

https://www.bilibili.com/danlaoshi/666/
/^((https?|ftp|file):\/\/)?([\da-z\.\-]+)\.)([a-z\.]{2,6})([\/\w\.\-]*)*\/?$/g

https? 就表示 http 或 https

我们输入网址时可能不会写上协议名称，因此分组并加上问号

+表示1到无穷大

*表示0到无穷大

html

<div class="lwj">lwj</div>
<div></div>
<img />

/^<([a-z]+)([^>]+)*(?:>(.*)<\/\1>|\s+\/>)$/gm

\1 表示引用前面括号包裹起来的第一个组

也就是说，这里 \1 表示 ([a-z]+)

\s 表示空格

?: 出现在括号的开头 表示不需要捕获该组

更多常用正则

https://juejin.cn/post/7119242343798013959

在线测试工具

https://c.runoob.com/front-end/854/

参考

https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

https://www.bilibili.com/video/BV1QK4y1K72U/?spm_id_from=333.788.recommend_more_video.1&vd_source=1616b746cefe2e7615c229563ba38eb4