6.1正则表达式案例及php正则

1、匹配手机号格式是否正确

采用的方法是：正则对象中的test方法。
手机号格式：
11位
纯数字
1开头
[23为判断] — 去各大运营商查询有哪些号段

    var tel = '13866668888';
    //var res = /^1\d{10}$/g.test(tel);
    var res = /^1(35|36|37|38|50|51|85|86)\d{8}$/g.test(tel);  //模拟判断23位
    console.log(res);

2、匹配邮箱格式是否正确

如果说邮箱的@后面的部分如果固定，则只需要验证前面的邮箱名部分。比如新浪。
新浪邮箱要求：
4~16个字符，
使用小写字母、数字、下划线组成
下划线不能在首尾

 /*
     新浪邮箱要求：
        4~16个字符，
        使用小写字母、数字、下划线组成
        下划线不能在首尾
     */
    var email = 'as_d222222222222';
    var r = /^[a-z0-9][a-z0-9_]{2,14}[a-z0-9]$/g;
    //下划线不能在首尾 也就是首尾必须是数字或字母
    console.log(r.test(email));

    /*
     * 如果说要验证一个通用的邮箱格式：不但要验证用户名，还要验证@后面的部分。
     比如：214asdf2A_ASd@qq.com   214asdf2A_ASd@qq.com.cn
     @前面的部分：数字、大小写字母、下划线、点、中横线，长度至少1位
     @和点之间的部分（域名部分）:大小写字母、数字，长度至少1位
     点后面的部分：小写字母、长度至少1位。但是点后面的部分可以写多个，如.com.cn
     */
    var email = 'asdf.-a22DA@qq.com.cn';
    var r = /^[\w.-]+@[A-Za-z0-9]+(\.[a-z]+)+$/g;

    //var r = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;  //tp中内置的通用邮箱验证格式
    console.log(r.test(email));

3、解决结巴程序

把“今今今天晚晚晚晚晚晚上吃吃吃吃吃吃鸡”字符串换成单字的形式，即“今天晚上吃鸡”；

 var str = '今今今天晚晚晚晚晚上吃吃吃吃吃吃鸡';
    //换成单个字的形式
    //var res = str.replace(/([\u4e00-\u9fa5])\1*/g, '$1');
    var res = str.replace(/([\u4e00-\u9fa5])\1+/g, '$1');
    console.log(res);

用户名验证

注册的时候，要求用户名：长度4~10位，不能是纯数字，不能是纯字母，不能有特殊符号，不能以数字打头。

var username = 'S2DS';
var r = /(?!^[a-zA-Z]+$)^[a-zA-Z][a-zA-Z0-9]{3,9}$/g;
console.log(r.test(username));

四、PHP中的正则表达式

语法和JavaScript中的正则语法基本一致。
PHP中的正则函数：

1、preg_match()

preg_match()返回匹配的次数，它的返回值是0或者是1.
0表示不匹配。
1表示匹配一次，因为preg_match在匹配一次之后就停止向后检索了。和js中不加g的情况一样。
查看匹配的结果：

$str = 'hello world';
$r = '/[a-z]/';
/**
 * preg_match
 * 返回值是0或者1
 * $r  正则表达式
 * $str 要执行正则匹配的字符串
 * $out 匹配的内容，是一个数组形式
 */
echo preg_match($r, $str, $out);
echo '<pre>';
print_r($out);

带有子表达式的例子：

/** 带有子表达式的例子 **/
$str = '1122 3455 6677 8989';
$r = '/(\d)\1(\d)\2/';
echo preg_match($r, $str, $out);
echo '<pre>';
print_r($out);

2、preg_match_all();

执行正则表达式的全局匹配，类似于js中的带g的匹配。
带有子表达式的例子：

$str = '1122 3455 6677 8989';
$r = '/(\d)\1(\d)\2/';
echo preg_match_all($r, $str, $out);
echo '<pre>';
print_r($out);

3、preg_replace();

执行正则替换。

替换字符串：

带有子表达式：

替换数组：

4、案例：解决贪婪问题？

无论是JS中，还是PHP中，正则表达式的匹配模式默认都是贪婪模式。
上述代码，查询至少一个字母就算匹配成功。但是在实际匹配的过程中，匹配到一个a之后，并没有停止，而是继续向后匹配，得到一个连续的字符串。这就是贪婪模式。

下面在正则表达式后面加入?，表示非贪婪模式：

默认是贪婪模式，必须使用非贪婪模式的例子：

