快速掌握JS中的正则表达式_js中正则表达式 ?:-优快云博客

本文链接：https://blog.youkuaiyun.com/stc_ljc/article/details/129460458

本文介绍了正则表达式的基础知识，包括如何通过字面量和构造函数创建正则表达式，以及使用`test`和`exec`方法进行匹配和捕获。文中还提供了手机号、座机号、验证码、邮箱和中文名称的正则校验示例，并展示了如何从URL中提取参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、正则表达式介绍
二、正则表达式的使用
三、正则表达式实战
总结

一、正则表达式介绍

在这里插入图片描述

正则表达式（英文Regular Expression）
正则表达式，又称规则表达式，是一个复杂数据类型，使用单个字符串来描述，通常被用来检索、替换那些复合某个模式(规则)的文本，正则表达式的核心功能就是处理文本。校验内容。

作用:
1. 专门用来验证字符串是否复合规则
2. 从字符串里面获取一部分符合规则的内容
语法:
1. 使用一些特定的符合,来组合成一个表达式
2. 使用这个表达式去验证字符串，或者从字符串里面获取一些内容
创建表达式的方法:
1. 字面量形式 => var reg =/中间写内容/
2. 内置构造函数=>var reg=new RegExp（“内容”）

二、正则表达式的使用

js通过内置对象RegExp支持正则表达式，有2种方法实例化RegExp对象： a.字面量 b.构造函数

1.创建正则表达式

字面量创建

  <script>
    // RegExp -正则表达式
    // 1.字面量创建
    const reg=/abcd/
    console.log(reg)
  </script>

在这里插入图片描述

内置构造函数创建

  <script>
    // RegExp -正则表达式
    // 内置构造函数创建
    const reg2=new RegExp('abcd')
    console.log(reg2)
  </script>

在这里插入图片描述

2.正则表达式的方法

匹配

匹配主要验证字符串是不是符合规则

语法: 正则.test(输入你要检测的字符串)
返回值:一个布尔值 true 或者 false
需要注意，片段在什么位置不重要，只要有就返回true

  <script>
    // 匹配 test()
    // 准备一个正则
    // reg 表示字符串里面需要有一个demo这个片段
    const reg=new RegExp("demo")
    console.log(reg.test('abcdemo'))
    console.log(reg.test('dbeome'))
  </script>

在这里插入图片描述

捕获

捕获主要从字符串里面获取符合规则的那一部分片段

语法: 正则.exec(输入你要捕获的字符串)
返回值:
1. 字符串里面没有符合规则的片段=>返回值是一个数组null
2. 字符串里面有符合规则的片段=>返回值索引[0]是捕获的片段，索引[1] index是捕获的片段是从哪里开始的，索引[2] input是原始字符串
需要注意：
1. 不管有多少个片段，都只捕获第一个片段
2. 不管捕获多少次，都是第一个片段

  <script>

    // 准备一个正则
    // reg 表示字符串里面需要有一个demo这个片段
    const reg=new RegExp("demo")
    //  捕获 exec()
    const res1=reg.exec("abcdemo")
    const res2=reg.exec("dbeome")
    console.log(res1)
    console.log(res2)
  </script>

在这里插入图片描述

三、正则表达式实战

1.正则常用规则大全

