正则表达式

程序员文章站 2022-03-12 21:51:26

...

1.1 正则表达式的作用：

正则表达式的作用：匹配字符串的一种规则，正则表达式的作用主要用于匹配字符串的。

1.2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        /*
            需求：校验手机号
            正则表达式的作用：匹配字符串的一种规则，正则表达式的作用主要用于匹配字符串
         */
        function checkTel(input) {
            //1.获取用户输入的内容
            var content = input.value;
            //2.编写正则表达式校验手机号
            var reg = /^1[34578]\d{9}$/;
            //3.找到span标签
            var span = document.getElementById("msg");
            //4.使用正则校验用户输入的内容
            if(reg.test(content)){
                //符合规则
                span.innerHTML = "<font color='green'>正确</font>";
            }else {
                //不符合规则
                span.innerHTML = "<font color='red'>错误</font>";
            }
        }

    </script>
</head>
<body>
手机号：<input type="text" onblur="checkTel(this)"><span id="msg"></span>
</body>
</html>

1.3 正则表达式的创建方式

1.3.1 方式一：

var reg = /正则表达式/[模式];

1.3.2 方式二：

var reg = new RegExp(“正则表达式”，“匹配模式”);

var reg = /正则表达式/匹配模式；

1.4 正则表达式语法：

字符	描述
^	匹配输入字符串的开始位置
$	匹配输入字符串的结束位置
{n}	恰好n次
{n,}	至少n次
{n,m}	n~m次
+	前面的字符出现1~n次
*	前面的字符出现0~n次
?	前面的字符出现0~1次
\w	单词字符[a-zA-Z0-9]
\d	数字
[a-z]	出现字符的范围是a-z

1.5 正则表达式的语法：

JS正则表达式的方法	说明
boolean test（“字符串”）	如果正则表达式匹配字符串，返回true，否则返回false

1.6 代码演示：

1.6.1 边界匹配器：

正则表达式的常用方法：

正则对象名.test(字符串内容) 使用正则表达式匹配字符串的内容。如果匹配返回true，不匹配返回false

为甚么要使用边界匹配器：

默认情况下正则对象匹配一个字符串的时候，只要字符串内容出现了指定的内容，那么就视为匹配。

边界匹配器：

^ 一个字符串的开始位置

$ 一个字符串的结束位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        //创建字符串
        var str = "Helloabc";

        //创建正则对象
        var reg = /^abc$/;

        alert(reg.test(str));
    </script>
</head>
<body>

</body>
</html>

1.6.2 数量词：（任何字符如果没有数量词的搭配都只能匹配一个字符）

{n} 恰好n次

{n,} 至少n次

{n,m} n~m次

+ 前面的字符出现1-n次

* 前面的字符出现0-n次

？前面的字符出现0-1次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        //定义字符串
        var str = "a";

        //恰好2次
        var reg = /^a{2}$/;
        //至少2次
        reg =/^a{2,}$/;
        //出现1-2次
        reg =/^a{1,2}$/;
        //至少出现1次
        reg = /^a+$/;
        //出现0~n次
        reg = /^a*$/;
        //出现0~1次
        reg=/^a?$/;

        alert(reg.test(str));

    </script>
</head>
<body>

</body>
</html>

1.6.3 范围词：

常见的范围词：
               [a-z]   出现的字符范围是a-z

                \w 单词字符[a-zA-Z0-9_]

                \d 数字[0-9]

                .   任意字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        //定义一个字符串
        var str = "...";

        //出现的字符范围是a-z
        var reg = /^[a-z]+$/;
        //单词字符
        reg = /^\w+$/;
        //数字字符
        reg = /^\d+$/;
        //任意字符 .
        reg=/^\.+$/;
        alert(reg.test(str))
    </script>
</head>
<body>

</body>
</html>

1.7 案例：校验表单

1.7.1 案例需求：

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

用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头

密码：大小写字母和数字6-20个字符

确认密码：两次密码要相同

电子邮箱: 符合邮箱地址的格式 /^\aaa@qq.com\w+(\.[a-zA-Z]{2,3}){1,2}$/

手机号：/^1[34578]\d{9}$/

生日：生日的年份在1900～2009之间，生日格式为1980-5-12或1988-05-04的形式，/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/

1.7.2 案例效果：

正则表达式

完整代码：

