《轻松学web前端开发入门与实战（视频彩色版）》读书笔记（一）正则表达式-CSDN博客

本文链接：https://blog.csdn.net/2301_76995272/article/details/132083650

知识点1 正则表达式概述

正则表达式可以匹配某些特定的数据，如常见的手机号呀，邮箱地址呀，IP地址呀等等，我们还能使用正则表达式从一大段文字从匹配我们需要的一小段文字。也可以把正则表达式想象成word软件里的查找和替换功能，它能帮助我们找到需要的文字。

在实际项目开发中，正则表达式是很常用的一个技术，经常用于表单验证，如

（1）必填项验证。表单中的必填项在提交到服务器之前是不允许为空的，例如注册表单的用户名和密码等选项。

上面这个表单，如果没有输入手机号码，它会提示“手机号码不能为空”，这里就用到了正则表达式来验证用户是否输入了数据。

【功能实现】通过验证表单控件的value值是否为空可以验证必填项。

（2）长度验证。像下面这个表单，如果输入的密码长度过长或过短，系统就会给出提示，并让用户重新输入。

表单中的某些控件的数据输入内容的长度有时必须在一个范围内，像上面的密码呀，还有手机号码，用户昵称等。

【功能实现】通过验证表单value值的length属性可以验证长度。

（3）特殊内容格式验证。表单中的某些控件的数据输入格式是有要求的，例如有的只能输入数字，有的只能输入字母，有的则要求输入数字+字母+特殊符号，，而且必须要符号一定的格式（如用户的密码，通常是字母和数组或特殊符号组合）。

【功能实现】一般可以通过正则表达式来验证特殊内容的格式。

（4）验证两个表单控件是否相等。表单中的某些控件输入数据的值必须相同，例如表单中的设置密码和确认密码。为了使用户对密码确认无误，一般要求两次输入的密码相同。

如果两个密码框输入的值都是一样的，那么系统不会给任何提示。如果第2个密码框和第1个密码框输入的值不相同，则给出提示信息“密码不一致，请验证后重新输入”。

【功能实现】可以通过验证表单控件的value值是否相等来实现。

（5）电子邮箱的格式验证。电子邮箱的格式属于特殊内容的验证，但电子邮箱的格式比较常用。例如大多数注册的用户信息中都包含电子邮箱地址，如果用户忘记密码，可以通过电子邮箱找回密码。

【功能实现】一般使用正则表达式来验证电子邮箱的格式。

表单验证是对一个字符串是否符合一种特定格式进行判断，这种特殊规则就是前面所说的正则表达式。也就是说，正则表达式通常用来检索、替换那些符合某个模式（规则）的文本。

知识点2 正则表达式的组成

正则表达式由两种基本字符类型组成：普通字符和元字符。普通字符只能够匹配字符串中与它们本身相同的字符，例如所有的字母和数字。元字符是指哪些在正则表达式中具有特殊意义的专用字符。

例如匹配“ab开头，后面紧跟数字字符串”的正则表达是“ab\d+”，其中ab就是普通字符串，这里用于匹配以ab开头的字符串，\d表示匹配数字，代表0-9，+表示前面的字符可以出现1次或者1次以上（在这里就是匹配1位或1位数字以上的字符串）

在上面的测试中，这个正则表达式就可以匹配到ab123 ，而不能匹配到ac226,ae789001等字符串。

/ab\d+/ ：匹配以字母ab开头，后面跟上1位或者多位的数字的字符串，上面例子中符合这个条件的也就只有ab123了。

知识点3 正则表达式实例

定义一串包含数字和字母和字符串，利用正则表达式把里面的数字挑选出来。首先，我们先来定义一串包含数字和字母的字符串。

接下来，我们要做的就是把字符串中的数字挑选出来：2023 8 3 15 43.

可以这样来定义正则表达式：

匹配结果如下：

