关于正则表达式:正则表达式那些事基础篇

基本概念

正则表达式中的元素由字符和元字符组成。字符又叫做一般字符即一般的计算机编码，如咱们罕用的英文字符、数字、中文等等；元字符又被称为特殊字符即在正则表达式中存在非凡意义的字符，如\、*、$等等，详情可见MDN 文档。

精准匹配

正则表达式与指标字符一对一匹配。波及：\

当咱们想匹配a字符，正则表达式能够间接写成/a/。然而匹配的是元字符时，如$，间接写成/$/是无奈匹配到胜利的，因为$在正则中存在非凡意义，此时咱们须要应用\对元字符进行本义，即打消元字符的非凡意义，要想匹配$可写成/\$/。个别一般字符在\的润饰下也会领有非凡含意，如\n（换行）、\r（回车）等等。

✒ 小结：匹配一般字符：/一般字符/；匹配元字符：/\元字符/；匹配特定字符：/\个别一般字符/。

多字匹配

正则表达式之所以弱小，就是其能进行含糊匹配。应用汇合、区间和通配符的形式实现一对多的匹配，实现字符含糊。波及：[]、-、通配符

汇合

如果咱们想同时匹配 1 到 9 之间全副的奇数，如果应用精准匹配必定无奈满足以后的要求，此时咱们能够应用用汇合的形式来解决，应用[]元字符将须要匹配的字符全副列举进去，这时的正则能够写成/[13579]/；

/[13579]/.test("1"); // true/[13579]/.test("2"); // false

区间

当咱们想要同时匹配大于 4 的数字时，应用汇合的形式能够写成/[56789]/，看着其实还好，然而如果要求同时匹配全副小写字母呢，全副列举进去必定是不迷信的，这时咱们须要想到区间的写法。当咱们想要同时匹配一段间断的数字、字母或者中文时咱们能够应用区间的写法，上述问题能够写成/[5-9]/。

• /[a-z]/：同时匹配所有小写字母；
• /[\u4e00-\u9fa5]/：同时匹配全副汉字；

/[\u4e00-\u9fa5]/.test("我"); // true/[\u4e00-\u9fa5]/.test("I"); // false

通配符

在开发中时常会遇到仅容许用户输出数字的场景，用区间形式可写成/[0-9]/，然而区间的写法相对来说还是比拟低效，所以正则提供更简便的写法：通配符写法，应用\d通配符即可同时匹配 0 至 9 的数字，所以懈怠才是人类文明提高的真正能源呀；

/\d/.test("1"); // true/\d/.test("壹"); // false

汇合、区间和通配符并不是水火不容的，当他们同时存在时会取它们的并集，现想同时匹配全副数字、全副小写字母以及_，可间接写成/[\da-z_]/

/[\da-z_]/.test("a"); // true/[\da-z_]/.test("A"); // false

✒ 小结：汇合写法：/[列举字符]/；区间写法：/[开始-完结]/；通配符写法：/通配符/。

次数限定

依据多字匹配一节咱们写成的正则能够匹配某一类字符，然而匹配的长度仍然是固定的，本节就来讲讲设置字符反复的次数，实现长度含糊。波及：?、{}、*、+

?元字符

咱们常见的传输协定有两种：http 和 https，如果咱们现想写一个同时匹配这两种协定的正则该如何写呢？剖析一下需要：http 后有没有 s 都能匹配胜利，这时咱们能够应用?这一元字符润饰s，示意s可匹配 0 次或者 1 次。正则能够写成/https?/。

/https?/.test("http"); // true/https?/.test("https"); // true

{}元字符

再原来的根底上又出了一种协定：httpss，这时要同时匹配这三种协定应该如何写呢？此时需要是：http 前面有 0 至 2 个 s 都能匹配胜利，用后面说的?元字符能够写成/https?s?/，然而这样的写法显然很简短，这次时咱们能够用到{}这个元字符，就下面问题正则能够写成/https{0,2}/，{}有四种写法：

• {count}：count 次；
• {min,max}：min 次到 max 次；
• {min,}：至多 min 次；
• {0,max}：至少 max 次。

/https{1}/.test("http"); // false/https{1}/.test("https"); // true

*元字符

