JavaScript中正则表达式详解

其他 2021-01-26 22:58:30 阅读次数: 0

正则表达式的介绍

    * 正则表达式也叫规则表达式[Regular Expression]，是按照一定的规则组成的一个表达式，主要作用是用来匹配字符串的
    * 正则表达式可以在大多数编程语言中使用
    * 正则表达式的组成:由元字符或者限定符组成的一个式子
    * . 表示的是:除换行符(\n)之外的任意单个字符====>"word23"
    * [] 表示的是:范围，[0-9]表示的是0到9之间任意的一个数====>"234";[100-199]这种写法是错误的，应该改为[1][0-9][0-9]
    * [a-z]表示的是:所有的小写字母中的任意一个;[A-Z]表示的是:所有的大写字母中的任意一个
    * [a-zA-Z]表示的是:所有字母中的任意一个;[0-9a-zA-Z]表示的是:所有数字或者字母中的任意一个
    * []的另一层含义:把正则表达式中元字符的意义去掉====>[.]就表示一个点
    * | 或者 [0-9]|[a-z]表示的是:要么是一个数字，要么是一个小写的字母
    * () 分组，提升优先级 [0-9]|([a-z])|[A-Z]
    * ([0-9])([a-z])([A-Z])三组，从最左边开始计算
    * (()(()))只查左边的半个括号就可以了，共有四组
    * * 表示的是:*前面的表达式出现0次或者多次
    * [a-z][0-9]*表示的是:小写字母中的任意一个后面要么没有数字，要么有多个数字====>"word33334"
    * 匹配中文的正则表达式  [\u4e00-\u9fa5]
    * + 表示的是:+前面的表达式出现了1次到多次
    * [a-z][9]+表示的是:一个小写字母后面最少有一个9，或者多个9====>"word9999word"
    * ? 表示的是:?前面的表达式出现0次到1次[4][a-z]?====>"1314word"
    * {
    
    } 能够更加明确前面的表达式出现的次数
    * {
    
    0,} 表示的是:前面的表达式出现了0次到多次，和*一样
    * {
    
    1,} 表示的是:前面的表达式出现了1次到多次，和+一样
    * {
    
    0,1} 表示的是:前面的表达式出现了0次到1次，和?一样
    * {
    
    5,7} 表示对是:前面的表达式出现了5次到7次
    * {
    
    4} 表示的是:前面的表达式出现了4次
    * ^ 表示的是以什么开始，或者是取非(取反)^[0-9]====>"23word"以数字开头
    * ^[a-z]以小写字母开始;[^a-z]取反，非小写字母;[^0-9]非数字
    * [^0-9a-zA-Z_] 表示的是:特殊字符，_不算特殊字符
    * $ 表示的是:以什么结束 [0-9][a-z]$ 不严格的模式，只要存在就满足====>"232word";
    * ^[0-9][a-z]$ 相当于严格模式，每个字符只能出现一次====>"2b"
    * ^[0-9][a-z] 只限定了前面====>"2f234word"
    * \d 表示的是:数字中的任意一个，相当于[0-9]
    * \D 表示的是:非数字中的任意一个
    * \s 表示的是:空白符中的任意一个(空格/tab键)
    * \S 表示的是:非空白符中的任意一个
    * \w 表示的是:非特殊符号中的任意一个
    * \W 表示对是:特殊符号中的任意一个

正则表达式练习

    * 根据字符串写正则表达式进行匹配
    * 经验:1.找规律;2.不要追求完美
    *
    * 身份证的正则表达式:15位或者18位
    * ([1-9][0-9]{
    
    14})|([1-9][0-9]{
    
    16}[0-9xX])
    * [1-9][0-9]{
    
    14}([0-9]{
    
    2}[0-9xX])?
    *
    * 座机号码的正则表达式010-19957435 0431-46436581
    * [0-9]{
    
    3,4}[-][0-9]{
    
    8}
    * \d{
    
    3,4}[-]\d{
    
    8}
    *
    * QQ号码的正则表达式
    * [1-9][0-9]{
    
    4-10}
    *
    * 手机号码的正则表达式
    * 130 131 132 133 134 135 136 137 138 139
    * 143 147 145
    * 151 152 159
    * 166 167
    * 170 174
    * 180 181 182 183 184 185 186 187 188 189
    * ([1][38][0-9]{
    
    9})|([1][4][357][0-9]{
    
    8})|([1][5][129][0-9]{
    
    8})|([1][6][67][0-9]{
    
    8})|([1][7][04][0-9]{
    
    8})
    *
    * 邮箱的正则表达式
    * 2483762760@qq.com
    * ww2483762760@itcast.com.cn
    * [0-9a-zA-Z._-]+[@][0-9a-zA-Z._-]+([.][a-zA-Z]+){
    
    1,2}

