正则表达式

1 正则表达式基本介绍

1.数据隐藏：132****4233

2.数据采集：

3.数据过滤：（***）

4.数据验证：手机号邮箱地址……

2 JS标准库中的正则对象

2.1 创建正则对象

1.字面量写法 var regex = /xyz/； //以斜杠表示开头和结束

2.构造函数生成：var regex = new RegExp(‘xyz’)；通过实例化得到对象

两种方式相同没有区别，使用最多的是字面量方式

2.2 匹配模式（修饰符）

常用修饰符

g (global): 全局匹配，匹配所有满足条件不加g第一次匹配后，正则就停止向下匹配；

i (ignore)：忽略大小写；

var regex = /xyz/i;

var regex = new RegExp(‘xyz’,'i')；

2.3 正则对象的方法

判断查找的字符串：reg.test() 查找不到返回false

返回查找到的字符串查找不到返回null reg.exec（）

2.3 String对象的方法

 var t = ';dasedqwdcsddq'
 var reg = /is/
 var z =  t.search(reg)  //返回出现的位置
 var y =  t.match(reg)   //以数组的形式返回查找的结果
 var x =  t.replace(reg,'*')  // 替换查找的字符串    （惰性模式 贪婪模式）
 var w =  t.split(reg)   //以指定结果分割 以数组的形式返回   默认使用全局模式（贪婪模式）

所有正则表达式默认都采用贪婪匹配原则

在限定符的后面加一个？转化为惰性模式

3 重要细则

3.1 子表达式

通过一对圆括号括起来的内容为子表达式

 var reg = \d(\d);

3.2 捕获

子表达式匹配到相应的内容时系统会自动捕获这个行为将子表达式匹配到的内容放在缓存区

3.3 反向引用

用\n（n>0 正整数）代表系统中缓存区的编号获取缓存区的内容

 var s = 'dasffgredf21432'
 //1 子表达式
 var reg = /(\d)\d\d\d/   // 括号里面的发生捕获行为 \d\d\d\d\四个连续的数字   \d代表查找数字
 // \1 表示用一号缓存区的内容  第一个捕获的子表达式   不符合条件重新判断表达式 直到查找成功
 var 在 =s.match(reg)
 //[A-Z] 表示匹配A-Z的任意一个字符
 //[0-9A-Z] 查找两个范围内的字符

4.编写正则表达式

查什么查多少从哪查

4.1查什么

字符簇：[a-z] [A-Z] 根据ASCII码查找区分大小写

[a-Z] 是错的不连续可以[a-zA-Z]

^ (脱字符) 表示取反

字符簇	含义
\d	匹配一个数字字符
\D	匹配一个非数字字符
\w	匹配包括下划线的任何字母数字下划线字符
\W	匹配任何非字母数字下划线字符
\s	匹配任何空白字符（空格回车制表符（一个代表四个空格））
\S	匹配任何非空白字符
.(英文句号)	匹配除“\n”之外的任何单个字符（\n表示enter 回车）
[\u4e00-\u9fa5]	匹配中文字符中的任一字符

匹配特殊字符需要转义 \ \ =>\

4.2查多少（限定符）

 var str = '我的QQ是436445，另一个QQ是3544324435，我的手机号是12353552545，我的身份证号是234678843465474576'
 //查找QQ号
 var reg = /[1-9]\d{4,9}/g    //{} 里面的为个数  g为查找出所有的匹配条件
 var z = str。match(reg)
 \d+ === \d{1,}

限定符
*：匹配前面的子表达式0次或多次，0-多
+：匹配前面的子表达式1次或多次，1-多
?: 匹配前面的子表达式0次或1次，0或1
{n}: 匹配确定的n次
{n,}: 至少匹配n次
{n,m}: 匹配n-m次

4.3从哪查(定位符)

 var str = 'er42435fgdsvc13345678907'
 var reg = /1[34578]\d{9}/  //第一位是1  第二位34578任意一个 后九个任意数字
  var z = reg.test(str)

定位符
^(脱字符)：匹配输入字符串开始的位置（取反）放在整个表达式最开始的位置
$: 匹配输入字符串的结束位置
\b: 匹配一个单词的边界
\8: 匹配非单词的边界

4.4 转义字符

反斜杠转义

 var t = 'http://xiling.me'
 var reg = /\w+://\w+.\w+/   //冒号不用转义  斜杠需专业  点也需要转义
 var z = t.match(reg)  
 var str2 = 'qq@qq.com'
 var reg = /\w+@\w+.\w{2-6}/
 var y = str2.match(reg)

4.5或者的用法

 var str = 'ipad,iphone,iwatch,imac,ijr,iwer,iksjad'
 var reg = /\bi(pad|phone|watch|mac)\b/g   //需要是一个单词的开始和结束
 var z = str.match(reg)

4.6预查(选学)

 var str = 'hello,when i am working,do not coming'
 //需求1 把里面ing结尾的词根部分找出
 //正向预查（正预测/前瞻/先行断言）【面试会考】：单词一直向后查 
 var reg  = /\b\w+(?=ing\b)/g    //子表达式 预先查 ing  并不会输出ing  事实上没查到ing  只是预先查找
 var z = str.match(reg)
 
 //需求2 把不是ing结尾的单词找出
 //负向预查/负预测/前瞻/先行否定
 var reg1 = /\b\w+(?!ing)\w{3}\b/g var y = str.match(reg1)

5 注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
input{
    width: 300px;
    height: 22px;
    border: 1px solid black;
}
span{
    color:red;
}
.inp_red{
    border: red 1px solid;
}
    </style>
</head>
<body>
    用户名：<br>
    <input type="text" placeholder="大于3"><br>
    <span></span> <br>
    邮箱：<br>
    <input type="text" name="" id=""><br>
    <span></span> <br>
    密码：<br>
    <input type="password" name="" id=""><br>
    <span></span> <br>
    重复密码：<br>
    <input type="password" value=""><br>
    <span></span> <br>
    <button>提交</button>
    <script>
        var input_element = document.getElementsByTagName('input');
        var span_element = document.getElementsByTagName('span')
        for(var i=0;i<input_element.length;i++){
            input_element[i].addEventListener('blur',function(){
                if(this.value==''){
                    this.className='inp_red';
                    span_element[0].innerText="你输入的值为空"
                }
            })
        }
//TTOD:
    </script>
</body>
</html>

正则表达式 | 青训营