可以看见，数字都被挑选出来了！分析这个正则表达式，\d表示匹配任意一个数字，注意了是任意一个！+表示一个或者多个字符；前后的斜杠表示正则表达式的开始和结束；斜杠后面的g表示全局查找（也就是在整段文本中找到所有符号要求的子字符串，而不是找到第一个符合要求的子字符串后就不再找了）

如果把+号取消掉，是这样的

可以看见，第一个数字就是不是连着的了，而是单独连续出现的。接下来，在javascript代码里来演示这个实例。

关键代码截图

运行效果如下：

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式的概述</title>
    <script>
        window.onload = function(){
            // 页面加载完成后执行该匿名函数(当页面加载完成后，执行函数里的代码)
            var str = "I Like python language and javascript ! 今天是2023年8月3日，现在是北京时间15:43分。";
            // 定义待匹配的字符串
            document.write("源串如下<br>" + str);
            // 输出待匹配的字符串
            var pattern = /\d+/g;
            // 编写正则表达式，匹配字符串中的所有数字子字符串
            var strArray = str.match(pattern);
            // 匹配字符串，返回一个数组，数组储存的是匹配到的子字符串（找到了需要的数据就返回给这个数组）
            document.write("匹配到的数字如下:<br>");
            // 输出提示语
            for(i=0;i<strArray.length;i++){
                document.write(strArray[i] + "<br>");
                // 遍历数组，输出匹配到的字符串
            }
            document.write("匹配结果:" + strArray.length + "个数据!");
        }
    </script>
</head>
<body>

</body>
</html>

知识点4 普通字符

前面也提到了普通字符，普通字符就是只能匹配与自身相同的字符。正则表达式中常用的普通字符表如下：

字符	匹配说明
字母或数字	自身对应的字母或数字
\f	换页符
\n	换行符
\r	回车
\t	制表符
\.	一个.（点）
\*	一个*（星号）
\+	一个+（加号）

小案例：定义一串包含数字和字符的字符串，利用正则表达式把其中带有Javascript的单词挑选出来。

编写正则表达式：

匹配结果：

正则表达式分析：两个斜线分别表示正则表达式的开始和结束，中括号里的a-z表示匹配全部小写字母.

看上图，全部小写字母都被匹配了。A-Z同理，是全部匹配文本中的大写字母。

现在，小写字母和大写字母都被匹配到了。接下来，需要加上*号，表示重复前面的字符0个或者多个，也就是让字母连串，连成单词。

然后从这些匹配到的单词中，挑选符合条件的javascript。

最后添加上“”+号，表示一个或者多个字符。

通过javascript脚本语言来演示这个实例。核心代码如下：

运行效果截图：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script>
        window.onload = function(){
            // 页面加载完成后就执行该函数体里的代码
            var str = "This javascript language! No! It's javascript langauge.";
            // 定义一串文本，里面包含要匹配的子字符串
            var pattern = /[a-zA-Z]*javascript+/g;
            // 定义正则表达式
            var strArray = str.match(pattern);
            // 匹配正则表达式，返回一个数组
            document.write("源字符串<br>" + str);
            // 输出提示语
            document.write("<br>匹配到的字符串如下:" + "<br>");
            for(i=0;i<strArray.length;i++){
                // 遍历数组
                document.write(strArray[i] + "<br>");
                // 输出匹配到的字符串
            }

        }
    </script>
</head>
<body>

</body>
</html>

知识点5 元字符

元字符是指在正则表达式中有特殊含义的字符，元字符可以分为两种：一种是用来匹配文本的，另外一种是正则表达式的语法要求的元字符。（如斜杠//，\d,[],{}等）

1.中括号[]

正则表达式中的元字符“【】”用来匹配括号中字符集合中的任意一个。例如正则表达式[Pp]ython可以匹配字符串Python或者python。

再如,r[aou]t，它可以匹配rat,rot,rut。

正则表达式还可以在括号中使用连接字符“-”来指定字符的区间，例如正则表达式[a-z]就是表示所有的小写字母，[0-9]表示一位数字,[A-Z]表示所有的大写字母.。

