关于javascript:day13-正则表达式

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]
¹示意非括号内的任意一个字符
- ()个别与或连用示意优先级
[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= /^\D\w{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 = /^\D\w{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 办法
- 应用正则表达式模式对字符串执行查找，并将蕴含查找的后果作为数组返回。
- 用法：str.match(rgExp)

    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

关于javascript:day13-正则表达式

1. 正则表达式

定义：

规定：

表单验证

正则中的相干办法和属性

办法：

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于javascript:day13-正则表达式

1. 正则表达式

定义：

规定：

表单验证

正则中的相干办法和属性

办法：

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复