2018-07-12

正则表达式 课时一：

正则
1.含义

规定字符出现规律的规则

2.声明一个正则

var reg=//;
var reg=new RegExp();

3.字符集

规定一位字符可以可以出现的备选列表   []
注：字符集只匹配一位
[0-9]   一位数字
[A-Z]   一位大写字母
[a-z]   一位小写字母
[a-zA-Z]    一位字母
[^]     除了

4.预定义字符集

\d   查找数字字符 \D  查找非数字字符
\s   查找空白字符 \S  查找非空白字符
\w   查找单词字符 \W  查找非单词字符

5.量词

规定数量限制的词
{m,n}   最少出现m次，最多n次
{m,}    最少出现m次，最多不限
{m}     必须出现m次
        
没有数量限制的
？   可有可无，最多一次
*   可有可无，多了不限
+   至少一次，多了不限

6.分组和选择

分组：();
选择：|;

对象：Array object Date Math RegExp

注册实例

HTML代码如下

   <div class="main">
        <div class="header">
            <img src="img/timg.gif" />
        </div>
        <div class="body">
            <ul>
                <li><span>账号：</span><input type="text" name="ipn" id="ipn" value="123456" placeholder="请输入密码" /></li>
                <li class="li_p">
                    <p id="text"></p>
                </li>
                <li><span>密码：</span><input type="password" name="ipn1" id="ipn1" value="" placeholder="请密码" /></li>
                <li class="li_p">
                    <p id="text1"></p>
                </li>
                <li><span>确认密码：</span><input type="password" name="ipn2" id="ipn2" value="" placeholder="确认密码" /></li>
                <li class="li_p">
                    <p id="text2"></p>
                </li>
                <li><span>手机号：</span><input type="text" name="ipn3" id="ipn3" value="" placeholder="请输入手机号" /><button class="btng">获取验证码</button></li>
                <li class="li_p">
                    <p id="text3"></p>
                </li>
                <li><span>验证码：</span><input type="text" name="ipn4" id="ipn4" value="" placeholder="请输入四位验证码" /></li>
                <li class="li_p">
                    <p id="text4"></p>
                </li>
            </ul>
        </div>
        <hr />
        <div class="foot">
            <ul>
                <li><input type="checkbox" checked="checked" name="" id="" value="" />我同意成为中国人民
                    <a href="#">《中国人民保护法》</a>
                </li>
                <li><button id="btn">完成注册</button></li>
            </ul>
        </div>
    </div>
    <div class="box">
        <div class="cent">
            <p>内容</p>
            <h1 id="hy"></h1>
            <h1 class="f">郭子豪</h1>
        </div>
    </div>

js代码如下

    var ipn = document.getElementById('ipn');
    var txt = document.getElementById('text');
    ipn.onfocus = function() {
    txt.innerHTML = '使用6-18位字母数字、支持中文';
    }
    ipn.onblur = function() {
            var reg = /^[\u4e00-\u9fa5a-zA-Z0-9]{6,12}$/;
        var result = reg.test(ipn.value);
        if(result == true) {
            txt.innerHTML = '通过';
        } else {
            txt.innerHTML = '格式错误';
        }
            }
    var ipn1 = document.getElementById('ipn1');
    var txt1 = document.getElementById('text1');
    ipn1.onfocus = function() {
        txt1.innerHTML = '使用6-18位字母数字';
    }
    ipn1.onblur = function() {
        var reg1 = /^[A-Za-z0-9]{6,12}$/;
        var result1 = reg1.test(ipn1.value);
        if(result1 == true) {
            txt1.innerHTML = '通过';
        } else {
            txt1.innerHTML = '格式错误';
        }
    }
    var ipn2 = document.getElementById('ipn2');
    var txt2 = document.getElementById('text2');
    ipn2.onfocus = function() {
    txt2.innerHTML = '请再次输入密码';
    }
    ipn2.onblur = function() {
        if(ipn1.value == ipn2.value) {
            txt2.innerHTML = '验证通过';
        } else {
            txt2.innerHTML = '两次密码输入不一致';
        }
    }
    var ipn3 = document.getElementById('ipn3');
    var txt3 = document.getElementById('text3');
    ipn3.onfocus = function() {
        txt3.innerHTML = '请输入11位手机号';
    }
    ipn3.onblur = function() {
        var reg3 = /^1[356789]\d{9}$/;
        var result3 = reg3.test(ipn3.value);
        if(result3 == true) {
            txt3.innerHTML = '输入正确';
        } else {
            txt3.innerHTML = '手机号格式错误';
        }
    }
    var btng = document.querySelector('.btng');
    var a = Math.floor(Math.random() * (9999 - 1000 + 1) + 1000);
    console.log(a);
    btng.onclick = function() {
        if(btng.innerHTML == '获取验证码') {
            btng.innerHTML = "60秒之后获取";
            alert('您的验证码:' + a);
            var i = 59;
            var xh = setInterval(function() {
                btng.innerHTML = i + "秒之后获取"
                i--;
                if(i == 0) {
                    clearInterval(xh);
                    btng.innerHTML = "获取验证码"
                }
            }, 1000);
        }
    }
    var btn = document.getElementById('btn');
    var ipn4 = document.getElementById('ipn4');
    var box = document.querySelector('.box')
    btn.onclick = function() {
        if(ipn4.value == a) {
            alert('验证通过，正在跳转....');
            box.style.display = 'block';
        } else {
            alert('验证失败，重新尝试')
        }
    }
    var hy = document.getElementById('hy');
    var ip = document.querySelector('#ipn');
    console.log(ip.value)
    hy.innerHTML = '欢迎回来' + ip.value;