\d 数字等价[0-9]
\s 空白符包括换行
\S 非空白符
\n 换行
\w 等价[A-Za-z0-9_]
\W 等价[^A-Za-z0-9_]
. 匹配你出换行符(\n、\r)之外的任何单个字符,相当于[^\n\r]
*任意长度,等价{0,}
? 长度0-1位,等价{0,1}
[] 组合[0,9] 表示0-9,[0,9a-z. $] 表示 0 - 9 或者 a - z 或者 . 或者$
{} 长度限制 {0,5}表示长度0-5,{5}表示长度5,{1,}表示长度大于1
^ 以什么开头,如果出现在[]中,那么表示非,取反的意思
$ 以什么结尾
[\u4e00-u9fa5] 匹配中文
() 分组
.* ? 非贪婪匹配,找到一个就停止,例如/\d.*?/匹配到第一个数字就停止

  <script>
    /**
     * \d 数字等价[0-9]
     * \s 空白符包括换行
     * \S 非空白符
     * \n 换行
     * \w 等价[A-Za-z0-9_]
     * \W 等价[^A-Za-z0-9_]
     * . 匹配你出换行符(\n、\r)之外的任何单个字符,相当于[^\n\r]
     * * 任意长度,等价{0,}
     * ? 长度0-1位,等价{0,1}
     * [] 组合[0,9] 表示0-9,[0,9a-z.$] 表示0-9或者a-z或者.或者$
     * {} 长度限制 {0,5}表示长度0-5,{5}表示长度5,{1,}表示长度大于1
     * ^ 以什么开头,如果出现在[]中,那么表示非,取反的意思
     * $ 以什么结尾
     * [\u4e00-u9fa5\] 匹配中文
     * () 分组
     * .*? 非贪婪匹配,找到一个就停止,例如/\d.*?/匹配到第一个数字就停止
    */
  </script>

2.正则常用例子

校验手机号

/^1\d{10}$/ 以1开头后续跟10位数字

  <script>
    // 校验手机号
    const phone="12345678910"
    const PhoneReg=new RegExp(/^1\d{10}$/)
    // PhoneReg校验手机号正则
    console.log(PhoneReg.test(phone))
  </script>

在这里插入图片描述

校验座机号

/^\d{3}-\d{8}$/  三位数字开头 - 8位数字结尾

-是非正则语义的就会当成普通字符处理

  <script>
    const zPhone="037-12345678"
    const zPhoneReg=new RegExp(/^\d{3}-\d{8}$/)
    // zPhoneReg校验座机号正则
    console.log(zPhoneReg.test(zPhone))
  </script>

在这里插入图片描述

校验4位手机数字验证码

/^\d{4}$/  四位数字

  <script>
    const phoneCode="0218"
    const phoneCodeReg= new RegExp(/^\d{4}$/)
    // phoneCodeReg校验手机4位数字验证码正则
    console.log(phoneCodeReg.test(phoneCode))
  </script>

在这里插入图片描述

校验邮箱输入

正则

/^[a-z0-9_]{1,20}@[a-z0-9]{1,10}[.a-z0-9]+[^.]+$/i 校验邮箱正则
解释
[a-z0-9_]{1,20} 组可以是a-z也可以是0-9或者_,长度限制1-20位
@ 普通字符
[a-z0-9]{1,10} 组可以是a-z也可以是0-9,长度限制1-10位
[.a-z0-9] 组可以是.也可以a-z或者0-9
+
[^.]+$/i 结尾非.

  <script>
    const email="123456789@qq.com"
    const emailReg= new RegExp(/^[a-z0-9_]{1,20}@[a-z0-9]{1,10}[.a-z0-9]+[^.]+$/i)
    // emailReg校验邮箱正则
    console.log(emailReg.test(email))
  </script>

在这里插入图片描述

校验名字必须为中文

/^[\u4e00-\u9fa5]{2,5}$/ 字符集 长度2-5

  <script>
    const name="李星云"
    const nameReg= new RegExp(/^[\u4e00-\u9fa5]{2,5}$/)
    // emailReg校验中文正则
    console.log(nameReg.test(name))
  </script>

在这里插入图片描述

获取url参数

  const reg=new RegExp(key+`=(.*?)(&|$)`)
  .*?   //非贪婪匹配，会一直找
  (&|$) //碰到&符号结束或者$结束

  <script>
    function QueryString(url,key){
      const reg=new RegExp(key+`=(.*?)(&|$)`)
      //  获取url参数正则
      const result=url.match(reg)
      return result?result[1]:null
    }
    const url="http://www.baidu.com/?a=1&b=2"
    console.log(QueryString(url,'b'))
  </script>