JS 之（五）正向反向预查、正则案例、贪吃蛇案例

最新推荐文章于 2025-06-01 09:09:06 发布

转载最新推荐文章于 2025-06-01 09:09:06 发布 · 3.9k 阅读

文章标签：

#正则 #js #javascript

JS 笔记专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了正则表达式的正向与反向预查概念，包括正向预查中的匹配与不匹配，以及反向预查的应用。通过多个实例演示了如何在JavaScript与PHP中实现这些预查操作，并提供了具体的正则表达式案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正向反向预查

正向预查

辅助条件都在查找内容的后边。

正向匹配：

我们要查找出来的内容，右边必须出现指定的信息，并且其是辅助条件，不是结果的一部分。

var reg = /pattern(?=模式)/;  (?=模式)是辅助条件(可以通过具体“模式”进行设置)
小写字母字符串后边要出现连续数字信息
beijing2008    xianggang1997   aomen1999
LIAONING2014   SHANDONG2013   ####2012
taiwan@$(

正向不匹配：

我们要查找出来的内容，右边不能出现指定的信息，右边的信息是辅助条件，不是结果额一部分。

var reg = /pattern(?!模式)/;  (?!模式)是辅助条件，可以通过具体“模式”进行设置
today后边不能出现连续数字信息
today123   today###  todayABC254   today_good

<script type='text/javascript'>
    //正向匹配
    //var reg = /pattern(?=模式)/;
    //要求：匹配出来的hello字符串后边要跟着3个数字
    var reg = /hello(?=\d{3})/;
    var str = 'hello666666';//["hello", index: 0, input: "hello666666"]
    var str = 'hellohaha';//null

    //获取url地址中get参数名称
    var str = 'http://www.baidu.com?tag=t&name=tom&age=20';//["tag", "name", "age"]
    var reg = /\w+(?==)/g;

    //正向不匹配
    //数字后面不要出现字母
    var reg = /\d{4}(?![a-zA-Z])/;
    var str = '2221abc';//null
    var str = '001145';//["0011", index: 0, input: "001145"]
    var str = '1234##';//["1234", index: 0, input: "1234##"]

    var rst = str.match(reg);
    console.log(rst);
</script>

反向预查(php支持)

辅助条件在被查询内容的左边

反向匹配

左边必须出现指定信息

var reg = /(?<=模式)pattern/;  pattern是被匹配内容，左边(?<=模式)是辅助条件

<?php

//正则表达示使用
$reg = '/\d{2,4}/';
$str = '2016-09-13';

//单次匹配
//preg_match(查找字符串/模式,被匹配字符串,匹配到的结果array);
//全局匹配
//preg_match_all(查找字符串/模式,被匹配字符串,匹配到的结果array);
preg_match($reg,$str,$out);//array(1) { [0]=> string(4) "2016" }
preg_match_all($reg,$str,$out);//array(1) { [0]=> array(3) { [0]=> string(4) "2016" [1]=> string(2) "09" [2]=> string(2) "13" } }

//反向匹配
//连续4个字母左边必须出现3个数字
$reg = '/(?<=\d{3})[a-zA-Z]{4}/';
$str = '01241abcdee';//array(1) { [0]=> string(4) "abcd" }
$str = 'abcki';//array(0) { }
$str = '####adggs';//array(0) { }

//反向不匹配
//连线4个字母左边不能出现数字
$reg = '/(?<!\d)[a-zA-Z]{4}/';
$str = '01241abcdee';//array(0) { }
$str = 'abcki';//array(1) { [0]=> string(4) "abck" }
$str = '####adggs';//array(1) { [0]=> string(4) "adgg" }

preg_match($reg,$str,$out);
var_dump($out);

正则案例

匹配ip地址

<script type='text/javascript'>
    /*
        匹配ip地址
        192.168.22.33
        第一段：1-223
            个位：[1-9]
            十位：[1-9]\d
            百位：1\d\d
            二百位：
                200--219:2[01]\d
                220--223:22[0-3]
    */
    var one = /^([1-9]|[1-9]\d|1\d\d|2[01]\d|22[0-3])$/;
    var str = '192';
    /*
        第二段：0-255
            个位：[1-9]
            十位:[1-9]\d
            百位:1\d\d
            二百位：
                200--249：2[0-4]\d
                250--255: 25[0-5]
    */
    var second = /^([1-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/;
    var str = '256';
    //第三、四段和第二段一样

    var ipreg = /^([1-9]|[1-9]\d|1\d\d|2[01]\d|22[0-3])(\.([1-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])){3}$/;
    var str = '192.168.22.33';
    var rst = str.match(ipreg);
    console.log(rst);
</script>

匹配邮箱

<script type='text/javascript'>
    /*
        匹配邮箱
        595768804@qq.com
        znyyjk@163.com.cn
        Ma_ll@google.com
    */
    var reg = /^[a-zA-Z0-9][a-zA-Z0-9_]{4,18}@[a-z0-9A-Z]+(\.[a-z]+)+$/;
    var str = 'znyyjk@163.com.cn';

    var rst = str.match(reg);
    console.log(rst);
</script>

表单域验证

<html>
<head>
<title>正则表单域验证</title>
<meta charset='utf-8' />
<script type='text/javascript'>

    window.onload = function(){
        var fm = document.getElementsByTagName('form')[0];
        fm.onsubmit = function(){
            var reg = /^[a-zA-Z0-9][a-zA-Z0-9_]{4,18}@[a-z0-9A-Z]+(\.[a-z]+)+$/;
            var str = document.getElementsByTagName('input')[0].value;
            //console.log(str);
            var rst = str.match(reg);
            console.log(rst);
            if(rst === null){
                alert(str + ' 不是正确的邮箱格式');
                return false;
            }else{
                alert(str + '邮箱正确');
            }

        }
    }

</script>
</head>
<body>
<form method=post action='www.baidu.com'>
    <input type=text value=''>
    <input type=submit value=提交>
</form>
</body>
</html>

贪吃蛇案例

DOM
事件操作
面向对象
1. 绘制操作界面
2. 绘制食物
3. 绘制小蛇
4. 小蛇移动
　上：y轴坐标–，不断减1
　下：y轴坐标++，不断加1
　左：x轴坐标–，不断减1
　右：x轴坐标++，不断加1
　移动
5. 利用键盘事件控制小蛇移动方向
　事件中有“事件对象”可以感知被触发键子信息
6. 小蛇吃食物
　① 判断蛇头碰到食物，蛇头坐标与食物坐标一致
　② 小蛇吃食物，增加蛇节，创建新食物
7. 限制小蛇移动范围，
　同时蛇头不能吃到自己(蛇头坐标与蛇身子的任何一个蛇节坐标是否相等)

扩展：
　① 给吃食物做计数器显示
　② 给游戏设置难易度，例如每吃到5个食物就增加一个难度(升级)
　停止旧的setInterval()
　重新根据新的间隔时间设置setInterval()

这里写图片描述

<html>
<head>
<title>贪吃蛇</title>
<meta charset='utf-8' />
<script type='text/javascript'>
    //① 绘制操作界面
    function Map(){
        var width = 800;
        var height = 400;

        this.showmap = function(){
            //利用dom技术创建div元素并设置css样式
            //并把div追加到body里边
            var main = document.createElement('div');
            main.style.width = width + 'px';
            main.style.height = height + 'px';
            main.style.backgroundColor = 'pink';
            //背景方块图片
            //main.style.backgroundImage = 'url(12.jpg)';
            document.body.appendChild(main);
        }
    }
    //② 绘制食物
    function Food(){
        var len = 20;//食物边长

        //声明食物权值坐标为公开的成员
        this.xFood = 0;
        this.yFood = 0;

        this.pian = null;//用于保存食物的成员对象

        this.showfood = function(){
            if(this.pian === null){
                //利用dom创建一个div，绘制绿色的css背景颜色
                //宽度和高度都是20
                //最后div被追加给body
                this.pian = document.createElement('div');
                this.pian.style.width = this.pian.style.height = len + 'px';
                this.pian.style.backgroundColor = 'green';
                this.pian.style.position = 'absolute';
                document.body.appendChild(this.pian);
            }

            //食物摆放有“步进值20”防止放到线上
            //食物在地图的位置是变的，原因是其有“权值”
            //x轴权值的范围：0-39(Math.floor(Math.random()*40))
            //y轴权值的范围：0-19(Math.floor(Math.random()*20))

            //left和top对决定定位元素进行位置设定的两个样式
            //食物坐标=步进值 * 权值;
            this.xFood = Math.floor(Math.random()*40);
            this.yFood = Math.floor(Math.random()*20);
            this.pian.style.left = this.xFood*len + 'px';
            this.pian.style.top = this.yFood*len + 'px';
        }

    }
    //③ 绘制小蛇
    function Snake(){
        var len = 20;//每个蛇节的边长

        //蛇节：[x坐标，y坐标，颜色，div元素节点对象]
        this.snakebody = [[0,1,'green',null],[1,1,'green',null],[2,1,'green',null],[3,1,'red',null]];

        //蛇头默认移动方向(右)
        this.redirect = 'right';

        //绘制
        this.showsnake = function(){
            //遍历每个蛇节并进行具体设置
            for(var i=0; i<this.snakebody.length; i++){
                //创建每个蛇节div之前先判断，不要重复创建
                if(this.snakebody[i][3]===null){
                    this.snakebody[i][3] = document.createElement('div');
                    this.snakebody[i][3].style.width = this.snakebody[i][3].style.height = len + 'px';
                    this.snakebody[i][3].style.backgroundColor = this.snakebody[i][2];
                    this.snakebody[i][3].style.position = 'absolute';
                    document.body.appendChild(this.snakebody[i][3]);
                }
                //设置坐标=权值坐标 * 步进值;
                this.snakebody[i][3].style.left = this.snakebody[i][0] * len + 'px';
                this.snakebody[i][3].style.top = this.snakebody[i][1] * len +'px';
            }


        }

        //移动小蛇
        this.movesnake = function(){        
            //当前蛇节新坐标 等于下个蛇节的 旧坐标
            for(var i=0; i<this.snakebody.length-1; i++){
                this.snakebody[i][0] = this.snakebody[i+1][0];
                this.snakebody[i][1] = this.snakebody[i+1][1];
            }

            //蛇头移动
            if(this.redirect == 'right')
                this.snakebody[this.snakebody.length-1][0]++;//x轴坐标++
            else if(this.redirect == 'left')
                this.snakebody[this.snakebody.length-1][0]--;//x轴坐标--
            else if(this.redirect == 'up')
                this.snakebody[this.snakebody.length-1][1]--;//y轴坐标--
            else if(this.redirect == 'down')
                this.snakebody[this.snakebody.length-1][1]++;//y轴坐标++


            //蛇头碰到食物（蛇头坐标 与 食物坐标 对比）
            var xSnake = this.snakebody[this.snakebody.length-1][0];
            var ySnake = this.snakebody[this.snakebody.length-1][1];
            //food.xFood  food.yFood分别是食物的x/y轴坐标
            if(xSnake == food.xFood && ySnake == food.yFood){
                //增加蛇节
                //增加新蛇节，该蛇节的坐标等于"蛇尾巴节"旧的坐标
                var newjie = [this.snakebody[0][0],this.snakebody[0][1],'green',null];
                this.snakebody.unshift(newjie);//向数组的开头添加一个或更多元素，并返回新的长度

                //生成一个新食物
                food.showfood();
            }
            //规定小蛇在地图范围移动
            if(xSnake>39 || xSnake<0 || ySnake>19 || ySnake<0){
                alert('挂了');
                clearInterval(mytime);
                return false;
            }
            //蛇头吃到自己的判断
            for(var i=0; i<this.snakebody.length-1; i++){
                //蛇头坐标 是否 等于任何一个蛇节的坐标
                if(xSnake==this.snakebody[i][0] && ySnake==this.snakebody[i][1]){
                    alert('咬到自己了');
                    clearInterval(mytime);
                    return false;
                }
            }
            //根据新坐标重新绘制小蛇
            this.showsnake();
        }
    }
    window.onload = function(){
        var map = new Map();
        map.showmap();

        food = new Food();
        food.showfood();

        snake = new Snake();
        snake.showsnake();

        mytime = setInterval('snake.movesnake()',200);

        document.onkeyup = function(ev){
            switch(ev.keyCode){
                case 37:
                    snake.redirect = "left";
                    break;
                case 38:
                    snake.redirect = "up";
                    break;
                case 39:
                    snake.redirect = "right";
                    break;
                case 40:
                    snake.redirect = "down";
                    break;
            }
        }
    }
</script>
<style>
body{margin:0;}
</style>
</head>
<body>
</body>
</html>