本文转载自微信公众号「微医大前端技术」，聊聊作者焦传锴  。极速转载本文请联系微医大前端技术公众号。通关

起步

先推荐两个测试正则网站：

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 查找目标“词”是否在边界，IT技术网比如 /\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"] ，但是却匹配到了整句，这是因为 贪婪搜索 会先按顺序分别取匹配 " . +

当匹配 " 的时候，匹配到第一个引号，此时匹配字符串是 " 当匹配 . 的云南idc服务商时候，匹配字符串是 "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 = <h1>Hello, world!</h1>; let tag = str.match(/<(.*?)>/); alert( tag[0] ); // <h1> alert( tag[1] ); // h1 

嵌套组

返回的结果数组， [0] 的源码下载位置是正常全匹配返回的值，而 [1] 的位置是括号内匹配到到的值。我们可以用这个方法做 嵌套组 ：

let str = `<group1 group2>` let arr = str.match(/<((\w+)\s(\w+))>/) console.log(arr[0]) //<group1 group2> 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 = `<group1> <group2>` let arr = Array.from(str.matchAll(/<(group\d)>/g)) arr[0][0] // <group1> arr[0][1] // group1 arr[1][0] // <group2> arr[1][1] // group2 

注意， matchAll 返回的不是数组，而是一个可迭代的对象。

命名组 ?<name>

把上面的例子稍微修改

let str = `<group1 group2>` let arr = str.match(/<(?<g0>(?<g1>\w+)\s(?<g2>\w+))>/) let groups = arr.groups console.log(arr[0]) //<group1 group2> 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 

反向引用

我们需要找到带引号的字符串：单引号 ... 或双引号 "..."– 应匹配两种变体。然后我们有一句话 "Shes the one!" ，这时候如果我们用 /["](.*?)["]/g ，则会匹配到 "She ，显然不对

那么问题在于，我们怎么让正则记住我们某一个分组中捕获的内容 这时候可以使用 反向引用

let str = `He said: "Shes the one!".`; let regexp = /(["])(.*?)\1/g; alert( str.match(regexp) ); // "Shes the one!" 

这里的 \1 会找到第一个 group ，也就是 (["]) 匹配到的内容，也就是 " ，然后这个正则就相当于变成了 /(["])(.*?)"/g

我们还可以用 \k 的方式去引用：

let str = `He said: "Shes the one!".`; let regexp = /(?["])(.*?)\k/g; alert( str.match(regexp) ); // "Shes 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 的情况。 (?<!y)x, 匹配 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

别忘记对我素质三连，点赞、关注、评论^_^

前往微医互联网医院在线诊疗平台，快速问诊，3分钟为你找到三甲医生。(https://wy.guahao.com/?channel=influence)

(责任编辑：数据库)