• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

day13 正则表达式

互联网 diligentman 3天前 11次浏览

1. 正则表达式

正则表达式 (regular expression) 是一个描述字符规则的对象。如:只能出现字母,只能出现数字,前三个必须是数字等。

​ 前端往往有大量的表单数据校验的工作,采用正则表达式会使得数据校验的工作量大大减轻,如邮箱验证,手机号码,等等。比起用字符串的函数来判断,更简单易用。

正则表达式的组成:普通字符 或者 特殊字符。

定义:

(1)字面量

var reg = /普通字符或者特殊字符/【修饰符】

var reg = /a/;//至少包含一个a
console.log(reg.test('ab'));//true

(2)构造方法

var reg = new RegExp(“普通字符或者特殊字符”,【修饰符】);

规则:

  • 普通字符:看起来是啥就是啥;
  • 特殊字符:具有特殊含义的字符 ;

    • a.单个字符
  • ^:正则开始

    • $ : 正则结束

      • ^$同时存在代表只能
    • . : 元字符, 表示任意一个字符
    • 反斜杠: 表示转义字符 反斜杠.表示.

      • 转义字符:对于没有超能力的字符,赋予能力
      • 对于有超能力的字符,取消能力
    • +: 表示其前面紧挨着的字符至少出现1次 等价{1,}
    • 星号:表示其前面出现的字符至少出现过0次 等价{0,}
    • ?: 表示其前面出现的字符至少出现过0次,至多1次 等价{0,1}
    • | : 表示或者
    • b.各种括号

      • {m,n}表示括号前面紧挨着的字符至少出现m个,至多出现n个

        • 以b开头 至少3个a 至多5个a /^ba{3,5}&/
      • {m}表示括号前面紧挨着的字符只能出现m个
      • {m,}表示括号前面紧挨着的字符至少出现m个
      • [] 表示括号内的任意一个字符
      • [a-z]表示任意一个小写字母 [a-zA-Z0-9]
    • 1表示非括号内的任意一个字符

      • ()一般与或连用 表示优先级
    • [u4e00-u9fa5] 任意一个中文字符
    • c.组合字符

      • d: 0-9之间的任意一个数字 d只占一个位置
      • D: 除了d
      • w: 数字,字母 ,下划线 0-9 a-z A-Z _
      • W: 除了w
      • s: 空格或者空白等
      • S: 除了s

注意:

  • 转义字符:对于没有超能力的字符,赋予能力;对于有超能力的字符,取消能力;
  • [ ]另一种或 内部的内容被去掉超能力;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text"/>
        <button type="button">测试</button>
    </body>
</html>
<script type="text/javascript">
    var oBtn = document.querySelector('button');
    var oText = document.querySelector('input');
    oBtn.onclick = function(){
        var reg= /a/;//至少包含一个a
        reg= /asd/;//至少包含一个asd
        
        // 只能包含一个a
        reg = /^a$/;
        
        //以b开头  至少3个a  至多5个a
        reg = /^ba{3,5}$/;
        
        // 6个5 
        reg = /^5{6}$/;
        
        //邮编   6位数字
        reg = /^d{6}$/;
        
        //定义一个由字母或数字或下划线组成的用户名   范围在6,18之间 
        reg= /^w{6,18}$/;
        //定义一个由字母或数字或下划线组成的用户名  开头不能是数字   范围在6,18之间
        reg= /^Dw{5,17}$/;
        //定义一个密码  至少6位
        reg=  /^.{6,}$/;
        
        //  www.baidu.com
        reg = /^www.baidu.com$/;//此处的.可以是任意字符
        
        //转义字符:对于没有超能力的字符,赋予能力
        //          对于有超能力的字符,取消能力
        reg = /^www.baidu.com$/;//.表示真正的点
        reg = /^3+5$/;// //3+5 斜杠+代表真正的+
        
        //以 13 或 15 或17 开头的11位的手机号
        reg = /^1(3|5|7)d{9}$/;
        reg = /^(13|15|17)d{9}$/;
        //[]另一种或 去掉超能力
        reg = /^[a1,b3+.]$/;//中括号里的点没有超能力 a或1或逗号或b或3或+或点
        reg = /^[0-9A-Za-z]$/;//数字或字母  0-9代表0到9
        reg = /^1[357]d{9}$/;
        
        //两个中文
        reg = /^[u4e00-u9fa5]{2}$/;
        
        // 空格
        reg = /^ $/;
        
        //[^  ]表示非括号内的任意一个字符
        reg = /^[^1ab3]$/;//方括号里的^代表非
        
        console.log(reg.test(oText.value));
    }
</script>

表单验证

  • action:提交的服务器文件
  • method:提交的方式

    • get 默认为get 效率高 安全性低 五菱宏光
    • post 效率低 安全性高 武装押运
<form action="ok.html" method="get">
</form>
  • onsubmit作为submit按钮的提交事件,返回值为布尔,决定是否提交数据。true为提交 false为不提交。
  • 焦点验证: onblur 失去焦点
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="ok.html" method="get">
            ID:<input type="text"/><span></span><br>
            PWD:<input type="text"/><span></span><br>
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>
<script type="text/javascript">
    var regId = /^Dw{5,17}/;
    var regPwd = /^.{6,}$/;
    var oInputs = document.querySelectorAll('input');
    var oF = document.querySelector('form');
    var flagId = false;
    var flagPwd = false;
    oInputs[0].onblur = function(){
        if(regId.test(this.value)){
            this.nextElementSibling.innerHTML = 'ID格式正确';
            flagId = true;
        }else{
            this.nextElementSibling.innerHTML = 'ID格式错误';
            flagId = false;
        }
    }
    oInputs[1].onblur = function(){
        if(regPwd.test(this.value)){
            this.nextElementSibling.innerHTML = 'PWD格式正确';
            flagPwd = true;
        }else{
            this.nextElementSibling.innerHTML = 'PWD格式错误';
            flagPwd = false;
        }
    }
    oF.onsubmit = function(){
        if(flagId && flagPwd){
            return true;
        }else {
            return false;
        }
            
    }    
</script>

正则中的相关方法和属性

方法:

  • test()

    • 检验一个字符串是否符合某一个正则规范,如果符合返回true,否则返回false
    • 用法: reg.test(str)
  • exec()

    • 根据正则表达式查找,结果满足,会返回一个长度为1的数组(数组只有一个值)
    • reg.exec(str)
    • g全局属性
    var reg = /d/g;
    var arr = reg.exec('1a2b3c')
    console.log(arr[0]);//1
    arr = reg.exec('1a2b3c')
    console.log(arr[0]);//2  全局属性g 

正则中相关字符串的方法:

  • search方法

    • 返回与正则表达式查找内容匹配的第一个子字符串的位置
    • 用法: str.search(reg)
    • i 忽略字母大小写
    var str = "wo shi ge bi de lao wang";
    var reg1 =/sh/;
    console.log(str.search(reg1));//3
    var reg2 = /GE/i;//i忽略大小写
    console.log(str.search(reg2));//7
  • match 方法

    var reg = /d+/g;
    var str = "123a4356a987";
    console.log(str.match(reg)[0]);//123
    console.log(str.match(reg)[1]);//4356
    console.log(str.match(reg)[2]);//987
  • replace 方法

    • 返回根据正则表达式进行文字替换后的字符串的复制。
    • 用法:stringObj.replace(rgExp,replaceText)
    var reg = /laowang/g;
    var str = "laowang的隔壁也住着laowang";
    console.log(str.replace(reg,"dahuang"));//dahuang的隔壁也住着dahuang


喜欢 (0)