关于javascript:day13-正则表达式

37次阅读

共计 3719 个字符，预计需要花费 10 分钟才能阅读完成。

正则表达式 (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

发表至： javascript

2021-01-13

0

关于javascript:如何将-SAP-电商云-Spartacus-UI-部署到-tomcat-上运行

关于javascript:js-day4-函数

关于javascript:程序员为了讨好大舅子竟自学自动化编程

关于javascript:TypeScript比较Interface和Type

关于java并发:Java并发JMM的8大原子操作及并发3之volatile关键字可见性

关于javascript:day13-正则表达式

1. 正则表达式

定义：

规定：

表单验证

正则中的相干办法和属性

办法：

Just My Socks（注册教程内含优惠码）

关于javascript:day13-正则表达式

1. 正则表达式

定义：

规定：

表单验证

正则中的相干办法和属性

办法：

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）