正则表达式

最新推荐文章于 2024-05-20 10:35:51 发布

LM_AC

最新推荐文章于 2024-05-20 10:35:51 发布

阅读量344

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Myair_AC/article/details/77847223

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

正则表达式的定义

JavaScript 中的正则表达式用 RegExp 对象表示，可以使用 RegExp() 构造函数来创建 RegExp 对象，不过 RegExp 对象更多是通过字面量的语法来创建，使用下面类似 Perl 的语法，就可以创建一个正则表达式。例如：

// 推荐写法
var expression = / pattern / flags ;

// 不推荐写法
var expression = new RegExp(pattern, flags);
其中的模式（pattern）部分，是包含在一对斜杠 / 之间的字符，可以是任何简单或复杂的正则表达式，可以包含字符类、限定符、分组、向前查找以及反向引用。每个正则表达式都可带有一或多个标志（flags），用以标明正则表达式的行为。正则表达式的匹配模式支持下列3个标志。

g：表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止；
i：表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
m：表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。
因此，一个正则表达式就是一个模式与上述3个标志的组合体。不同组合产生不同结果，如下面的例子所示。

// 匹配字符串中所有”at”的实例
var pattern1 = /at/g;

// 匹配第一个”bat”或”cat”，不区分大小写
var pattern2 = /[bc]at/i;

// 匹配所有以”at”结尾的3个字符的组合，不区分大小写
var pattern3 = /.at/gi;
与其他语言中的正则表达式类似，模式中使用的所有元字符都必须转义。正则表达式中的元字符包括：

( [ { \ ^ $ | ) ? * + . ] }
这些元字符在正则表达式中都有一或多种特殊用途，因此如果想要匹配字符串中包含的这些字符，就必须对它们进行转义。下面给出几个例子。

// 匹配第一个”bat”或”cat”，不区分大小写
var pattern1 = /[bc]at/i;

// 匹配第一个” [bc]at”，不区分大小写
var pattern2 = /[bc]at/i;

// 匹配所有以”at”结尾的3个字符的组合，不区分大小写
var pattern3 = /.at/gi;

// 匹配所有”.at”，不区分大小写
var pattern4 = /.at/gi;
<以上转自https://juejin.im/post/582455e467f3560058c6641e>
1 . 定义：一个正则表达式就是由普通字符以及特殊字符（称为元字符）组成的文字模式。
2 . 用途：
1. 数据有效性验证 (例如：校验用户名和密码)
2. 查找和替换（replace）
3 . 常用方法：字符串调用replace(); 替换
字符串调用match()
正则对象： RegExp 调用test()
4 .常用规则：正则表达式以^开头,以&结束
［0-9］:匹配0到9的数字
［A-Z］:匹配A到Z的字符
［a-z］:匹配a到z的字符
［A-z］:匹配A到z的字符
\d :查找数字字符
\D :查找非数字字符
\w : 查找单词字符
\W :查找非单词字符
\s :查找空白字符
\S :查找非空白字符
5 .规则中的内容出现的次数：
n+匹配至少有一个n的字符串
n*匹配0或多个n的字符
n?匹配0或1个的字符
n{X}匹配包含X个n的字符序列的字符串
n{X,Y}匹配包含X个到Y个n的字符序列的字符串
n{X,}匹配至少X个n的字符了序列的字符串
6 . A到z中间还有一个下划线,
7 .看代码之前先搞懂匹配数据时的^和&:
这里写图片描述
注意看代码注释,先来测试的test()函数

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function test1() {
                /*需求1：用户名必须至少是6位的字母(小写)*/
                /*
                 * 1.查找用户名控件
                 * 2.获得用户名控件上输入的值
                 * 3.校验用户名值
                 * 4.根据校验的结果进行对应的提示。
                 *     成功：用户名可以正常使用
                 *     失败：用户名格式不正确，必须至少是6位的字母
                 */
                var username = document.getElementById("username");
                var usernamValue = username.value;

                /*  A-Z出现0次或者多次     a-z  至少6个  */
                /* var  reg=new RegExp("^[A-Z]*[a-z]{6,}$");*/
                var reg = new RegExp("^[a-z]{6,}$");
                var nameResult = reg.test(usernamValue);

                /*查找用户名错误提示控件*/
                var error_name = document.getElementById("error_name");
                if(nameResult) {
                    /*innerHTML：给指定元素赋值文本内容*/
                    error_name.innerHTML = "用户名可以正常使用";
                    /*通过调用css样式的属性去更改颜色*/
                    error_name.style.color = "green";
                } else {
                    error_name.innerHTML = "用户名格式不正确，必须至少是6位的小写字母";
                    error_name.style.color = "red";
                }


                /*需求2：密码必须是6-8位的数字*/
                var password = document.getElementById("password");
                var pwdValue = password.value;
                var reg1 = new RegExp("^[0-9]{6,8}$");
                var pwdResult = reg1.test(pwdValue);
                /*查找密码错误提示控件*/
                var error_pwd = document.getElementById("error_pwd");
                if(pwdResult) {
                    error_pwd.innerHTML = "密码可以正常使用";
                    error_pwd.style.color = "green";
                } else {
                    error_pwd.innerHTML = "密码格式不正确，必须是6-8位的数字";
                    error_pwd.style.color = "red";
                }
                /*需求3：校验邮箱：*/

                var email = document.getElementById("email");
                var emailValue =email.value;

                /*需求：as_s@aa.com
                 * [A-z] 包含了下划线
                 * 
                 */
                var reg2 = new RegExp("^[A-z]+\@[a-z]{3}\.[a-z]{3}$");
                var  emailResult = reg2.test(emailValue);
                /*查找邮箱错误提示控件*/
                var error_email = document.getElementById("error_email");
                if(emailResult){
                    error_email.innerHTML="邮箱可以正常使用";
                    error_email.style.color="green";
                }else{
                    error_email.innerHTML="邮箱格式不正确";
                    error_email.style.color="red";
                }

                }
        </script>
    </head>

    <body>

        <form action="#" method="get">
            用户名：<input type="text" name="username" id="username" /><span id="error_name"></span><br> 密码：
            <input type="text" name="password" id="password" /><span id="error_pwd"></span><br> 邮箱：
            <input type="text" name="email" id="email" /><span id="error_email"></span><br>
            <input type="button" value="登录" onclick="test1()" /><br>
        </form>


    </body>

