正则这玩意儿,在我刚入行的时候,简直就是我的噩梦。网上搜来的代码,只要带
RegExp
,我基本就是复制粘贴,然后默默祈祷它能跑。那串鬼画符到底啥意思?我不敢问,也不想懂。
但后来,你总会遇到一些绕不开的场景,比如校验用户输入的表单。总复制粘贴也不是个事儿,万一产品经理说规则要改一下呢?你总不能再去网上搜一圈吧。
没办法,硬着头皮学了一下。后来发现,其实我们日常开发,尤其是前端,真正用得上的,来来回回就那么几个。你只要把这几个"套路"搞明白了,就能解决80%的问题。
今天,就把我总结的这10个"套路"分享给你。我不讲复杂的原理,咱就用"人话"讲明白。
1. 校验手机号码
验证用户输入的是不是一个"1"开头、第二位是3~9之间的任意数字,后面再跟9个数字,总共11位的中国大陆手机号。
javascript
const regex = /^1[3-9]\d{9}$/;
拆解讲解一下:
^
:这个东西叫"行首定位符",你可以理解为"从头开始检查"。1
:手机号第一个数字必须是1。这是铁律,国家规定的。[3-9]
:第二位必须是3~9之间的一个数字,常见的号段(像138、147、166、199等)都在这儿。\d{9}
:后面跟着9个数字,这没啥好说的。$
:这是"行尾定位符",意思是检查到这就结束了,后面不能有其他字符。
连接起来就是:从头开始,必须以1开头,第二位是3~9,然后再跟9个数字,一共11位,干净整齐,不能有符号、空格、括号啥的。
-
测试一下:
javascriptregex.test('13812345678'); // true regex.test('14712345678'); // true regex.test('12345678901'); // ❌ false(第二位不是3-9) regex.test('11812345678'); // ❌ false(不在合法号段内) regex.test('138-1234-5678'); // ❌ false(不能有横线) regex.test('1381234567'); // ❌ false(少了一位) regex.test('138123456789'); // ❌ false(多了一位)
2. 校验电子邮件 (Email)
检查用户输入的是不是一个像xxx@yyy.zzz格式的邮箱。
JavaScript
const regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*$/;
(我知道这个看起来吓人,别怕,我们慢慢拆)
^
和$
:老朋友了,从头到尾。\w
:意思是"任意一个字母、数字或下划线"。。+
:意思是"前面的那个东西,至少要出现1次,多几次也行"。所以\w+
就是"一串字母数字下划线"。[...]
:中括号,意思是"里面的字符,随便选一个就行"。比如[-+.]
就是说"可以是横杠,可以是加号,也可以是点"。*
:意思是"前面的那个东西,可以不出现(0次),也可以出现好多次"。()
:括号是"分组",就是把一堆东西包起来当成一个整体。
现在我们把上面那坨再走一遍:
-
^\w+
:以一串字母/数字/下划线开头。 -
([-+.]\w+)*
:后面可以跟好几个 "特殊符号(点/加号/横杠) + 一串字母数字"的组合 (比如-smith
或者.123
)。 -
@
:然后必须有个@符号。 -
后面的
\w+([-.]\w+)*
:跟前面一样,是域名部分 (比如gmail
或者company-inc
)。 -
.
:这个 `` 是"转义符",因为.
在正则里有特殊含义(代表任意字符),所以要用.
来告诉它,我这里就是要一个普普通通的"点"。 -
最后一部分跟域名一样,就是顶级域名部分 (比如
com
)。
JavaScript
regex.test('test.user-1@gmail.com'); // true
regex.test('test@gmail'); // false (没有.com)
3. 校验密码强度
检查密码是不是至少8个字符,并且同时包含字母和数字。
JavaScript
const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
- 这个新的东西叫
(?=...)
,它叫 "正向先行断言",听着吓人,其实意思很简单,就是 "往后看,看看是不是满足某个条件,但看完不消耗字符,只是检查一下而已"。 (?=.*[A-Za-z])
:往后瞅瞅,有没有字母?(.*
意思是任意字符出现任意次数)(?=.*\d)
:再往后瞅瞅,有没有数字?[A-Za-z\d]{8,}
:好了,不瞅了,正式开始匹配。这里必须是字母或数字,并且{8,}
意思是"至少出现8次"。
连起来就是:从头到尾,必须满足"含有字母"和"含有数字"这两个条件,并且整个字符串是由至少8个字母或数字组成的。
-
测试一下:
JavaScriptregex.test('password123'); // true regex.test('password'); // false (没有数字) regex.test('12345678'); // false (没有字母) regex.test('pass123'); // false (不够8位)
4. 只允许输入中文
检查字符串是不是全都是中文字。
JavaScript
const regex = /^[\u4e00-\u9fa5]+$/;
-
[\u4e00-\u9fa5]
:这是中文字符在Unicode编码里的范围。你就把它当成一个"中文专用"的[A-Z]
就行了。 -
+
:这些中文字,至少要有一个。 -
测试一下:
JavaScriptregex.test('你好世界'); // true regex.test('你好world'); // false
5. 提取URL中的域名
从一个网址里,把域名给抠出来。
JavaScript
const regex = /^(?:https?://)?(?:[^/]+)/i;
-
(?:...)
:这个叫"非捕获组",跟()
差不多,也是打包,但它只匹配,不"抓"下来存着,效率高点。 -
https?
:s
后面的?
意思是"s这个字母,可以有,也可以没有"。所以就能匹配http
和https
。 -
://
:就是普通的://
。 -
[^/]+
:这里的^
是在中括号[]
里面,意思反了,是"不要 匹配斜杠/
"。所以[^/]+
就是"一串不包含斜杠的字符"。 -
/i
:最后的i
是个修饰符,意思是"忽略大小写"(ignore case)。 -
测试一下:
JavaScript'https://juejin.cn/user/123'.match(regex)[0]; // "https://juejin.cn" 'www.google.com/search'.match(regex)[0]; // "www.google.com"
(为保持简洁,下面5个只列出核心,大家可以举一反三)
6. 校验身份证号码
- 正则:
/^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/
- 解释:
-
前6位 :地址码,
[1-9]\d{5}
-
接着8位 :出生日期,
(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])
- 年份:1900--2099
- 月份:01--12
- 日期:01--31
-
接着3位 :顺序码,
\d{3}
-
最后1位 :校验码,可能是数字或 X(大小写),
[\dXx]
-
7. 匹配HTML标签
- 正则:
/<(.*?)>/
- 解释: 抓取尖括号
<
和>
之间的所有东西。.*?
叫"非贪婪匹配",意思是抓到第一个>
就收手,免得把整行HTML都抓进来了。
8. 检查文件是否为图片
- 正则:
/.(jpg|jpeg|png|gif|bmp)$/i
- 解释: 以"."开头,后面跟着jpg或jpeg或png...这些东西,并且忽略大小写。
|
就是"或者"的意思。
9. 获取字符串中的所有数字
- 正则:
/\d+/g
- 解释: 匹配所有"一串或多串数字"。最后的
g
是"全局匹配"(global),不然只找到第一个就停了。
10. 去除字符串首尾的空白
- 正则:
/^\s*|\s*$/g
- 解释: 匹配开头(
^
)的零个或多个空白(\s*
),或者(|
)匹配结尾($
)的零个或多个空白。全局替换成空字符串就行了。(当然,现在我们都用.trim()
方法了,这个主要是用来理解正则)。
好了,10个最常用的"套路"讲完了。
正则这东西, 我的建议是,在一些在线的正则测试网站(比如 regex101.com),把你的字符串和表达式贴上去,它会一步步给你解释,特别直观。
反正我现在看到正则,心里不那么慌了。希望你也是,谢谢大家🙂。