正则表达式

最新推荐文章于 2021-09-26 12:46:32 发布
最新推荐文章于 2021-09-26 12:46:32 发布
阅读量489 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bulid_evolto/article/details/99485246
版权

正则表达式体验

目标

学习正则表达式的作用和好处

正则表达式介绍

[外链图片转存失败(img-ptVhokKV-1565706473345)(/)]

请编写一个手机号码规则?

  1. 第一位是1

  2. 第二位345789中的一位

  3. 后面9个0到9的数字

以上是使用中文描述规则，需要自己使用if…else去编程，很麻烦。

什么是正则表达式

正则表达式也称为规则表达式

"1[345789][0-9]{9}"
正则表达式的使用
  1. 定义正则表达式对象
  2. 调用方法去匹配
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式体验</title>
</head>
<body>
<script>
    // 1.定义正则表达式
    var reg = new RegExp("^1[34578][0-9]{9}$");
    // 2.调用方法去匹配字符串
    var b = reg.test("13838389438");
    alert("是否是手机号: " + b);
</script>
</body>
</html>
正则表达式作用
  1. 判断一个字符串是否符合指定的规则
  2. 使用正则表达式去一个字符串中查找符合规则的字符串
正则表达式的好处

比我们直接编写if…else去匹配简单很多

小结

说出正则表达式的好处?

比我们直接编写if…else去匹配简单很多

创建正则表达式(重点)

目标

学习创建正则表达式的2种方式

方式1:实例创建方式

RegExp是JS中一个内置对象

var 变量名 = new RegExp("正则表达式规则");
方式2:字面量创建方式
var 变量名 = /正则表达式规则/;
演示代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建正则表达式的2种方式</title>
</head>
<body>
<script>
    // 方式1:实例创建方式
    // RegExp是JS中一个内置对象
    var reg = new RegExp("^\\d{3}" + "1$");

    // 方式2:字面量方式
    var reg2 = /^\d{3}$/;
</script>
</body>
</html>
两种方式的区别
  1. 实例创建方式：正则表达式是做为字符串参数出现的，可以进行字符串拼接，相对更加灵活。但\等字符需要转义。
  2. 字面量创建方式：本身是一个正则表达式对象，不能拼接字符串，\等字符不需要转义。

小结

创建正则表达式的两种方法？

实例创建方式
var reg1 = new RegExp("规则");

字面量创建方式
var reg2 = /规则/;

正则表达式的规则

目标

了解正则表达式的规则

正则表达式的规则
符号作用
[xyz]中括号表示从里面取一个，匹配x或y或z
[a-z]-表示范围。表示a-z中的一个字母
[^xyz]在中括号中^ 符号，表示取反。表示：除了xyz之外的字母
\d数字：相当于[0-9]
\w单词：相当于[a-zA-Z0-9_]
.匹配任意字符，相当于通配符。如果要匹配点号，需要转义。 \.
()表示1组
数量词
{n}表示前面的字符出现n次
{n,}表示前面的字符出现大于等于n次
{n,m}表示前面的字符出现大于等于n次，小于等于m次
+表示前面的字符出现1~n次
*****表示前面的字符出现0~n次
?表示前面的字符出现0~1次
|表示多个单词之间选择一个，或者
边界匹配器
^表示开头
$表示结尾

这些规则在所有的编程语言中都是一样的

正则表达式的举例
正则表达式匹配字符串
\d{3}在JS中默认是模糊匹配，包含3个数字即可：a123b
^\d{3}匹配以3个数字开头的字符串，比如：123b
\d{3}$匹配以3个数字结尾的字符串，比如：a123
^\d{3}$表示严格匹配，必须是3个数字的字符串，比如：123
^ab{2}$匹配a后面出现2个b的字符串，比如：abb
^ab{2,}$匹配a后面至少出现2个b的字符串，比如：abb 或 abbb 或 abbbb
^ab{3,5}$匹配a后面出现3到5个b的字符串，比如：abbb或abbbb或abbbbb
^ab+$匹配a后面出现1到n个b的字符串，比如：ab 或 abb 或 abbb
^ab*$匹配a后面出现0到n个b 的字符串，比如：a 或 ab 或 abbb
^ab?$匹配a后面出现0到1次b的字符串，比如：a 或 ab
hi|hello匹配字符串里包含hi或hello的字符串
(b|cd)ef匹配字符串包含 bef或cdef的字符串
^.{3}$匹配任意三个字符的字符串
[^a-zA-Z]^在中括号中代表取反，匹配⽆无字母的任意⼀一个字符串
匹配模式

[外链图片转存失败(img-AOnzli3c-1565706473349)(/)]

正则表达式的方法

[外链图片转存失败(img-xhMknl4e-1565706473349)(/)]

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    //i表示匹配模式，表示忽略大小写
    //var reg = new RegExp("abc","i");

    var reg = /abc/i;
    document.write(reg.test("ABC") + "<br/>");
</script>
</body>
</html>
小结

正则表达式规则？