PHP中，强制非贪婪模式：加入大写的修饰符U即可。

5、PHP中使用正则注意点 单引号

PHP中的正则表达式除了//以外，外面还要加引号，这个引号要用单引号。

五、 判断表单提交验证

1、表单提交才进行判断

2、表单提交的时候，判断用户名

3、判断密码（带密码强度）

 <script>
        //JS写到页面上面，必须加入onload事件
        window.onload = function(){
            var f = document.f; //找到表单
            //如果给表单绑定事件，则需要绑定提交事件
            f.onsubmit = function(){
                //对用户名进行验证（不能为空、长度必须大于4位、必须以字母开头）
                if(!/^[a-zA-Z]\w{3,}$/g.test(f.username.value)){
                    alert('用户名不符合条件');
                    f.username.focus(); //光标定位到输入框内
                    return false; //阻止表单提交
                }
                //验证密码（要求长度至少6位、不允许有特殊符号。带密码强度判断：数字、小写字母、大写字母，有一者，弱，有两者中，三者都有，强）
                /*
                下面的判断，要求密码是数字字母组合，并且长度大于等于6位
                */
                if(/^[0-9a-zA-Z]{6,}$/g.test(f.pwd.value)){
                    //长度可以，并且也没有特殊符号，然后判断强弱
                    //首先判断，是否是纯数字或纯小写字母或纯大写字母
                    if(/(^\d+$)|(^[a-z]+$)|(^[A-Z]+$)/g.test(f.pwd.value)){
                        alert('可以用，但是强度弱');
                        return false;
                        //下面的判断，判断是否是两者组合。
                    }else if(/(^[0-9a-z]+$)|(^[0-9A-Z]+$)|(^[A-Za-z]+$)/g.test(f.pwd.value)){
                        alert('可以用，但是强度中');
                        return false;
                        //下面的else就表示三者都存在的情况
                    }else{
                        alert('可以用，但是强度强');
                        return false;
                    }
                }else{
                    alert('请使用大于6位的数字字母组合');
                    return false;
                }
            };
            //如果是给提交按钮绑定事件，则需要绑定单击事件
            /*document.querySelector('input[type="submit"]').onclick = function () {
                alert(123);
                return false; //阻止表单提交
            };*/
        };
    </script>

<form name="f" action="07tanlan.php" method="post">
    用户名：<input type="text" name="username"><br>
    密　码：<input type="text" name="pwd"><br>
    手机号：<input type="text" name="tel" ><br>
    邮　箱：<input type="text" name="email"><br>
    <input type="submit" value="提交">
</form>

六、仿淘宝评分小星星

1、HTML+css

2、找到所有图片，绑定鼠标移入事件

3、找到鼠标移入的图片，设置它左侧和右侧的图片

 <style>
        img{
            float: left;
        }
    </style>
    <img src="images/rank_3.gif" alt="">
<img src="images/rank_4.gif" alt="">
<img src="images/rank_3.gif" alt="">
<img src="images/rank_4.gif" alt="">
<img src="images/rank_3.gif" alt="">
<img src="images/rank_4.gif" alt="">
<img src="images/rank_3.gif" alt="">
<img src="images/rank_4.gif" alt="">
<img src="images/rank_3.gif" alt="">
<img src="images/rank_4.gif" alt="">

<script>
    //找到每个img，然后绑定鼠标移入事件
    var imgs = document.images; //找到所有的图片
    //循环，为每个图片绑定鼠标移入事件
    for(var i=0; i<imgs.length; i++){
        //每一张图片都是一个dom对象
        //imgs[i]; 分别表示每一张图片
        imgs[i].a = i;  //给每一张图片都加入一个成员属性a，值是图片的下标
        imgs[i].onmouseover = function(){
            //找到当前鼠标移入的图片是哪一张，比如是第n 张
            //从第0 张到第n 张，变为黄色
            //从第n+1 张到最后，变为灰色
            //alert(this.a);  // a 就是鼠标移入的图片的下标
            for(var j=0; j<=this.a; j++){
                imgs[j].src = imgs[j].src.replace('rank_3', 'rank_1');
                imgs[j].src = imgs[j].src.replace('rank_4', 'rank_2');
            }
            for(var k=this.a+1; k<imgs.length; k++){
                imgs[k].src = imgs[k].src.replace('rank_1', 'rank_3');
                imgs[k].src = imgs[k].src.replace('rank_2', 'rank_4');
            }
        };
    }
</script>

七、标签页效果

1、HTML+css