也可以在中括号中指定多个区间。例如正则表达式[0-9A-Za-z]就表示匹配一个数字或者大写字母或者小写字母。

要想匹配除了指定区间之外的字符，可以在左边的括号和第一个字符之间使用“^”字符。

如上图中,表达式[^0-9]就表示匹配除了数字以外的字符（这里就是包含字母和空格）

2.常用的元字符。

常见常用的元字符如下表所示：

代码	说明
.	匹配除换行符以外的任意一个字符
\w	匹配任意一个字母或数字或下划线，相当于[A-Za-z0-9_]
\s	匹配任意一个空白，相当于[\f\n\r\t\v]
\S	匹配任意一个非空白
\d	匹配任意一个数字，等价于[0-9]或者[0123456789]
\D	匹配任意一个非数字字符，等价于[^0-9]
\b	匹配单词的开始或结束
^	匹配字符串的开始
$	匹配字符串的结束

3.特殊元字符。一些元字符在正则表达式中有特殊含义，所以这些字符无法用来代表其本身。在元字符前面加上一个反斜杠可以对其进行转义，这样得到的转义序列将匹配到字符本身，而不是其所代表的特殊元字符的含义。

另外，在进行正则表达式搜索的时候，经常会遇到需要对原始文本中的非打印空白字符进行匹配的情况，例如有时候就需要把所有的换行符找出来，或者需要把所有的制表符找出来，这类字符很难被输入到一个正则表达式中，这时可以使用特殊元字符进行输入。

字符	说明
\b	回退（并删除）一个字符
\t	制表符(table键）
\n	换行符

4.复制字符。我们可以使用复制字符来表达字符的重复模式，例如让前面的一个字符重复一遍或者n遍。

字符	说明
*	重复0次或者更多次
+	重复1次或者多次
？	重复0次或者1次
{n}	重复n次
{n,}	重复n次或更多此
{n,m}	重复n次到m次

下面定义一个数组，里面储存一些电话号码，然后使用正则表达式把里面的电信手机号挑选出来。

在编写正则表达式前，需要对待匹配的字符串进行分析。首先，电信手机号都是11位数字，正则表达式可以用(\d){11}实现。其次，电信号码段的前3个数字都是133,153,180,181,189开头，可以这样来设计：1[35]3这样可以匹配到133开头的电话号码或153开头的电话号码。然后18[019]可以匹配到180,181,189开头的电话号码。完整的正则表达式应该是这样的：

正则表达式分析：第一组(1[35]3\d{8}）可以匹配133开头的后面跟上8位数字的字符串

或者匹配135开头的后面跟上8位数字的字符串。

第二组(18[019]\d{9}可以匹配到180开头的后面跟上9位数字的字符串，或者181开头的后面跟上9位数字的字符串，或者189开头的后面跟上9位数字的字符串)

中间的竖线“|”表示待匹配的意思，也有或者的意思。第一组匹配完成后，就会执行第二组的正则表达式。

接下来，在javascript脚本代码里来演示这个案例。

运行效果如下：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script>
        window.onload = function(){
            // 页面加载完成后执行此函数
            var str = new Array("13312345678","1001011","1001086","13712345678","18012345678","189123456789","15312345677","181123456789");
            // 定义待匹配的电话号码数组
            var pattern = /(1[35])3\d{8}$|(18[019]\d{8})/g;
            // 匹配以133或者153开头的11位手机号码，或者180或181或189开头的11位手机号码
            document.write("手机号码如下<br>");
            for(i=0;i<str.length;i++){
                document.write(str[i] + "<br>");
            }
            document.write("是电信号码的有:<br>");
            for(i=0;i<str.length;i++){
                if(pattern.test(str[i])){
                    document.write(str[i] + "<br>");
                }
            }

        }
    </script>
</head>
<body>

</body>
</html>

相关链接：《轻松学web前端开发入门与实战（视频彩色版）》读书笔记（二）正则表达式2