极速通关常用正则
共 5140字,需浏览 11分钟
·
2021-11-27 08:55
焦传锴,微医前端技术部平台支撑组。不是吧阿sir,又要兼容IE?
起步
先推荐两个测试正则网站:
https://regex101.com/ https://jex.im/regulex/
正则表达式,大家都很熟悉,说白了就是一堆约定俗成的匹配规则,包含模式和可选的修饰符。创建一个正则表达式对象有两种语法。较长一点的语法:
regexp = new RegExp("pattern", "flags");
较短一点的语法,使用斜杠 "/":
regexp = /pattern/; // 没有修饰符
regexp = /pattern/gmi; // 伴随修饰符 g、m 和 i(后面会讲到)
斜杠 "/"
会告诉 JavaScript 我们正在创建一个正则表达式。它的作用类似于字符串的引号。new RegExp
可以动态传入参数创建正则。
本文的主要目的就是为了方便快速查找并理解需要的正则规则。
修饰符
i
代表不区分大小写g
全部匹配u
根据 Unicode 属性匹配,使用\p{...}/u
,详细属性查看
let regexp = /\p{sc=Han}/gu; // 用来匹配中文
let str = `Hello Привет 你好 123_456`;
alert( str.match(regexp) ); // 你,好
m
多行模式,每行都会一次匹配(^ 每行会匹配一次开头 $ 同理)
let str = `1st place: Winnie
2nd place: Piglet
33rd place: Eeyore`;
alert( str.match(/^\d+/gm) ); // 1, 2, 33
字符类
常用的字符类:
\d
数字\s
空格 space\w
单字符 word,包括字母数字下划线
可以组合,比如:
let str = "test ES 6 AA"
let reg = /e\w\s\d/i
str.match(reg) // ["ES 6", index: 6, input: "test ES 6 AA", groups: undefined]
每个字符类都有反向类,代表 非xx
\D
非数字\S
非空格\W
非单字符
let str = "+7(903)-123-45-67";
alert( str.replace(/\D/g, "") ); // 79031234567
.
匹配任意字符(换行符除外)"/ES./"
\b
查找目标“词”是否在边界,比如/\bjava\b/
可以匹配!java!
但是不能匹配javac
锚点 ^ $
^xx
表示以 xx 开头xx$
表示以 xx 结尾
二者结合可以用以完全匹配
const time = "12:02"
let reg = /^\d\d:\d\d$/
// .test 可以测试是否匹配
reg.test(time) // true
空字符串 ''
,可以用 /^$/
匹配
需转义字符
[ \ ^ $ . | ? * + ( )
集合与范围 [...]
[abc]
表示'a'、'b'、'c'
中的任意一个,也就是 或[a-z]、[1-5]
表示范围,[0-9A-F]
表示 0-9 或者 A-F,[\w-]
表示 字母 或 连字符-
[^abcd]
表示匹配 a、b、c、d 以外的 字符 ,这种写法用以 排除
或 |
a|b
相当于 [ab]
,我们可以这样使用:
gr(a|e)y
严格等同gr[ae]y
。gra|ey
匹配 “gra” or “ey”。
量词控制 * + ?
*
匹配 0~∞ 个/\d*/
任意个数字+
匹配 1~∞ 个?
匹配 0 or 1 个,相当于{0,1}
{n}
匹配 n 个,\d{3}
匹配三个连续数字,相当于\d\d\d
{2,5}
匹配2 - 5位的数字{3,}
匹配 >= 3 个位数字
贪婪模式与懒惰模式
看一个例子
let str = `"hi" some word "ok" aa`
let reg = /".+"/g
str.match(reg) //["hi" some word "ok"]
我们其实是想匹配出 ["hi","ok"]
,但是却匹配到了整句,这是因为 贪婪搜索 会先按顺序分别取匹配 " . +
当匹配 "
的时候,匹配到第一个引号,此时匹配字符串是"
当匹配 .
的时候,匹配字符串是"h
当匹配 +
的时候,字符串变为了"hi" some word "ok" aa
!因为后面所有的字符都符合.+
的规则,即不包含换行的任意字符此时匹配 "
,发现已经匹配多了,找不到"
,于是开始 回溯 ,知道回溯成为"hi" some word "ok"
这就是 贪婪模式 。
再看一个例子:
let str = `123 456`
let reg1 = /\d+ \d+?/
let reg2 = /\d+ \d+/
str.match(reg1) // 123 4
str.match(reg2) // 123 456
在量词之后加上 ?
,即 .? +? ??
等,会变为 懒惰模式 ,他不会一次性完全匹配,而是在匹配到满足条件的第一位时就停止匹配。
捕获组 (...)
组
举个例子:
let str = "gogogoaa"
let reg = /(go)+/
str.match(reg) // gogogo
很好理解,就是将多个字符算成一个整体进行匹配
接下来看几个例子
域名匹配
/([\w-]+\.)+\w+/g
可以匹配的格式
aaa.aaa.aa
aa-aa.aaa.aa
email
/[-.\w]+@([\w-]+\.)+[\w-]+/g
(xx)
被称为 组(group) 的概念,括号内的内容不仅匹配时被作为一个整体,并且组内匹配的对象会被返回:
let str = 'Hello, world!
';
let tag = str.match(/<(.*?)>/);
alert( tag[0] ); //
alert( tag[1] ); // h1
嵌套组
返回的结果数组, [0]
的位置是正常全匹配返回的值,而 [1]
的位置是括号内匹配到到的值。我们可以用这个方法做 嵌套组 :
let str = ``
let arr = str.match(/<((\w+)\s(\w+))>/)
console.log(arr[0]) //
console.log(arr[1]) //group1 group2
console.log(arr[2]) //group1
console.log(arr[3]) //group2
let match = 'ac'.match(/a(z)?(c)?/)
alert( match.length ); // 3
alert( match[0] ); // ac(完全匹配)
alert( match[1] ); // undefined,因为 (z)? 没匹配项
alert( match[2] ); // c
matchAll 配合 g 修饰符
上述都是在没有 g
标签时匹配的单个对象返回的数组,那么如果有 g
会返回多个对象的话,可以用 matchAll
来匹配:
let str = ` `
let arr = Array.from(str.matchAll(/<(group\d)>/g))
arr[0][0] //
arr[0][1] // group1
arr[1][0] //
arr[1][1] // group2
注意, matchAll
返回的不是数组,而是一个可迭代的对象。
命名组 ?
把上面的例子稍微修改
let str = ``
let arr = str.match(/<(?(?\w+)\s(?\w+))>/ )
let groups = arr.groups
console.log(arr[0]) //
console.log(groups.g0) //group1 group2
console.log(groups.g1) //group1
console.log(groups.g2) //group2
我们可以通过 在括号后立即加上 ?
的方式设置 group 名,通过返回数组的 groups
属性获取一个 group 对象
替换捕获组
方法 str.replace(regexp, replacement)
用 replacement
替换 str
中匹配 regexp
的所有捕获组。这使用 $n
来完成,其中 n
是组号。例如,
let str = "John Bull";
let regexp = /(\w+) (\w+)/;
alert( str.replace(regexp, '$2, $1') ); // Bull, John
对于命名括号,引用为 $
。例如,让我们将日期格式从 “year-month-day” 更改为 “day.month.year”:
let regexp = /(?[0-9]{4})-(?[0-9]{2})-(?[0-9]{2})/g ;
let str = "2019-10-30, 2020-01-01";
alert( str.replace(regexp, '$.$.$' ) );
// 30.10.2019, 01.01.2020
反向引用
我们需要找到带引号的字符串:单引号 '...'
或双引号 "..."
– 应匹配两种变体。然后我们有一句话 "She's the one!"
,这时候如果我们用 /['"](.*?)['"]/g
,则会匹配到 "She'
,显然不对
那么问题在于,我们怎么让正则记住我们某一个分组中捕获的内容 这时候可以使用 反向引用
let str = `He said: "She's the one!".`;
let regexp = /(['"])(.*?)\1/g;
alert( str.match(regexp) ); // "She's the one!"
这里的 \1
会找到第一个 group ,也就是 (['"])
匹配到的内容,也就是 "
,然后这个正则就相当于变成了 /(['"])(.*?)"/g
我们还可以用 \k
的方式去引用:
let str = `He said: "She's the one!".`;
let regexp = /(?['"])(.*?)\k/g ;
alert( str.match(regexp) ); // "She's the one!"
断言
前瞻断言
用法:
x(?=y)
仅当 x 后面是 y 的时候匹配
let str = "1 turkey costs 30€";
alert( str.match(/\d+(?=€)/) ); // 30 (正确地跳过了单个的数字 1)
x(?!y)
仅当 x 后面不是 y 的时候匹配
后瞻断言
(?<=y)x
, 匹配x
, 仅在前面是y
的情况。(?, 匹配
x
, 仅在前面不是y
的情况。
断言仅仅是作为占位,不会匹配字符,比如
/q(?=u)i/
匹配'quit'
是会失败的,因为/q(?=u)/
只能匹配到q
而不是qu
捕获组
如果我们想要捕捉整个环视表达式或其中的一部分,那也是有可能的。只需要将其包裹在另加的括号中。例如,这里货币符号 (€|kr)
和金额一起被捕获了:
let str = "1 turkey costs 30€";
let reg = /\d+(?=(€|kr))/; // €|kr 两边有额外的括号
alert( str.match(reg) ); // 30, €
字符串和正则方法
str.match(regexp)
方法在字符串str
中找到匹配egexp
的字符。str.matchAll(regexp)
它主要用来搜索所有组的所有匹配项str.split(regexp|substr, limit)
使用正则表达式(或子字符串)作为分隔符来分割字符串。str.search(regexp)
返回第一个匹配项的位置,如果未找到,则返回-1
str.replace(str|regexp, str|func)
用于搜索和替换的通用方法regexp.exec(str)
方法返回字符串str
中的regexp
匹配项。regexp.test(str)
查找匹配项,然后返回true/false
表示是否存在。
参考
The Modern JavaScript Tutorial