学习笔记整理-正则表达式-01-认识正则

东东爱编码2023-08-15 8:35

一、基本认识

1. 什么是正则表达式

  • 正则表达式(regular expression)描述了字符串"构成模式"，经常被用于检查字符串是否符合预定的格式要求。

  • 用一个例子快速演示正则表达式基本使用方法：检查某个字符串是否是6位数字

    js 复制代码 
       // 要检查的字符串
  var str = '456789';
  // 正则表达式规则
  var regexp = /^\d{6}$/; 
  // 检查
  if (regexp.test(str)) {
    alert('符合规则'); 
  } else {
    alert('不符合规则'); 
  }
    • /^\d{6}$/就是正则表达式，它描述了字符串必须是"6位数字"的构成规则。
    • 正则表达式可以调用test()方法，检查某字符串是否符合正则表达式规定的规则。

  • 正则表达式"按位"描述规则

    • 正则表达式"按位"描述规则，是指它是一位一位的描述字符串的构成形式。

    • 比如检查字符串是不是这样的：以字母m开头，然后是3个数字，最后以字母n结尾。

      js 复制代码 
          // ^表示开头，$表示结尾，\d 表示数字 \d\d\d也可以写作\d{3}
    /^m\d\d\dn$/

二、基本使用

1. 正则表达式的创建

  • 使用/内容/的语法形式，可以快速创建正则表达式。

  • 也可以使用new RegExp('内容')的形式，创建正则表达式。

  • 使用typeof运算符检查正则表达式的类型，结果是object。

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 创建正则表达式方法1
        var regexp1 = /^\d{6}$/;
        // 创建正则表达式方法2
        var regexp2 = new RegExp('^\\d{6}$');

        var str = '555666';

        console.log(regexp1.test(str));     // true
        console.log(regexp2.test(str));     // true

        console.log(typeof regexp1);        // object
        console.log(typeof regexp2);        // object
    </script>
</body>
</html>

2. 元字符

  • "元字符"是指一位指定类型的字符

    元字符 功能
    \d 匹配一个数字
    \D 匹配一个非数字字符
    \w 匹配一个单字字符(字母、数字或者下划线)
    \W 匹配一个非单字字符
    \s 匹配一个空白字符，包括空格、制表符和换行符
    . 任意字符

  • 开头和结尾

    元字符 功能
    ^ 匹配开头
    $ 匹配结尾

  • 元字符注意事项

    • 如果使用new RegExp()写法，反斜杠需要多写一个。
    • 比如/^\d$/和new RegExp('^\\d$')是相同的意思

  • 元字符使用举例

    • 某快递公司运单号形式是这样的:123-4567-890，请使用正则表达式检查某字符串是否符合此格式
    • 某产品的验证秘钥形式是这样的:□□□-□□□□-□□□，其中□表示字母数字或者下划线，请使用正则表达式检查某字符串是否符合此格式

  • 字符的转义

    • 在特殊字符之前的反斜杠\表示下一个字符不是特殊字符，应该按照字面理解。
      /^.$/：检查字符串是不是任意字符
      /^\.$/：检查字符串是不是一个点
      /^\\$/：检查字符串是不是一个反斜杠
    • 不管一个符号有没有特殊意义，都可以在其之前加上一个\以确保它表达的是这个符号本身。
    • 举例：某产品批号形式为：123.45^67#89，请使用正则表 达式检查某字符串是否符合此格式

  • 代码演示

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 题目1：某快递公司运单号形式是这样的：123-4567-890，请使用正则表达式检查某字符串是否符合此格式

        // 正则表达式
        var regexp1 = /^\d\d\d-\d\d\d\d-\d\d\d$/;
        // 待测试的字符串
        var str1 = '444-5555-000';
        console.log(regexp1.test(str1));

        // 题目2：某产品的验证秘钥形式是这样的：□□□-□□□□-□□□，其中□表示字母数字或者下划线，请使用正则表达式检查某字符串是否符合此格式

        // 正则表达式
        var regexp2 = /^\w\w\w-\w\w\w\w-\w\w\w$/;
        // 待测试的字符串
        var str2 = 'abc-__ab-123';
        console.log(regexp2.test(str2));

        // 题目3：某产品批号形式为：123.45^67#89，请使用正则表达式检查某字符串是否符合此格式
        var regexp3 = /^\d\d\d\.\d\d\^\d\d\#\d\d$/;
        // 待测试的字符串
        var str3 = '666.66^66#66';
        console.log(regexp3.test(str3));

    </script>