如果当前每更新一次协定都是往后增加一个 s，如果要兼容当前可能呈现的每一个协定又该如何写呢？此时的需要变成了：http 前面不论呈现几个 s 都能匹配胜利，此时咱们能够应用*这个元字符，正则可写为：/https*/，*润饰的字符呈现 0 次或者屡次都能匹配胜利。当然正则也写成/https{0,}/；

/https*/.test("http"); // true/https*/.test("https"); // true

+元字符

在微信小程序为了平安思考公布上线的小程序拜访的接口必须为 https 协定，如果 httpss 等多 s 协定小程序都认为是平安的，这时想过滤出全副平安协定的正则又如何写呢？此时就能够应用+这个元字符了，正则可写为：/https+/，+润饰的字符呈现 1 次以上都能匹配胜利，当然这时的正则能够写成/https{1,};

/https+/.test("http"); // false/https+/.test("https"); // true

✒ 小结：?：匹配 0 至 1 次；{}：匹配指定次数或者指定区间；*：匹配大于等于 0 次；+：匹配大于等于 1 次。

边界限度

用于限度查问过程中的单词边界限度以及句子边界限度。波及：\b、\B、$、^

单词边界\b

当初有 day 和 today 2 个单词，如果咱们只想匹配 day ，如果正则写成/day/，测试后会发现 2 个单词都能匹配上，因为/day/无奈限度单词的边界，如果想限度单词边界就须要应用\b。当一个区域的前后地位有且仅有一个\w([0-9a-zA-Z_])时该区域就存在单词边界，如下面的例子能够写成/\bday\b/；

"It's a nice day today".replace(/\b/g, "\b");// 控制台打印：\bIt\b'\bs\b \ba\b \bnice\b \bday\b \btoday\b 每个\b就是一个单词边界

非单词边界\B

还是下面 2 个词，如果当初咱们想匹配以 day 结尾的单词呢？此时的需要变成了：day 结尾，匹配 today，然而不匹配 day，这时咱们能够用到非单词边界\B，单词边界以外的区域均为非单词边界，即一个区域内前后地位都为\w或者前后地位都不存在\w。上述例子能够写成/\Bday\b/，当然正则也能够写成/\w+day\b/。

"It's a nice day today".replace(/\B/g, "_");// 控制台打印：I_t's a n_i_c_e d_a_y t_o_d_a_y 每个_就是一个非单词边界

字符串边界^与$

在开发过程中咱们时常须要判断一个域名是否是以 https 结尾 com 结尾的域名，当初有一个域名https://com.hellochange.cn，咱们想判断它是否合乎正则应该如何写？如果仅用后面提到的常识无奈解决以后问题，因为咱们无奈限度 https 和 com 所在的地位，要解决这个问题咱们须要引入两个元字符：^和$，^：匹配的句子以什么结尾、$：匹配的句子应该以什么结尾，此时正则能够写成/^https.+com$/。

/https.+com/.test("https://com.hellochange.cn"); // true/^https.+com$/.test("https://com.hellochange.cn"); // false

✒ 小结：\b：单词边界；\B：非单词边界；^：内容以什么结尾；$：内容以什么结尾。

修饰符

修饰符也叫标记，用于指定额定的匹配策略。波及：m、g、i、s

// 等价于：https://hellochange.cn\nhttps://baidu.com\nHTTPS://qq.com\nhttps://weibo.com\nhttp://taobao.comhttps://com.a.cnhttps://b.comHTTPS://c.comhttps://d.comhttp://e.com

如上多行地址，咱们当初想匹配找出其中一个以 https 结尾 com 结尾的域名，正则又该如何写呢？如果依然写成/^https.+com$/测试后会发现无奈匹配到内容，因为它看上去是多个句子，然而正则仍把他当成一个句子来解决，如果咱们想把它当成多个句子进行解决，这时就须要用到修饰符的性能了。罕用的修饰符有四个：m、g、i、s，上面一一介绍其用法。