符号作用
[xyz]匹配x或y或z
\d数字：相当于[0-9]
\w单词：相当于[a-zA-Z0-9_]
.匹配任意字符，相当于通配符。如果要匹配点号，需要转义。 \.
()表示1组
数量词
{n}表示前面的字符出现n次
{n,}表示前面的字符出现大于等于n次
{n,m}表示前面的字符出现大于等于n次，小于等于m次
+表示前面的字符出现1~n次
*****表示前面的字符出现0~n次
?表示前面的字符出现0~1次
|表示多个单词之间选择一个，或者
边界匹配器
^表示开头
$表示结尾

案例：使用正则表达式校验注册表单

目标

[外链图片转存失败(img-wEOqMRzx-1565706473349)(/)]

案例需求

用户注册，需要进行如下验证，请在JS中使用正则表达式进行验证。

1.用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
2.手机号：/^1[34578]\d{9}$/
案例分析
  1. 得到文本框中输入的值
  2. 创建正则表达式
  3. 如果不匹配，在后面的span中显示错误信息，返回false
  4. 如果匹配，在后面的span中显示一个打勾图片，返回true
  5. 写一个验证表单中所有的项的方法，所有的方法都返回true，这个方法才返回true.
onsubmit事件说明

[外链图片转存失败(img-S750CanF-1565706473349)()]

代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>验证注册页面</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font-size: 12px;
            line-height: 20px;
        }
        .main {
            width: 525px;
            margin-left: auto;
            margin-right: auto;
        }
        .hr_1 {
            font-size: 14px;
            font-weight: bold;
            color: #3275c3;
            height: 35px;
            border-bottom-width: 2px;
            border-bottom-style: solid;
            border-bottom-color: #3275c3;
            vertical-align: bottom;
            padding-left: 12px;
        }
        .left {
            text-align: right;
            width: 80px;
            height: 25px;
            padding-right: 5px;
        }
        .center {
            width: 280px;
        }
        .in {
            width: 130px;
            height: 16px;
            border: solid 1px #79abea;
        }

        .red {
            color: #cc0000;
            font-weight: bold;
        }

        div {
            color: #F00;
        }

        #su,#sm {
            color: red;
        }
    </style>
    <script type="text/javascript">
    </script>
</head>

<body>
<form action="" method="post" id="myform" onsubmit="return checkAll();">
    <table class="main" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td>
        </tr>
        <tr>
            <td class="hr_1">新用户注册</td>
        </tr>
        <tr>
            <td style="height:10px;"></td>
        </tr>
        <tr>
            <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <!-- 不能为空， 输入长度必须介于 5 和 10 之间 -->
                        <td class="left">用户名：</td>
                        <td class="center">
                            <input id="user" name="user" type="text" class="in" onblur="checkUser()"/>
                            <span id="su"></span>
                            <!--<span id="su">用户名不正确</span>-->
                            <!--<span id="su"><img src="img/gou.png" width="15px"/></span>-->
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 输入长度大于6个字符 -->
                        <td class="left">密码：</td>
                        <td class="center">
                            <input id="pwd" name="pwd" type="password" class="in" />
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 与密码相同 -->
                        <td class="left">确认密码：</td>
                        <td class="center">
                            <input id="repwd" name="repwd" type="password" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 邮箱格式要正确 -->
                        <td class="left">电子邮箱：</td>
                        <td class="center">
                            <input id="email" name="email" type="text" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 -->
                        <td class="left">手机号码：</td>
                        <td class="center">
                            <input id="mobile" name="mobile" type="text" class="in" onblur="checkMobile()"/>
                            <span id="sm"></span>
                            <!--<span id="sm">手机号不正确</span>-->
                            <!--<span id="sm"><img src="img/gou.png" width="15px"/></span>-->
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 要正确的日期格式 -->
                        <td class="left">生日：</td>
                        <td class="center">
                            <input id="birth" name="birth" type="text" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">&nbsp;</td>
                        <td class="center">
                            <input name="" type="image" src="img/register.jpg" />
                        </td>
                    </tr>
                </table></td>
        </tr>
    </table>
</form>

<script>
    // 检测用户名是否正确
    function checkUser() {
        // 1.得到文本框中输入的值
        var userName = document.getElementById("user").value;
        // 2.创建正则表达式
        // 1.用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
        var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
        var b = reg.test(userName);
        if (b) {
            // 4.如果匹配，在后面的span中显示一个打勾图片，返回true
            document.getElementById("su").innerHTML = "<img src='img/gou.png\' width='15px'/>";
        } else {
            // 3.如果不匹配，在后面的span中显示错误信息，返回false
            document.getElementById("su").innerHTML = "用户名不正确";
        }

        return b;
    }
    
    
    // 检测手机号
    function checkMobile() {
        // 1.得到文本框中输入的值
        var mobile = document.getElementById("mobile").value;
        // 2.创建正则表达式
        var reg = /^1[3456789][0-9]{9}$/;
        var b = reg.test(mobile);
        if (b) {
            // 4.如果匹配，在后面的span中显示一个打勾图片，返回true
            document.getElementById("sm").innerHTML = "<img src=\"img/gou.png\" width=\"15px\"/>";
        } else {
            // 3.如果不匹配，在后面的span中显示错误信息，返回false
            document.getElementById("sm").innerHTML = "手机号不正确";
        }

        return b;
    }
    
    // 检测合格才提交
    function checkAll() {
        return checkUser() && checkMobile();
    }
