用“人话”讲明白10个最常用的正则表达式

正则这玩意儿,在我刚入行的时候,简直就是我的噩梦。网上搜来的代码,只要带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位,干净整齐,不能有符号、空格、括号啥的。

  • 测试一下:

    javascript 复制代码
    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格式的邮箱。

JavaScript 复制代码
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)。

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个字母或数字组成的。

  • 测试一下:

    JavaScript 复制代码
    regex.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]就行了。

  • +:这些中文字,至少要有一个。

  • 测试一下:

    JavaScript 复制代码
    regex.test('你好世界'); // true
    regex.test('你好world'); // false

5. 提取URL中的域名

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

JavaScript 复制代码
   const regex = /^(?:https?://)?(?:[^/]+)/i;
  • (?:...):这个叫"非捕获组",跟()差不多,也是打包,但它只匹配,不"抓"下来存着,效率高点。

  • https?s后面的?意思是"s这个字母,可以有,也可以没有"。所以就能匹配httphttps

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

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

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

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

相关推荐
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头1 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's1 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络2 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
遗憾随她而去.3 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09013 小时前
浅析Web存储系统
前端