</html>

正则表达式对象有两种定义方式,上面的代码是用new new出来的,现在看另一种方式:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="#" method="get">
        <input id="input1" type="text" style="width:200px;height: 100px;"/>
        <input type="button" onclick="test2()">
        <span id="span1">

        </span>
        </form>
    </body>
    <script>
        function test2(){
        var ex = /^[0-9]{6,8}$/;
        var input1 = document.getElementById("input1");
        var value = input1.value;
        var span = document.getElementById("span1");
        var result = ex.test(value);
        if(result){
            span.innerHTML="正确";
        }else{
            span.innerHTML="错误";
        }
        }

    </script>
</html>

总结,对于var ex = /^[0-9]{6,8}$/;照样是^开头,&结束.var expression = / pattern / flags ;的flags在这里不写.注意什么时候用^开头和&结束,用于在测试input输入框数据是否符合规范的时候是用到的,但是在下面的replace函数,没用到.继续看.

8 .replace函数,(查询并替换):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

    </body>
    <script>
        var s="wwwsdddfwwrg";
        var s1 = s.replace(/w/g, "2");
            alert(s1);

    </script>
</html>

上面的代码会把s字符串的w全部替换为2.另外一种方式是new出来的正则表达式作为replace的第一个参数,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

    </body>
    <script>
        var s="wwwswwef";
        var reg = new RegExp(/w/g);
        //把上面的那行代码写成var reg = new RegExp("w","g");这种形式,也是可以的.RegExp()构造函数的第一个参数是要替换的字符串,注意是字符串,后面是规则.
        var s1 = s.replace(reg, "2");
            alert(s1);

    </script>
</html>

9 . 还要牵扯到转移字符,在需要转移的字符前面加 \ 线

LM_AC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正则表达式

正则表达式的定义JavaScript 中的正则表达式用 RegExp 对象表示，可以使用 RegExp() 构造函数来创建 RegExp 对象，不过 RegExp 对象更多是通过字面量的语法来创建，使用下面类似 Perl 的语法，就可以创建一个正则表达式。例如：// 推荐写法 var expression = / pattern / flags ;// 不推荐写法 var expression
复制链接

扫一扫

专栏目录