</script>
</body>
</html>

小结

  1. 正则表达式验证字符串的方法是什么？

    reg.test(“字符串”);

  2. 表单提交的时候会激活哪个事件？

    onsubmit = “return true” 提交

    onsubmit = “return false” 不提交

罪恶的拓海
关注
正则表达式大全
09-04 956
验证数字的正则表达式集  验证数字：^[0-9]*$  验证n位的数字：^\d{n}$  验证至少n位数字：^\d{n,}$  验证m-n位的数字：^\d{m,n}$  验证零和非零开头的数字：^(0|[1-9][0-9]*)$  验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$  验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$  验证非零
正则表达式(First Day)
weixin_52307122的博客
12-28 1441
正则表达式内容学习
正则表达式（一）
ygl6150373的博客
02-28 305
public class RegexDemo { /**  * 对qq号码进行校验  * 要求：5-15,0不能开头只能是数字  */ public static void main(String[] args) { String qq="360468490"; String regex="[1-9][0-9]{4,14}"; boolean flag=qq.matches(r
SQL 正则表达式及mybatis中使用正则表达式
12-13
mysql 提供的模式匹配的其他类型是使用扩展正则表达式。 当你对这类模式进行匹配测试时，使用REGEXP和NOT REGEXP操作符(或RLIKE和NOT RLIKE，它们是同义词)。 扩展正则表达式的一些字符是： “.”匹配任何单个的...
正则表达式必知必会v_1.0.pdf
01-02
"正则表达式必知必会" 正则表达式是一种强大的文本处理工具，广泛应用于各个领域。下面是对正则表达式的详细解释： 正则表达式的用途 正则表达式主要用于处理文本，提供了两大主要功能：查找和替换。查找功能允许...
wps表格excel正则工具，excel正则表达式替换/匹配/查找/搜索/提取数字
最新发布
01-19
让 Office Excel、WPS 表格支持正则表达式的免费插件：「Excel 正则工具」顾名思义，需要使用 “正则表达式（PCRE）” 的知识来进行操作，对于完全没有接触过正则的朋友也许有一定的入门门槛，但正则实在是太过强大...
JavaScript正则表达式
01-08
1、正则表达式是描述字符模式的对象，正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。 2、String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。 3、...
PostgreSQL 正则表达式 常用函数的总结
10-19
正则表达式是处理字符串模式匹配的强大工具，PostgreSQL对正则表达式的处理能力允许用户在数据库层面对字符串进行复杂的搜索和修改。本篇总结将介绍PostgreSQL中与正则表达式相关的常用函数，这些函数可以帮助数据库...
正则表达式——正则入门
勤奋猫的博客
03-04 1805
正则表达式——正则入门 正则测试地址：https://regex101.com/ 先从一个例子开始正则表达式。 书写一个匹配手机号的正则表达式，为了方便讨论，假定手机号是1开头，第二位只能是3、5、8中的其中一个，总共11位的数字，形如13xxxxxxxxx。 匹配手机号的正则表达式为：^1[358]\d{9}$，下面介绍此正则表达式中的各个符号的含义。 符号含义简介 ^:表示字符串的开头，后面紧接着1，表示匹配的字符串要以"1"开头。 1:就是匹配“1”本身，^不匹配字符，所以1就是匹配字符串的第一个字符
java 正则 script_java和javascript正则表达式
weixin_33101399的博客
03-05 275
一、javascript正则对象的创建//正则表达式的两种创建方式//1.构造对象//varreg=newRegExp(pattern,modifiers);//2.简便写法//varreg=/pattern/modifiers;//pattern描述了正则表达式的模式//modifiers修饰符用于指定匹配方式//实...
常用正则表达式
LOST JACK
10-13 765
1.校验数字的表达式 1. 数字：^[0-9]*$ 2. n位的数字：^\d{n}$ 3. 至少n位的数字：^\d{n,}$ 4. m-n位的数字：^\d{m,n}$ 5. 零和非零开头的数字：^(0|[1-9][0-9]*)$ 6. 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ 7. 带1-2...
正则表达式RegExr
有点想法的专栏
01-12 1082
文章目录概念举例内容定位符元字符普通字符限定符(出现次数)范围符选择符和分组编程JSJAVA匹配分组替换分割工具 概念 正则表达式是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。它描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。 由一些普通字符和一些元字符（metacharacters）组...
一文学会正则表达式
优派编程
09-26 187
每天与你分享编程知识。 本篇文章将带大家一文搞懂正则表达式 1.什么是正则表达式 正则表达式（Regular Expression） 正则表达式是一种字符串匹配规则，用于字符串匹配。 2.单字符 a-z A-Z 0-9 d匹配0-9任意一个数字 D匹配除0-9以外的任意一个字符 w匹配数字、字母、下划线 W匹配非数字、字母、下划线 s匹配空白字符 S匹配非空白字符 .除了n以外的任意一个字符 []匹配中括号中任意一个字符 [^]匹配除中括号中以外任意一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值