<!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;
			}
        </style>
        <script type="text/javascript">
            //校验用户名
            function checkUser() {
                //获取用户名输入的内容
                var content = document.getElementById("user").value;
                //编写正则表达式校验用户名,<!-- 不能为空， 输入长度必须介于 5 和 10 之间 -->
                var reg = /^[A-Z][a-zA-Z0-9]{4,9}$/;
                //找到span标签
                var span = document.getElementById("userSpan");
               //使用正则表达式校验用户输入的内容
                if(reg.test(content)){
                    //校验成功
                    span.innerHTML = "<font color='green'>成功</font>";
                    return true;
                }else {
                    //校验失败
                    span.innerHTML = "<font color='red'>失败</font>";
                    return false;
                }
            }

            //校验邮箱
            function checkEmail() {
                //获取用户输入的内容
                var content = document.getElementById("email").value;
                //编写正则表达式校验 aaa@qq.com
                var reg = /^[a-z1-9][a-z0-9]aaa@qq.com[a-z0-9]{2,}(\.[a-z]{2,3}){1,2}$/i;
                //获取span标签
                var span = document.getElementById("emailSpan");
                //使用正则表达式校验用户输入的内容
                if(reg.test(content)){
                    span.innerHTML = "<font color='green'>成功</font>";
                    return true;
                }else {
                    span.innerHTML = "<font color='red'>失败</font>";
                    return false;
                }

            }

            /*
                一个表单提交的时候，会触发onsubmit事件的，如果触发的事件返回的是true，那么表单运行提交，
                如果提交的事件返回的是false，那么表单不允许提交。
             */
            function checkAll() {
                var useName = checkUser();
                var email = checkEmail();
                if(useName&&email){
                    return true;
                }else {
                    return false;
                }

            }


        </script>
    </head>

    <body>
        <form action="http://www.baidu.com" 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="userSpan"></span>
                            </td>
                        </tr>
                        <tr>
                             <!-- 不能为空， 输入长度大于6个字符 -->
                            <td class="left">密码：</td>
                            <td class="center">
                            <input id="pwd" name="pwd" type="password" class="in" onblur="checkPass()" /><span id="passSpan"></span>
                            </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" onblur="checkEmail"/><span id="emailSpan"></span>
                            </td>
                        </tr>
                        <tr>
                             <!-- 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 -->
                            <td class="left">手机号码：</td>
                            <td class="center">
                            <input id="mobile" name="mobile" type="text" class="in"/>
                            </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>
    </body>
</html>

核心代码提炼：

 <script type="text/javascript">
            //校验用户名
            function checkUser() {
                //获取用户名输入的内容
                var content = document.getElementById("user").value;
                //编写正则表达式校验用户名,<!-- 不能为空， 输入长度必须介于 5 和 10 之间 -->
                var reg = /^[A-Z][a-zA-Z0-9]{4,9}$/;
                //找到span标签
                var span = document.getElementById("userSpan");
               //使用正则表达式校验用户输入的内容
                if(reg.test(content)){
                    //校验成功
                    span.innerHTML = "<font color='green'>成功</font>";
                    return true;
                }else {
                    //校验失败
                    span.innerHTML = "<font color='red'>失败</font>";
                    return false;
                }
            }

            //校验邮箱
            function checkEmail() {
                //获取用户输入的内容
                var content = document.getElementById("email").value;
                //编写正则表达式校验 aaa@qq.com
                var reg = /^[a-z1-9][a-z0-9]aaa@qq.com[a-z0-9]{2,}(\.[a-z]{2,3}){1,2}$/i;
                //获取span标签
                var span = document.getElementById("emailSpan");
                //使用正则表达式校验用户输入的内容
                if(reg.test(content)){
                    span.innerHTML = "<font color='green'>成功</font>";
                    return true;
                }else {
                    span.innerHTML = "<font color='red'>失败</font>";
                    return false;
                }

            }

            /*
                一个表单提交的时候，会触发onsubmit事件的，如果触发的事件返回的是true，那么表单运行提交，
                如果提交的事件返回的是false，那么表单不允许提交。
             */
            function checkAll() {
                var useName = checkUser();
                var email = checkEmail();
                if(useName&&email){
                    return true;
                }else {
                    return false;
                }

            }


        </script>

<form action="http://www.baidu.com" method="post" id="myform" onsubmit="return checkAll()">

 <input id="user" name="user" type="text" class="in" onblur="checkUser()" /><span id="userSpan"></span>

 <input id="email" name="email" type="text" class="in" onblur="checkEmail"/><span id="emailSpan"></span>

正则表达式

Nginx if语句加正则表达式实现字符串截断

Java正则表达式详细解析

EditPlus中通过正则表达式删除文档多余空行

EditPlus中通过正则表达式删除文档多余空行使用指南[图文]

在MySQL中用正则表达式替换数据库中的内容的方法

详解JavaScript正则表达式中的global属性的使用

JavaScript正则表达式中的ignoreCase属性使用详解

JavaScript正则表达式之multiline属性的应用

在JavaScript的正则表达式中使用exec()方法

几个C#常用正则表达式的总结