• m：多行匹配（multiple），以回车符和换行符做为句子宰割点。由此可知上题正则能够写成：/^https.+com$/m。
• g：全局匹配（global），查找所有匹配而非在找到第一个匹配后进行，如上题如果写成/^https.+com$/m，正则最终只会匹配https://b.com，当初咱们想要匹配全部内容正则就能够写成/^https.+com$/mg。
• i：疏忽大小写（ignore），正则匹配默认是辨别大小写的，然而有时咱们并不需要在意后果的大小写。如上题如果写成/^https.+com$/mg，最终HTTPS://c.com不会被匹配到，如果想要到HTTPS://c.com正则就须要写成/^https.+com$/mg。
• s：.元字符可匹配回车符\r和换行符\n。如果正则写成/^https.+com$/是无奈匹配到内容的，因为.元字符无奈匹配回车符和换行符，此时正则改写成/^https.+com$/s就能够匹配到整行句子（等价于的前面那一串）。

逻辑关系

正则中可用的逻辑关系，即「或|」和「非^」。波及：|、^

逻辑或

当初有一个用于输出用户性别的输入框，如何用正则限度用户输出？需要剖析：判断输出内容是否是“男”字或者是一个“女”字。字数限度能够应用字符串边界^和$，”或者“就能够用到正则中的逻辑“或”元字符，正则能够写成/^男$|^女$/，当然也能够写成/^[男女]$/，也能够用下一节会提的分组写法：/^(男|女)$/。

逻辑非

社交软件、购物软件中个别都会有评论性能，有评论必定须要做敏感词过滤性能，不然分分钟下架。如果当初有敏感词 a、b、c，只有用户评论中带有 a、b、c 都不能通过审核，此时正则该如何写？需要剖析：匹配的字符串不能携带 a、b、c 字符。此时就能够用到正则中的逻辑非元字符，正则可写为/[^abc]/。留神：正则中“非”和“以什么结尾”都是用的^，当^在[]元字符内时示意“非”，其余都是示意以什么结尾。

注：因为|在表格中应用会解析成表格的边框，所以不得已应用中文｜

分组

分组根底

应用()元字符将正则表达式进行分组，每一个分组都是一个子表达式。波及：(pattern)

逻辑或小结中提到的正则表达式：/^(男|女)$/，此正则能够匹配“男”字或者“女”字，因为()能将男|女当成一个整体来解决，如果咱们将它改写成/^男|女$/，会发现该正则能够匹配全副以“男”结尾或者以“女”结尾的字符串。

const str1 = "男";const str2 = "女";const str3 = "男孩";const str4 = "美女";const reg = /^男|女$/;console.log(reg.test(str1)); // trueconsole.log(reg.test(str2)); // trueconsole.log(reg.test(str3)); // trueconsole.log(reg.test(str4)); // true

在次数限定那一节提过 https 协定的例子，如果当初咱们只想匹配 s 为复数的协定，即 https、httpsss 等，此时正则表达式又该如何写？需要剖析可知，咱们须要写一个能匹配 https 后有偶数个 s 的正则。此时咱们能够应用分组的性能解决写成：/^https(ss)*$/，如果用数学计算表述该正则：只有 值 = https + ss*任意大于等于 0 的数字 该值就满足条件。

const str1 = "https";const str2 = "httpss";const str3 = "httpsss";const reg = /^https(ss)*$/;console.log(reg.test(str1)); // trueconsole.log(reg.test(str2)); // falseconsole.log(reg.test(str3)); // true

提取转换

应用()进行分组，各分组匹配的内容也会被提取，应用这一个性能够很轻松的实现匹配内容的提取和转换

假如想匹配格局为YYYY-MM-DD的日期，正则能够写成：/\d{4}-\d{2}-\d{2}/或者/(\d{4})-(\d{2})-(\d{2})/，加括号与不加括号有什么区别呢？

const str = "2023-02-14";const reg1 = /\d{4}-\d{2}-\d{2}/;const reg2 = /(\d{4})-(\d{2})-(\d{2})/;// ['2023-02-14', index: 0, input: '2023-02-14', groups: undefined]console.log(reg1.exec(str));// ['2023-02-14', '2023', '02', '14', index: 0, input: '2023-02-14', groups: undefined]console.log(reg2.exec(str));

依据测试后果咱们能够晓得，应用()进行分组，各分组匹配的内容也会被提取。如果当初须要将YYYY-MM-DD的数据转换为YYYY年MM月DD日，把握了分组提取个性该需要就很好解决了，实现如下：

