正则这玩意儿，在我刚入行的时候，简直就是我的噩梦。网上搜来的代码，只要带RegExp，我基本就是复制粘贴，然后默默祈祷它能跑。那串鬼画符到底啥意思？我不敢问，也不想懂。

但后来，你总会遇到一些绕不开的场景，比如校验用户输入的表单。总复制粘贴也不是个事儿，万一产品经理说规则要改一下呢？你总不能再去网上搜一圈吧。

没办法，硬着头皮学了一下。后来发现，其实我们日常开发，尤其是前端，真正用得上的，来来回回就那么几个。你只要把这几个“套路”搞明白了，就能解决80%的问题。

今天，就把我总结的这10个“套路”分享给你。我不讲复杂的原理，咱就用“人话”讲明白。

1. 校验手机号码

验证用户输入的是不是一个“1”开头、第二位是3~9之间的任意数字，后面再跟9个数字，总共11位的中国大陆手机号。

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位，干净整齐，不能有符号、空格、括号啥的。

• 测试一下：

  regex.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格式的邮箱。

const regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*$/;

(我知道这个看起来吓人，别怕，我们慢慢拆)

• ^ 和 $：老朋友了，从头到尾。
• \w：意思是“任意一个字母、数字或下划线”。。
• +：意思是“前面的那个东西，至少要出现1次，多几次也行”。所以 \w+ 就是“一串字母数字下划线”。
• [...]：中括号，意思是“里面的字符，随便选一个就行”。比如 [-+.] 就是说“可以是横杠，可以是加号，也可以是点”。
• *：意思是“前面的那个东西，可以不出现(0次)，也可以出现好多次”。
• ()：括号是“分组”，就是把一堆东西包起来当成一个整体。

现在我们把上面那坨再走一遍：

1. ^\w+：以一串字母/数字/下划线开头。

2. ([-+.]\w+)*：后面可以跟好几个“特殊符号(点/加号/横杠) + 一串字母数字”的组合 (比如 -smith 或者 .123)。

3. @：然后必须有个@符号。

4. 后面的 \w+([-.]\w+)*：跟前面一样，是域名部分 (比如 gmail 或者 company-inc)。

5. .：这个 `` 是“转义符”，因为 . 在正则里有特殊含义（代表任意字符），所以要用 . 来告诉它，我这里就是要一个普普通通的“点”。

6. 最后一部分跟域名一样，就是顶级域名部分 (比如 com)。

regex.test('test.user-1@gmail.com'); // true
regex.test('test@gmail'); // false (没有.com)

3. 校验密码强度

检查密码是不是至少8个字符，并且同时包含字母和数字。

const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;

• 这个新的东西叫 (?=...)，它叫 “正向先行断言”，听着吓人，其实意思很简单，就是 “往后看，看看是不是满足某个条件，但看完不消耗字符，只是检查一下而已”。
• (?=.*[A-Za-z])：往后瞅瞅，有没有字母？（.*意思是任意字符出现任意次数）
• (?=.*\d)：再往后瞅瞅，有没有数字？
• [A-Za-z\d]{8,}：好了，不瞅了，正式开始匹配。这里必须是字母或数字，并且 {8,} 意思是“至少出现8次”。

连起来就是：从头到尾，必须满足“含有字母”和“含有数字”这两个条件，并且整个字符串是由至少8个字母或数字组成的。

• 测试一下：

  regex.test('password123'); // true
  regex.test('password'); // false (没有数字)
  regex.test('12345678'); // false (没有字母)
  regex.test('pass123'); // false (不够8位)
  

4. 只允许输入中文

检查字符串是不是全都是中文字。

const regex = /^[\u4e00-\u9fa5]+$/;

• [\u4e00-\u9fa5]：这是中文字符在Unicode编码里的范围。你就把它当成一个“中文专用”的[A-Z]就行了。

• +：这些中文字，至少要有一个。

• 测试一下：

  regex.test('你好世界'); // true
  regex.test('你好world'); // false
  

5. 提取URL中的域名

从一个网址里，把域名给抠出来。

   const regex = /^(?:https?://)?(?:[^/]+)/i;

• (?:...)：这个叫“非捕获组”，跟()差不多，也是打包，但它只匹配，不“抓”下来存着，效率高点。

• https?：s后面的?意思是“s这个字母，可以有，也可以没有”。所以就能匹配http和https。

• ://：就是普通的://。

• [^/]+：这里的 ^ 是在中括号[]里面，意思反了，是“不要匹配斜杠/”。所以 [^/]+ 就是“一串不包含斜杠的字符”。

• /i：最后的i是个修饰符，意思是“忽略大小写”(ignore case)。

• 测试一下：

  '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​），把你的字符串和表达式贴上去，它会一步步给你解释，特别直观。

反正我现在看到正则，心里不那么慌了。希望你也是，谢谢大家🙂。