美文网首页
js中的正则表达式总结

js中的正则表达式总结

作者: 东邪_黄药师 | 来源:发表于2018-09-19 16:43 被阅读13次
    * 正则表达式:也叫规则表达式,按照一定的规则组成的一个表达式,这个表达式的作用主要是匹配字符串的,
    * "我的电话:10086,他的电话:10010,你的电话:10000" 正则表达式,把这个字符串中的所有的数字找到
    *
    * 正则表达式的作用:匹配字符串的
    *
    * 在大多数编程语言中都可以使用
    *
    * 正则表达式的组成:是由元字符或者是限定符组成的一个式子
    *
    *
    * 元字符:
    *
    * .  表示的是:除了\n以外的任意的一个字符   "fdsfs238"
    *
    * [] 表示的是:范围,  [0-9] 表示的是0到9之间的任意的一个数字,  "789" [0-9]
    * [1-7] 表示的是1到7之间的任意的一个数字
    * [a-z] 表示的是:所有的小写的字母中的任意的一个
    * [A-Z] 表示的是:所有的大写的字母中的任意的一个
    * [a-zA-Z] 表示的是:所有的字母的任意的一个
    * [0-9a-zA-Z] 表示的是: 所有的数字或者是字母中的一个
    * [] 另一个函数: 把正则表达式中元字符的意义干掉    [.] 就是一个.
    * | 或者     [0-9]|[a-z] 表示的是要么是一个数字,要么是一个小写的字母
    * () 分组 提升优先级   [0-9]|([a-z])|[A-Z]
    * ([0-9])([1-5])([a-z]) 三组, 从最左边开始计算
    * (()(()))
    *
    *
    * 都是元字符,但是也可以叫限定符,下面的这些
    *    *   表示的是:前面的表达式出现了0次到多次
    *    [a-z][0-9]* 小写字母中的任意一个 后面是要么是没有数字的,要么是多个数字的
    *    "fdsfs3223323"  [a-z][0-9]*
    *
    *    +  表示的是:前面的表达式出现了1次到多次
    *    [a-z][9]+  小写字母一个后面最少一个9,或者多个9
    *    "fesfewww9fefds"
    *
    *    ?  表示的是:前面的表达式出现了0次到1次,最少是0次,最多1次 ,另一个含义:阻止贪婪模式
    *    [4][a-z]? "1231234ij"
    *  限定符:限定前面的表达式出现的次数
    *  {} 更加的明确前面的表达式出现的次数
    *  {0,} 表示的是前面的表达式出现了0次到多次,和 *一样的
    *  {1,} 表示的是前面的表达式出现了1次到多次,和 +一样的
    *  {0,1} 表示的是前面的表达式出现了0次到1次,和 ?一样的
    *  {5,10} 表示的是前面的表达式出现了5次到10次
    *  {4} 前面的表达式出现了4次
    *  {,10} 错误的========不能这么写
    *  ^ 表示的是以什么开始,或者是取非(取反) ^[0-9] 以数字开头
    *  ^[a-z] 以小写字母开始
    *  [^0-9] 取反,非数字
    *  [^a-z] 非小写字母
    *  [^0-9a-zA-Z_]
    *  $ 表示的是以什么结束   [0-9][a-z]$  必须以小写字母结束
    *  ^[0-9][a-z] 相当于是严格模式   "3f2432e"  "4f"
    *   \d 数字中的任意一个,
    *   \D 非数字中的一个
    *   \s 空白符中的一个
    *   \S 非空白符
    *   \w 非特殊符号
    *   \W 特殊符号
    *   \b 单词的边界
    *   "what are you no sha lei"
    *    . 除了\n以外的任意一个单个字符
    *    []  范围
    *    () 分组,提升优先级
    *    | 或者
    *    * 0-多次
    *    + 1-多次
    *    ? 0-1次
    *    {0,} 和*一样
    *    {1,} 和+
    *    {0,1} 和?
    *
    *    \d 数字中的一个
    *    \D 非数字
    *    \s 空白符
    *    \S 非空白符
    *     \W  特殊符号
    *     \w 非特殊符号 _
    *     ^ 取反,以什么开始
    *     $ 以什么结束
    *     \b 单词边界
    

    =============================================================
    创建正则表达式的方式:
    //创建正则表达式对象
    1.通过构造函数创建对象
    2.字面量的方式创建对象

    • 正则表达式的作用:匹配字符串的
     //对象创建完毕---
     var reg=new RegExp(/\d{5}/);
     //调用方法验证字符串是否匹配
     var flag=reg.test("我的电话是10086");
     console.log(flag);
    
    
    //字面量的方式创建正则表达式对象
    var reg=/\d{1,5}/;
    var flag=reg.test("小苏的幸运数字:888");
    console.log(flag);
    

    =============================================================
    案例验证密码的强度:

      //获取文本框注册键盘抬起事件
     my$("pwd").onkeyup = function() {
    //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
    //如果密码的长度是小于6的,没有必要判断
    if(this.value.length >= 6) {
        var lvl = getLvl(this.value);
        my$("strengthLevel").className = "strengthLv" + lvl;
    } else {
        my$("strengthLevel").className = "strengthLv0";
    }
    //三元表达式
    //my$("strengthLevel").className="strengthLv"+ 
            (this.value.length>=6?getLvl(this.value) :0);
    };
    
     //给我密码,我返回对应的级别
             function getLvl(pwd) {
    var lvl = 0; //默认是0级
    //密码中是否有数字,或者是字母,或者是特殊符号
    if(/[0-9]/.test(pwd)) {
        lvl++;
    }
    //判断密码中有没有字母
    if(/[a-zA-Z]/.test(pwd)) {
        lvl++;
    }
    //判断密码中有没有特殊符号
    if(/[^0-9a-zA-Z_]/.test(pwd)) {
        lvl++;
    }
    return lvl; //最小的值是1,最大值是3;
    
    • 密码: 数字,字母,特殊符号
      • 密码: 只有数字- 或者是只有字母,或者是只有特殊符号---1级---弱

      • 两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号 -----2级----中

      • 三者都有: 数字和字母和特殊符号------3级-----强
        =========================================================
        表单验证:
        html:

        <div class="container" id="dv">
        <label for="qq">Q Q</label><input type="text" id="qq"><span>
        </span>

        <label>手机</label><input type="text" id="phone"><span></span>

        <label>邮箱</label><input type="text" id="e-mail"><span></span>

        <label>座机</label><input type="text" id="telephone"><span></span>

        <label>姓名</label><input type="text" id="fullName"><span></span>

        </div>

      //qq的
     checkInput(my$("qq"),/^\d{5,11}$/);
     //手机
     checkInput(my$("phone"),/^\d{11}$/);
     //邮箱
    checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA- 
     Z]+){1,2}$/);
    //座机号码
     checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
     //中文名字
     checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
    //给我文本框,给我这个文本框相应的正则表达式,我把结果显示出来
    //通过正则表达式验证当前的文本框是否匹配并显示结果
     function checkInput(input,reg) {
    //文本框注册失去焦点的事件
    input.onblur=function () {
      if(reg.test(this.value)){
        this.nextElementSibling.innerText="正确了";
        this.nextElementSibling.style.color="green";
      }else{
        this.nextElementSibling.innerText="让你得瑟,错了吧";
        this.nextElementSibling.style.color="red";
      }
    }}
    

    ==============================================================

    //正则表达式中:g 表示的是全局模式匹配
    //正则表达式中:i 表示的是忽略大小写

            var str = "中国移动:10086,中国联通:10010,中国电信:10000";
            //把里面所有的数字全部显示出来
            var array = str.match(/\d{5}/g); //正则表达式中:g 表示的是全局模式匹配
            console.log(array);
    
            var str = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";
            var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
            console.log(array);
    
            //提取这里的日
            var str = "2017-11-12";
            var array = str.match(/(\d{4})[-](\d{2})[-](\d{2})/g);
            //console.log(array);
            //正则表达式对象.$3
            console.log(RegExp.$3); //12
    
            var email = "shuaiyangtaishuaile@itcast.com.cn";
            email.match(/([0-9a-zA-Z_.-]+)[@]([0-9a-zA-Z_-]+)(([.][a-zA-Z]+){1,2})/);
            console.log(RegExp.$1); //用户名
            console.log(RegExp.$2); //126
            console.log(RegExp.$3); //域名
    
            //replace方法:
            var str = "小苏好帅哦,真的是太帅了,帅,就是真帅";
            str = str.replace(/帅/g, "猥琐");
            console.log(str); //小苏好猥琐哦,真的是太猥琐了,猥琐,就是真猥琐
    
            //trim()方法
            var str = "  哦买噶的    ,太幸福了  ";
            str = str.trim();
            console.log("===" + str + "==="); //===哦买噶的    ,太幸福了===
    
            var str = "  哦买噶的    ,太幸福了  ";
            str = str.replace(/\s+/g, "");
            console.log("===" + str + "==="); //===哦买噶的,太幸福了===
    
            //所有的h都替换成S
            var str = "HhpphH"; //SSppSS
            str = str.replace(/[h]/gi, "S");
            console.log(str); //SSppSS
    
            //正则
            var reg = new RegExp(/[h]/gi);
            var str = "HhpphH"; //SSppSS
            str = str.replace(reg, "S");
            console.log(str);
    
            var str = "中国移动:10086,中国联通:10010,中国电信:10000";
            var reg = /\d{5}/g;
            //通过正则表达式匹配这个字符串
            var array = reg.exec(str);
            while(array != null) {
                //输出匹配的内容
                console.log(array[0]);
                array = reg.exec(str);
            }
    

    相关文章

      网友评论

          本文标题:js中的正则表达式总结

          本文链接:https://www.haomeiwen.com/subject/fvlunftx.html