// 形式一function fn1(str) {    const reg = /^(\d{4})-(\d{2})-(\d{2})$/;    const result = reg.exec(str);    if (result) {        return `${result[1]}年${result[2]}月${result[3]}日`;        // 也能够应用构造函数属性，该属性只有执行正则操作就有有值，如应用reg.test(str)、str.match(reg)等        // return `${RegExp.$1}年${RegExp.$2}月${RegExp.$3}日`;    }    return str;}// 形式二function fn2(str) {    const reg = /^(\d{4})-(\d{2})-(\d{2})$/;    return str.replace(reg, (match, year, month, day) => {        return `${year}年${month}月${day}日`;        // 当然这里也能够应用后面提到的构造函数全局属性    });}// 形式三function fn2(str) {    const reg = /^(\d{4})-(\d{2})-(\d{2})$/;    // $1等价于RegExp.$1    return str.replace(reg, `$1年$2月$3日`);}

非捕捉分组

不捕捉分组匹配的内容，波及：(?:)

提取转换大节提到过，应用()进行分组，各分组匹配的内容也会被提取，然而有时咱们并不会用到分组匹配的内容，提取各分组的内容或多或少会造成资源的节约。如果咱们须要用到分组然而又不须要应用到各分组匹配的内容，咱们能够应用非捕捉分组(?:)：

const str = "2023-02-14";const reg1 = /(?:\d{4})-(?:\d{2})-(?:\d{2})/;const reg2 = /(\d{4})-(\d{2})-(\d{2})/;// ['2023-02-14', index: 0, input: '2023-02-14', groups: undefined]console.log(reg1.exec(str));// ['2023-02-14', '2023', '02', '14', index: 0, input: '2023-02-14', groups: undefined]console.log(reg2.exec(str));

回溯援用

在正则表达式用应用\1、\2、\3等等示意后面第一个分组、第二个分组、第三个分组匹配的内容

下面的例子咱们再革新一下，如果想让YYYY-MM-DD和YYYY/MM/DD格局的日期都能匹配胜利，正则表达式应该如何写呢？如果间接写成/^(\d{4})(-|\/)(\d{2})(-|\/)(\d{2})$/：

const str1 = "2023-02-14";const str2 = "2023/02/14";const str3 = "2023-02/14";const reg = /^(\d{4})(-|\/)(\d{2})(-|\/)(\d{2})$/;console.log(reg.test(str1)); // trueconsole.log(reg.test(str2)); // trueconsole.log(reg.test(str3)); // true!!

依据测试后果咱们能够看出，尽管该正则能匹配YYYY-MM-DD和YYYY/MM/DD格局的日期，然而YYYY-MM/DD格局的数据也能匹配，所以这种写法不符合要求。如果想要管制宰割符前后一致，就须要用到分组回溯援用的性能写成/^(\d{4})(-|\/)(\d{2})\2(\d{2})$/：

const str1 = "2023-02-14";const str2 = "2023/02/14";const str3 = "2023-02/14";// \2代表第二个分组，和后面提到的 RegExp.$2 是一个意思const reg = /^(\d{4})(-|\/)(\d{2})\2(\d{2})$/;// 或// const reg = /^\d{4}(-|\/)\d{2}\1\d{2}$/;console.log(reg.test(str1)); // trueconsole.log(reg.test(str2)); // trueconsole.log(reg.test(str3)); // false

零宽后行断言

零宽后行断言分为零宽正向后行断言(?=pattern)和零宽负向后行断言(?!pattern)。

零宽正向后行断言：(?=pattern)代表字符串中一个零宽度的地位，该地位前面字符串能与pattern匹配。举个例子：字符串为peoples，正则为/peo(?=ple)/， peoples.match(/peo(?=ple)/)，(?=ple) 其实就是代表peo和ple之间的一个零宽的地位，为了不便形容咱们假设这个地位为#，字符串就能够了解成peo#ples，正则就能够了解成/peo#/，正则匹配失去的后果也就是字符串peo#，因为#只是一个零宽度的地位标识，所以最终失去的后果是peo。