下拉框左右移动实例

HTML代码

<select name="first" size="10" id="first" multiple="multiple">
    <option>三星</option>
    <option>小米</option>
    <option>魅族</option>
    <option>红米</option>
    <option>苹果</option>
    <option>联想</option>
    <option>乐视</option>
    <option>8848</option>
    <option>vivo</option>
    <option>oppo</option>
</select>
<div class="select_move_2">
    <button onclick="move(this)">&gt;</button>
    <button onclick="move(this)">&gt;&gt;</button>
    <button onclick="move(this)">&lt;</button>
    <button onclick="move(this)">&lt;&lt;</button>
</div>
<select size="10" id="secend" multiple="multiple"></select>

js代码

var sele = [],
        sec = [];
    sele = first.innerHTML.slice(12, -13).split(/<\/option>\s*<option>/);
    console.log(sele)
    function move(btn) {
        switch(btn.innerHTML) {
            case '&gt;&gt;':
                sec = sec.concat(sele);
                sele = [];
                break;
            case '&lt;&lt;':
                sele = sele.concat(sec);
                sec = [];
                break;
            case '&gt;':
                var opt = document.querySelectorAll('#first>option');
                for(var i = 0; i < opt.length; i++) {
                    if(opt[i].selected) {
                        sec.push(sele.splice(i, 1));
                        sec.sort();
                    }
                }
                break;
            case '&lt;':
                var opt1 = document.querySelectorAll('#secend>option');
                for(var i = 0; i < opt1.length; i++) {
                    if(opt1[i].selected) {
                        sele.push(sec.splice(i, 1));
                        sele.sort();
                    }
                }
             break;
        }
        update(sele, first);
        update(sec, secend);
    }
    function update(arr, sel) {
        sel.innerHTML = '<option>' + arr.join('</option><option>') + '</option>';
    }

正则字符串

API

toUpperCase     转大写
toLowerCase     转小写
slice(starti,endi+1)
concat()；
substring()；
    1)不支持负数
substr();
indexof();  查找一个关键词出现的位置    找不到返回-1
lastindexof();  查找上一个关键词出现的位置   找不到返回-1

字符串中的正则API

1、search();     查找符合正则的字符   找不到返回-1
2、match();      获得所有正则匹配的关键词
    1)g表示匹配全部
    2)i表示忽略大小写
3、replace();    替换
4、split();      切割

字符串中的正则API练习

//  获得正则匹配值
    var str = 'good good study,day day up1';
    var strs=str.match(/d/gi);
    console.log(strs)
//  替换
    var str1 = 'good good study,day day up2';
    var strs1=str1.replace(/d/gi,'b');
    console.log(strs1)
//  切割
    var str2 = 'good,good,study,day,day,up3';
    var strs2=str2.split(/,/);
    console.log(strs2)