</body>
</html>

3. 方括号表示法

  • 使用方括号，比如[xyz]，可以创建一个字符集合，表示匹 配方括号中的任意字符。

  • 比如某学校的学号规定：第1位是一个字母，b表示本科生，y表示研究生，后面是7位数字，用正则表示为：

    js 复制代码 
      /^[by]\d{7}$/

  • 可以使用短横-来指定一个字符范围，^表示否定

    元字符 等价的方括号表示法
    \d [0-9]
    \D [^0-9]
    \w [A-Za-z0-9]
    \W [^A-Za-z0-9]

  • 方括号表示法小题目

    • 题目1：请验证某字符串是否是5位字母，大小写均可

    • 题目2：请验证某字符串是否是5位，且仅有小写字母、点构成

    • 题目3：请验证某字符串是否是4位小写字母，且最后一位不能是m字母

      html 复制代码 
      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 某学校的学号规定：第1位是一个字母，b表示本科生，y表示研究生，后面是7位数字，用正则表示为：
        // 学号字符串
        var str1 = 'm4444555';

        // 用正则表达式进行检查
        console.log(/^[by]\d{7}$/.test(str1));

        // *******************************************
        // 题目1：请验证某字符串是否是5位字母，大小写均可
        var str2 = 'abcde';
        var str3 = 'abcd5';
        console.log(/^[a-zA-Z]{5}$/.test(str2));
        console.log(/^[a-zA-Z]{5}$/.test(str3));

        // 题目2：请验证某字符串是否是5位，且仅由小写字母、点构成
        var str4 = 'mnp..';
        var str5 = 'mnp.#';
        console.log(/^[a-z\.]{5}$/.test(str4));
        console.log(/^[a-z\.]{5}$/.test(str5));

        // 题目3：请验证某字符串是否是4位小写字母，且最后一位不能是m字母
        var str6 = 'abcd';
        var str7 = 'abcm';
        var str8 = 'ab1c';
        console.log(/^[a-z]{3}[a-ln-z]$/.test(str6));
        console.log(/^[a-z]{3}[a-ln-z]$/.test(str7));
        console.log(/^[a-z]{3}[a-ln-z]$/.test(str8));
    </script>
</body>

</html>

4. 量词

量词 意义
* 匹配前一个表达式0次或多次。等价于{0,}
+ 匹配前面一个表达式1次或者多次。等价于{1,}
? 匹配前面一个表达式0次或者1次。等价于{0,1}
{n} n是一个正整数，匹配了前面一个字符刚好出现了n次
{n,} n是一个正整数，匹配前一个字符至少出现了n次
{n, m} n和m都是整数。匹配前面的字符至少n次，最多m次
  • 量词小题目

    • 题目1：请验证字符串是否符合手机号码的规则：11位数字，并且肯定以1开头。

    • 题目2：请验证某字符串是否是这样的：以字母开头，中间是任意位数字(最少1位)构成，并以字母结尾。

    • 题目3：请验证某字符串是否符合网址规则：以www.开头，中间是任意位的字符(字母数字下划线)，最后以.com结尾，也可以以.com.cn结尾

      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 题目1：请验证字符串是否符合手机号码的规则：11位数字，并且肯定以1开头
        var str1 = '13812345678';
        var str2 = '138123456789';
        var str3 = '38123456789';
        var regexp1 = /^1\d{10}$/;
        console.log(regexp1.test(str1));
        console.log(regexp1.test(str2));
        console.log(regexp1.test(str3));
        
        // 题目2：请验证某字符串是否是这样的：以字母开头，中间是任意位数字（最少1位）构成，并以字母结尾
        var str4 = 'a123123123b';
        var str5 = 'abcd';
        var str6 = 'a1b';
        var regexp2 = /^[a-zA-Z]\d+[a-zA-Z]$/;
        console.log(regexp2.test(str4));
        console.log(regexp2.test(str5));
        console.log(regexp2.test(str6));
        
        // 题目3：请验证某字符串是否符合网址规则：以www.开头，中间是任意位的字符（字母数字下划线，最少一位），最后以.com结尾，也可以以.com.cn结尾
        var str7 = 'www.imooc.com';
        var str8 = 'www.sina.com.cn';
        var str9 = 'www.news.cn';
        var regexp3 = /^www\.\w+\.com(\.cn)?$/;
        console.log(regexp3.test(str7));
        console.log(regexp3.test(str8));
        console.log(regexp3.test(str9));
    </script>