const str = "peoples";const reg1 = /peo(?=ple)/;const reg2 = /peo(?=ple)s/;const reg3 = /peo(?=ple)ples/;// 了解成："peo#ples".match(/peo#/)console.log(str.match(reg1)); // 打印后果：['peo', index: 0, input: 'peoples', groups: undefined]// 了解成："peo#ples".match(/peo#s/)console.log(str.match(reg2)); // 打印后果：null// 了解成："peo#ples".match(/peo#ples/)console.log(str.match(reg3)); // 打印后果：['peoples', index: 0, input: 'peoples', groups: undefined]

零宽负向后行断言：(?!pattern)也代表字符串中一个零宽度的地位，然而与正向相同的是该地位前面字符串不能与pattern匹配。

const str1 = "peoples";const str2 = "peony";const reg1 = /peo(?!ple)/;const reg2 = /peo(?!ple)ny/;// 了解成："peoples".match(/peo#/)console.log(str1.match(reg1)); // 打印后果：null// 了解成："peo#ny".match(/peo#/)console.log(str2.match(reg1)); // 打印后果：['peo', index: 0, input: 'peony', groups: undefined]// 了解成："peo#ny".match(/peo#ny/)console.log(str2.match(reg2)); // 打印后果：['peony', index: 0, input: 'peony', groups: undefined]

零宽后行断言

零宽后行断言分为零宽正向后行断言(?<=pattern)和零宽负向后行断言(?<!pattern)。

留神 ⚠️：零宽后行断言存在兼容性问题，在 safari 浏览器和一些老版本浏览器中无奈辨认，所以个别不会间接应用后行断言，而是应用代替计划

零宽正向后行断言：(?=pattern)代表字符串中一个零宽度的地位，该地位后面字符串能与pattern匹配。和前行断言一样也举个例子：字符串为apple，正则为/(?<=app)le/，(?<=app)代表的其实就是app和le之间的一个零宽的地位，和后面一样为了不便形容把这个地位假设为#，字符串就能够了解成app#le，正则也就能够了解成#le，所以最终失去的后果是le。

const str = "apple and people";const reg = /(?<=app)le/;// 了解成 'app#le and people'.match(/#le/);console.log(str.match(reg)); // 打印后果：['le', index: 3, input: 'apple and people', groups: undefined]

零宽负向后行断言：(?<!pattern)代表字符串中一个零宽度的地位，该地位后面面字符串不能与pattern匹配。

const str = "apple and people";const reg = /(?<!app)le/;// 了解成 'apple and people'.match(/#le/);console.log(str.match(reg)); // 打印后果：['le', index: 3, input: 'apple and people', groups: undefined]

零宽后行断言代替计划

零宽后行断言存在兼容性问题，所以个别我的项目中应用代替计划解决：将字符串翻转而后应用前行断言匹配

const str = "apple and people";const reg = /(?<=app)le/;// 将字符串翻转const reverseStr = str.split("").reverse().join(""); // 'elpoep dna elppa'// 将正则由后行断言转化为前行断言const reverseReg = /el(?=ppa)/;// 翻转后的匹配后果const reverseResult = reverseStr.match(reverseReg); //['el', index: 11, input: 'elpoep dna elppa', groups: undefined]// 转化为实在后果const result = reverseResult    ? reverseResult.map((item) => item.split("").reverse().join(""))    : null; // ['le']

后记

最近接触到一个新的概念：“以教为学，教学相长” ，最好的学莫过于教，能用本人的话把一个简单的知识点表述分明，阐明本人大略曾经把握了它。以写博客的模式记笔记，不然而教更是学，因为 99%的常识都是来自于归纳法，我认为正确的认知，很有可能是谬误的，只有重复的接收他人的倡议和改过他人指出的谬误，最终播种的常识才是真正的常识。

第一次认真的写一篇博客，其中必定存在很多纰漏，各位如果有发现什么谬误之处或者感觉哪块表述的不分明或者在写作上和表述上有什么倡议的请留言通知我，Thanks♪(･･)ﾉ！

伟人的肩膀

• 【MDN】正则表达式指南
• 【掘金】正则表达式不要背
• 【CSDN】正则表达式 边界：\b 和 \B
• 【CSDN】JS 正则匹配
• 【知乎】正则表达式括号的作用
• 【菜鸟】后行断言和后行断言