正则表达式的创建

  • 1.通过构造函数创建对象
    var reg1=new RegExp(/\d{
    
    7}/);
    var reg2=new RegExp("\\d{7}");//正则表达式是可以放在字符串中书写的，但是要加转义字符\
    var str1="那是我日夜思念深深爱着的人啊1314521";
    //调用方法验证字符串是否匹配
    console.log(reg1.test(str1));//true
    //严格模式，只能有7个字符
    //非严格模式，只要满足即可
    var reg=new RegExp(/^\d{
    
    7}$/);
    var str="那是我日夜思念深深爱着的人啊1314521";
    console.log(reg.test(str));//false
  • 2.通过字面量的方式创建对象
    var reg=/\d{
    
    1,4}/;
    var flag=reg.test("我曾把完整的镜子打碎，夜晚的枕头都是眼泪8848");
    console.log(flag);//true

正则表达式结果的识别

    console.log(/./.test("除了回车换行以为的任意字符"));//true
    console.log(/.*/.test("0个到多个"));//true
    console.log(/.+/.test("1个到多个"));//true
    console.log(/.?/.test("哈哈"));//true
    console.log(/[0-9]/.test("9527"));//true
    console.log(/[a-z]/.test("what"));//true
    console.log(/[A-Z]/.test("Are"));//true
    console.log(/[a-zA-Z]/.test("干啥子"));//false
    console.log(/[0-9a-zA-Z]/.test("9ebg"));//true
    console.log(/b|(ara)/.test("abra"));//true
    console.log(/[a-z]{
    
    2,3}/.test("word"));//true
    console.log(/\d/.test("998"));//true
    console.log(/\d*/.test("998"));//true
    console.log(/\d+/.test("998"));//true
    console.log(/\d{
    
    0,}/.test("998"));//true
    console.log(/\d{
    
    2,3}/.test("998"));//true
    console.log(/\D/.test("eat"));//true
    console.log(/\s/.test("  "));//true
    console.log(/\S/.test("嘎嘎 "));//true
    console.log(/\w/.test("_"));//true
    console.log(/\W/.test("_"));//false

正则表达式案例

  • 验证密码强度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #dv {
    
    
            width: 230px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid blue;
        }

        .strengthLv0 {
    
    
            height: 6px;
            width: 120px;
            border: 1px solid #ccc;
            padding: 2px;
            margin-left: 36px;
        }

        .strengthLv1 {
    
    
            background: red;
            height: 6px;
            width: 40px;
            border: 1px solid #ccc;
            padding: 2px;
            margin-left: 36px;
        }

        .strengthLv2 {
    
    
            background: orange;
            height: 6px;
            width: 80px;
            border: 1px solid #ccc;
            padding: 2px;
            margin-left: 36px;
        }

        .strengthLv3 {
    
    
            background: green;
            height: 6px;
            width: 120px;
            border: 1px solid #ccc;
            padding: 2px;
            margin-left: 36px;
        }
    </style>
</head>
<body>
<div id="dv">
    <label for="pwd">密码</label>
    <input type="text" id="pwd" maxlength="16">
    <div>
        <div id="strengthLevel" class="strengthLv0"></div>
    </div>
</div>
<script>
    /*
    * 密码如果只有数字||字母||特殊字符====>1级
    * 密码如果时两辆组合的====>2级
    * 密码如果三个都满足====>3级
    * */
    //检验键盘抬起时文本框中的内容，得到一个等级，在div标签中设置相应的属性；如果密码长度小于6，就没必要检验
    document.getElementById("pwd").onkeyup = function () {
    
    
        if(this.value.length>=6){
    
    
            var level=getLevel(this.value);
            document.getElementById("strengthLevel").className="strengthLv"+level;
        }else{
    
    
            document.getElementById("strengthLevel").className="strengthLv0";
        }
    };
    function getLevel(value) {
    
    
        var level=0;
        if(/\d/.test(value)){
    
    
            level++;
        }
        if(/[a-zA-Z]/.test(value)){
    
    
            level++;
        }
        if(/\W/.test(value)){
    
    
            level++;
        }
        return level;
    }
</script>
</body>
</html>
  • 验证用户输入的是不是中文
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
请输入你的名字:<input type="text" value="" id="userName">*<br/>
<script>
    //是中文名字，则是绿色，否则蓝色
    document.getElementById("userName").onblur=function () {
    
    
        var reg=/^[\u4e00-\u9fa5]{
    
    2,6}$/;
        if(reg.test(this.value)){
    
    
            this.style.backgroundColor="green";
        }else{
    
    
            this.style.backgroundColor="blue";
        }
    };