</body>
</html>

5. 修饰符

  • 修饰符也叫作标志(flags)，用于使用正则表达式实现高 级搜索

    修饰符 意义
    i 不区分大小写搜索
    g 全局搜索

  • 修饰符的使用

    js 复制代码 
      var re = /m/gi;
  var re = new RegExp('m', 'gi');
    • 在正则表达式的第二个/后面写修饰符，可以多个连写。
    • new RegExp()形式的正则表达式，以字符串形式写在第二个参数

三、相关方法

1. 正则表达式可以"打点"调用哪些方法呢?

方法 简介
test() 测试某字符串是否匹配正则表达式，返回布尔值
exec() 根据正则表达式，在字符串中进行查找，返回结果数组或者null

  • test()方法

    • 正则表达式的test()方法用来测试某字符串是否匹配此正则表达式，它返回true或false

      js 复制代码 
        /^[a-z]{3}[a-ln-z]$/.test('abcd')

  • exec()方法

    • exec()方法功能是：在一个指定字符串中执行一个搜索匹配查找，返回一个结果数组或null

      js 复制代码 
         var str = 'abc123def456ghi789';
   var regexp = /\d+/;
   var result1 = regexp.exec(str);

    • exec()方法的逐条遍历

      • exec()方法最有趣的是，有"g"修饰符的正则表达式将自动成为"有状态"的，

        这意味着可以对单个字符串中的多次匹配结果进行逐条的遍历。

        html 复制代码 
        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var str = 'abc123def456ghi789';
        var regexp = /\d+/g;    // +表示贪婪的，尽可能多的匹配
        var result1 = regexp.exec(str);
        var result2 = regexp.exec(str);
        var result3 = regexp.exec(str);
        var result4 = regexp.exec(str);
        console.log(result1);
        console.log(result2);
        console.log(result3);
        console.log(result4);

        // 使用循环语句来循环执行exec，寻找所有的匹配结果
        var result;
        while (result = regexp.exec(str)) {
            console.log(result);
        }
    </script>
</body>

</html>

  • 字符串的相关方法

    方法 简介
    search() 在字符串中根据正则表达式进行查找匹配，返 回首次匹配到的位置索引，测试不到则返回-1
    match() 在字符串中根据正则表达式进行查找匹配，返 回一个数组，找不到则返回null
    replace() 使用替换字符串替换掉匹配到的子字符串，可以使用正则表达式
    split() 分隔字符串为数组，可以使用正则表达式
    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str = 'abc123def4567ghi89';
     
        // search()方法，很像indexOf()，返回查找到的第一个下标，如果找不到就是-1
        var result1 = str.search(/\d+/g);
        var result2 = str.search(/m/g);
        console.log(result1);       // 3
        console.log(result2);       // -1

        // match()方法，返回查找到的数组，找不到就是null
        var result3 = str.match(/\d+/g);
        console.log(result3);       // ["123", "4567", "89"]

        // replace()方法，进行替换
        var result4 = str.replace(/[a-z]+/g, '*');      // 注意+表示贪婪的，尽可能多的连续匹配小写字母
        console.log(result4);       // *123*4567*89

        // split()方法，进行字符串拆为数组
        var result5 = str.split(/\d+/g);
        console.log(result5);       // ["abc", "def", "ghi", ""]
    </script>