2、JS代码

 <style>
        *{
            margin:0;
            padding:0;
            border:0 none;
        }
        ul,li{
            list-style: none; /*去掉ul li前面的小点点*/
        }
        li{
            display: inline-block; /*横向显示，并为块级元素*/
            width:80px;
            height:30px;
            background-color: burlywood;
            text-align: center;
            line-height: 30px;
            cursor: pointer; /*鼠标放上去，显示小手*/
        }
        div{
            width:400px;
            height:250px;
            background-color:#bc9665;
            display: none; /*默认内容区隐藏*/
        }
        /*让第一个内容区显示*/
        .content{
            display: block;
        }
        .tab{
            background-color:#bc9665;
        }
    </style>
    <ul>
    <li class="tab">体育</li>
    <li>娱乐</li>
    <li>PHP</li>
</ul>

<div class="content">这里是体育版块</div>
<div>娱乐八卦</div>
<div>PHP是世界上最好的语言</div>

<script>
    //给每个li绑定单击事件，单击的时候，修改li和div的class值
    var lis = document.getElementsByTagName('li'); //找到一个数组
    var divs = document.getElementsByTagName('div'); //找到所有的内容区，是数组
    //循环，为每个li绑定单击事件
    for(var i=0; i<lis.length; i++){
        //为每个li添加一个属性，这个属性表示li的下标
        lis[i].a = i;
        lis[i].onclick = function(){
            //当前点击的li的下标是this.a
            //alert(this.a);
            for(var j=0; j<lis.length; j++){
                if(j == this.a){
                    lis[j].className = 'tab';
                    divs[j].className = 'content';
                }else{
                    lis[j].className = '';
                    divs[j].className = '';
                }
            }
        };
    }


    //
    //var obj = {};
    //obj.a = 2;

    /*var a = {};
    var b = {};
    var c = {};
    var arr = [a, b, c];
    for(var i=0; i<arr.length; i++){
        arr[i].hh = i;
    }

    console.log(a.hh);
    console.log(b.hh);
    console.log(c.hh);*/
</script>

八、横向下拉菜单

1、HTML+css

2、JS代码

3、让下拉菜单慢慢变化

 <style>
        *{
            margin:0;
            padding:0;
            border:0 none;
        }
        ul,li{
            list-style: none;
        }
        /*找到较大的li，浮动，让他们显示在一行中*/
        body>ul>li{
            float: left;
        }
        /*下面设置顶级菜单*/
        a{
            display: block;
            width:100px;
            height:30px;
            background-color: #232323;
            color:#fff;
            text-decoration: none;
            line-height: 30px;
        }
        /*设置子菜单*/
        ul ul li{
            width:100px;
            height:30px;
            line-height: 30px;
            background-color: #666;
            color:#fff;
        }
        /*默认子菜单隐藏*/
        ul ul{
            display: none;
            overflow: hidden; /*超出部分隐藏*/
        }
    </style>
    <ul>
    <li>
        <a href="#">顶级菜单一</a>
        <ul>
            <li>子菜单11</li>
            <li>子菜单12</li>
            <li>子菜单13</li>
        </ul>
    </li>
    <li>
        <a href="#">顶级菜单二</a>
        <ul>
            <li>子菜单21</li>
            <li>子菜单22</li>
            <li>子菜单23</li>
        </ul>
    </li>
    <li>
        <a href="#">顶级菜单三</a>
        <ul>
            <li>子菜单31</li>
            <li>子菜单32</li>
            <li>子菜单33</li>
        </ul>
    </li>
</ul>

 //找到顶级菜单，绑定鼠标移入事件
    var lis = document.querySelectorAll('body>ul>li');
    for(var i=0; i<lis.length; i++){
        lis[i].onmouseover = function () {
            //鼠标移入，希望它对应的子菜单显示出来
            //this表示鼠标移入的那个对象
            this.children[1].style.display = 'block';
            var inEle = this.children[1];
            change(inEle);
        };

        //继续绑定鼠标离开事件
        lis[i].onmouseout = function () {
            this.children[1].style.display = 'none';
        };
    }

    //写一个函数，让元素的高度经过0.9秒 从0 慢慢变化到90
    function change(ele){
        //先让元素的高度置为0
        ele.style.height = 0;
        //经过180次，每次变化0.5像素
        for(var i=1; i<=180; i++){
            (function(x){
                setTimeout(function(){
                    ele.style.height = x*0.5 + 'px';
                }, x*5);
            })(i);
        }
    }