</script>
</body>
</html>
  • 验证用户输入的是不是邮箱
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
请输入邮箱地址:<input type="text" value="" id="email"/>*<br/>
<script>
    //如果输入的是邮箱，那么背景颜色为绿色，否则为红色
    document.getElementById("email").onblur=function () {
    
    
        var reg=/^[0-9a-zA-Z._-]+[@][0-9a-zA-z._-]+([.][a-zA-Z]+){
    
    1,2}$/;
        if(reg.test(this.value)){
    
    
            this.style.backgroundColor="green";
        }else{
    
    
            this.style.backgroundColor="blue";
        }
    };
</script>
</body>
</html>
  • 表单综合案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
    
    
            background: #ccc;
        }

        label {
    
    
            width: 40px;
            display: inline-block;
        }

        span {
    
    
            color: red;
        }

        .container {
    
    
            margin: 100px auto;
            width: 400px;
            padding: 50px;
            line-height: 40px;
            border: 1px solid #999;
            background: #efefef;
        }

        span {
    
    
            margin-left: 30px;
            font-size: 12px;
        }
    </style>

</head>

<body>
<div class="container" id="dv">
    <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/>
    <label>手机</label><input type="text" id="phone"><span></span><br/>
    <label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
    <label>座机</label><input type="text" id="telephone"><span></span><br/>
    <label>姓名</label><input type="text" id="fullName"><span></span><br/>
</div>
<script>
    checkInput(document.getElementById("qq"),/^[1-9]\d{
    
    4,10}$/);
    checkInput(document.getElementById("phone"),/^\d{
    
    11}$/);
    checkInput(document.getElementById("e-mail"),/^[0-9a-zA-Z-._]+[@]+[0-9a-zA-Z-._]+([.][a-zA-Z]){
    
    1,2}$/);
    checkInput(document.getElementById("telephone"),/^\d{
    
    3,4}[-]\d{
    
    7,8}$/);
    checkInput(document.getElementById("fullName"),/^[\u4e00-\u9fa5]{
    
    2,6}$/);
    //定义一个函数，通过正则表达式验证当前文本框是否匹配
    function checkInput(input,reg) {
    
    
        input.onblur=function () {
    
    
            if(reg.test(this.value)){
    
    
                this.nextElementSibling.innerText="正确了";
                console.log("222");
                this.nextElementSibling.style.color="blue";
            }else{
    
    
                this.nextElementSibling.innerText="傻逼";
                this.nextElementSibling.style.color="red";
            }
        };
    }
</script>
</body>
</html>

正则表达式其他方法的使用

<script>
    /*
    * String.match()方法检索一个字符串匹配正则表达式的结果
    * RegExp.exec()方法返回一个数组，其中用()分组的内容也在数组里面
    * */
    var str1 = "中国移动:10086,中国联通:10010,中国电信:10000";
    //把字符串里面所有的数字显示出来
    var array1=str1.match(/\d{
    
    5}/g);
    console.log(array1);//["10086", "10010", "10000"]
    //===============================================
    var reg=/\d{
    
    5}/g;
    ary=reg.exec(str1);
    console.log(ary);
    console.log(reg.exec(str1));
    console.log(reg.exec(str1));
    console.log(reg.exec(str1));//null
    //需遍历输出
    var result=reg.exec(str1);
    while(result!=null){
    
    
        console.log(result[0]);
        result=reg.exec(str1)
    }

    var str2 = "[email protected],[email protected] [email protected] 2、[email protected] [email protected]...";
    var array2 = str2.match(/[0-9a-zA-Z._-]+[@][0-9a-zA-Z._-]+([.][a-zA-Z]+){
    
    1,2}/g);
    console.log(array2);

    //提取日期中的日
    //分组提取(正则表达式中的()作为分组来使用，获取分组匹配到的结果用RegEep.$1,$2...来获取)

    var str3="2019-03-27";
    var array3=str3.match(/(\d{
    
    4})[-](\d{
    
    2})[-](\d{
    
    2})/);
    console.log(RegExp.$1);//2019
    console.log(RegExp.$2);//03
    console.log(RegExp.$3);//27

    //通过标记进行高级搜索
    //g-->全局搜索；i-->不区分大小写搜索
    var str4="那是我日夜思念深深爱着的人啊";
    console.log(str4.replace(/[是]/,"不是"));

    var str5="word   hello   Word";
    var re = new RegExp(/[w]/, "gi");
    var re2 = new RegExp(/[w]/gi);
    console.log(str5.replace(/\s+/g,""));//wordhelloword
    console.log(str5.replace(/[w]/gi,"S"));
    console.log(str5.replace(re,"S"));
    console.log(str5.replace(re2,"S"));
</script>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/dwjdj/article/details/104957526
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022