</body>
</html>

四、应用

  • 用正则表达式进行表单验证

    • 用正则表达式进行表单验证是正则表达式最重要的实际应用

      html 复制代码 
      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .warning {
            color: red;
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <p>
            请输入中文姓名：
            <input type="text" id="nameField">
            <span class="warning" id="nameWarning">输入的姓名不合法</span>
        </p>
        <p>
            请输入手机号码：
            <input type="text" id="telField">
            <span class="warning" id="telWarning">输入的手机号码不合法</span>
        </p>
        <p>
            请输入Email：
            <input type="text" id="emailField">
            <span class="warning" id="emailWarning">输入的Email不合法</span>
        </p>
    </div>
    <script>
        var nameField = document.getElementById('nameField');
        var telField = document.getElementById('telField');
        var emailField = document.getElementById('emailField');
        var nameWarning = document.getElementById('nameWarning');
        var telWarning = document.getElementById('telWarning');
        var emailWarning = document.getElementById('emailWarning');

        // 当文本框失去焦点，就是光标不在文本框中了
        nameField.onblur = function () {
            // 得到姓名
            var name = nameField.value;
            if (/^[\u4E00-\u9FA5]{2,4}$/.test(name)) {
                // 如果通过校验
                nameWarning.style.display = 'none';
            } else {
                // 如果没有通过校验
                nameWarning.style.display = 'inline';
            }
        };

        telField.onblur = function () {
            // 得到电话
            var tel = telField.value;
            if (/^1\d{10}$/.test(tel)) {
                // 如果通过校验
                telWarning.style.display = 'none';
            } else {
                // 如果没有通过校验
                telWarning.style.display = 'inline';
            }
        };

        emailField.onblur = function () {
            // 得到email
            var email = emailField.value;
            // 合法的email都是abc_def123@abc.net

            if (/^\w{2,}\@\w{2,}\.[a-z]{2,4}(\.[a-z]{2,4})?$/.test(email)) {
                // 如果通过校验
                emailWarning.style.display = 'none';
            } else {
                // 如果没有通过校验
                emailWarning.style.display = 'inline';
            }
        };
    </script>
</body>

</html>

  • 重点内容

    • 元字符、量词、方括号表示法
    • 正则表达式和字符串的常用方法
相关推荐
知识分享小能手11 小时前
React学习教程，从入门到精通， React 属性（Props）语法知识点与案例详解(14）
前端·javascript·vue.js·学习·react.js·vue·react
汇能感知13 小时前
摄像头模块在运动相机中的特殊应用
经验分享·笔记·科技
阿巴Jun13 小时前
【数学】线性代数知识点总结
笔记·线性代数·矩阵
茯苓gao14 小时前
STM32G4 速度环开环，电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾14 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
DKPT15 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
aaaweiaaaaaa15 小时前
HTML和CSS学习
前端·css·学习·html
ST.J15 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
Suckerbin15 小时前
LAMPSecurity: CTF5靶场渗透
笔记·安全·web安全·网络安全
看海天一色听风起雨落16 小时前
Python学习之装饰器
开发语言·python·学习
热门推荐
01UV安装并设置国内源02A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程032025 年高教社杯全国大学生数学建模竞赛C 题 NIPT 的时点选择与胎儿的异常判定 完整成品思路模型代码分享，全网首发高质量！！！042025年数学建模国赛C题超详细解题思路05UV 工具安装与国内镜像源配置指南06不再让Windows更新！&Edge游戏助手卸载及关闭自动更新07KGG转MP3工具|非KGM文件|解密音频08Linux下V2Ray安装配置指南09突破百度网盘的下载限速，两种方法教会你【超详细】10教你如何认证 Gemini 教育优惠的二次验证，薅个 1年的 Gemini Pro 会员