1. Toy模板网首页
  2. > Toy博客

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

7月前 作者：东东爱编码 分类：Toy博客 阅读(29) 违法举报

这篇具有很好参考价值的文章主要介绍了学习笔记整理-正则表达式-01-认识正则。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、基本认识

1. 什么是正则表达式

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

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

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

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

    • 正则表达式"按位"描述规则，是指它是一位一位的描述字符串的构成形式。
    • 比如检查字符串是不是这样的：以字母m开头，然后是3个数字，最后以字母n结尾。
          // ^表示开头，$表示结尾，\d 表示数字 \d\d\d也可以写作\d{3}
    /^m\d\d\dn$/

二、基本使用

1. 正则表达式的创建

  • 使用/内容/的语法形式，可以快速创建正则表达式。
  • 也可以使用new RegExp('内容')的形式，创建正则表达式。
  • 使用typeof运算符检查正则表达式的类型，结果是object。
    <!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，请使用正则表 达式检查某字符串是否符合此格式

  • 代码演示

    <!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位数字，用正则表示为：

      /^[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字母
      <!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结尾
      <!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 全局搜索

  • 修饰符的使用

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

三、相关方法

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

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

  • test()方法

    • 正则表达式的test()方法用来测试某字符串是否匹配此正则表达式，它返回true或false
        /^[a-z]{3}[a-ln-z]$/.test('abcd')

  • exec()方法

    • exec()方法功能是：在一个指定字符串中执行一个搜索匹配查找，返回一个结果数组或null
         var str = 'abc123def456ghi789';
   var regexp = /\d+/;
   var result1 = regexp.exec(str);
    • exec()方法的逐条遍历

      • exec()方法最有趣的是，有"g"修饰符的正则表达式将自动成为"有状态"的，
        这意味着可以对单个字符串中的多次匹配结果进行逐条的遍历。

        <!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() 分隔字符串为数组，可以使用正则表达式 
    <!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>

四、应用

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

    • 用正则表达式进行表单验证是正则表达式最重要的实际应用
      <!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>

  • 重点内容文章来源地址https://www.toymoban.com/news/detail-653515.html

    • 元字符、量词、方括号表示法
    • 正则表达式和字符串的常用方法

到了这里，关于学习笔记整理-正则表达式-01-认识正则的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Python进阶知识：整理6 -＞ 正则表达式

    Python进阶知识：整理6 -＞ 正则表达式

    2024年01月19日
    浏览(35)

  • 正则表达式整理（BRE、ERE、PCRE）

    学完正则表达式后，发现vscode的查找替换功能支持正则表达式，经常在vscode上实践，用得也越来越顺手，一度觉得自己的正则表达式玩的挺溜的。 但每每在 grep ， find ， vim 这些工具中使用正则表达式时，却总有各种问题，在vscode上正常工作的正则表达式突然不起作用，甚至

    2024年02月12日
    浏览(18)
  • Python学习笔记：正则表达式、逻辑运算符、lamda、二叉树遍历规则、类的判断

    Python学习笔记：正则表达式、逻辑运算符、lamda、二叉树遍历规则、类的判断

    序号 实例 说明 1 . 匹配任何字符(除换行符以外) 2 d 等效于[0-9]，匹配数字 3 D 等效于[^0-9]，匹配非数字 4 s 等效于[trnf]，匹配空格字符 5 S 等效于[^trnf]，匹配非空格字符 6 w 等效于[A-Za-z0-9]，匹配单字字符 7 W 等效于[^A-Za-z0-9]，匹配非单字字符 8 [ab]cdef 匹配acdef或bcd

    2024年02月11日
    浏览(47)

  • 老夫的正则表达式大成了，桀桀桀桀！！！【Python 正则表达式笔记】

    特殊字符 .^$?+*{}[]()| 为特殊字符，若想要使用字面值，必须使用 进行转义 字符类 [] [] 匹配包含在方括号中的任何字符。它也可以指定范围，例： [a-zA-Z0-9] 表示a到z，A到Z，0到9之间的任何一个字符 [u4e00-u9fa5] 匹配 Unicode 中文 [^x00-xff] 匹配双字节字符（包括中文） 在 [] 中

    2024年02月04日
    浏览(45)

  • Python正则表达式之学习正则表达式三步曲

            正则表达式描述了一种字符串匹配的模式，可以用来检查一个串的有无某子串，或者做子串匹配替换，取出子串等操作。也可以说正则表达式就是字符串的匹配规则，也可以理解为是一种模糊匹配，匹配满足正则条件的字符串。         1、数据验证（eg:表单验

    2024年02月15日
    浏览(45)

  • 正则表达式笔记

    /你的正则表达式写在这里/ 1?        1出现0次或1次 1*        1出现0次或多次 1+        1出现1次或多次 1{2}        1出现了2次 1{2,3}        1出现了2到3次 1{2,}        1出现了2次及以上 (5555){1}        5555出现了1次 (dog|cat)        dog或者cat [a-zA-Z]   

    2024年02月10日
    浏览(32)

  • 《Python数据分析技术栈》第03章 01 正则表达式（Regular expressions）

    《Python数据分析技术栈》第03章 01 正则表达式（Regular expressions） A regular expression is a pattern containing both characters (like letters and digits) and metacharacters (like the * and $ symbols). Regular expressions can be used whenever we want to search, replace, or extract data with an identifiable pattern, for example, dates, posta

    2024年01月20日
    浏览(42)

  • python正则表达式笔记2

    由 \\\'\\\' 和一个字符组成的特殊序列在以下列出。 如果普通字符不是ASCII数位或者ASCII字母，那么正则样式将匹配第二个字符。比如，$ 匹配字符 \\\'$\\\'. number 匹配数字代表的组合。每个括号是一个组合，组合从1开始编号。 比如 (.+) 1 匹配 \\\'the the\\\' 或者 \\\'55 55\\\', 但不会匹配 \\\'thethe\\\'

    2024年02月09日
    浏览(32)

  • python正则表达式笔记1

    最近工作中经常用到正则表达式处理数据，慢慢发现了正则表达式的强大功能，尤其在数据处理工作中，记录下来分享给大家。 一、 正则表达式语法介绍 正则表达式（或 RE）指定了一组与之匹配的字符串；模块内的函数可以检查某个字符串是否与给定的正则表达式匹配（或

    2024年02月09日
    浏览(32)
  • 机器学习与数据科学-专题1 Python正则表达式-【正则表达式入门-1】

    机器学习与数据科学-专题1 Python正则表达式-【正则表达式入门-1】

    为了完成本关任务，你需要掌握： 在 Python 中使用正则表达式； 最基础正则表达式； 正则匹配函数。 在 Python 中使用正则表达式 正可谓人生苦短，我用 Python。Python 有个特点就是库非常多，自然拥有正则匹配这种常见的库，并且此库已经嵌入在 Python 标准库中，使用起来非常

    2024年01月22日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包