首页 > 其他分享> 文章详细

day15正则

2022-06-11 15:32:03 阅读：152 来源： 互联网

标签：购物车 day15 正则 localStorage 数组 var cararr oUserList

正则表达式

正则表达式是用于字符串匹配的(四个支持正则的方法search 查找下标 macth 查找数组 split切割 replace 替换)

正则表达式对象申明

1.new关键词对象声明

2.字符串模板声明(*)

var regex = /a/gi

g全局搜索

i忽略大小写

正则表达式的方法

exec 执行方法他返回对应的执行对象数组(没有匹配的返回null)

test 判断是否匹配(boolean 匹配为true 不匹配为false)

正则表达式得使用

^开头

$结尾

[]表示其中一个元素

var regx = /^[abcdef]$/ //表示其中一个元素 a | b | c | d | e | f

{}表示对应得个数(相当于重复写n次)

()分组集成到一起

var regx = /^([ab][cd]){2}$/ //acac adad bcbc bdbd

字母的表示

[A-Za-z]

数字表示

[0-9]

\d 表示数字

\D 表示非数字

空白字符

\s表示空白字符空格回车制表符等

\S表示非空白字符串

所有的字母数字下划线

\W非字母数字下划线

.表示所有的内容

修饰符

+ 一个到多个相当于{1,}

? 零个到一个相当于{0,1}

* 零个到多个相当于{0,}

注意事项:点号在对应的[]中显示为.而不是所有的内容在对应{} 后面不能直接接修饰符如果要接先要分组括起来

中文匹配的正则

[\u4e00-\u9fa5]

针对于上面的修饰符我们要将他变成对应的字符转移符号\

需要转义的内容[] () {} .+ ? / ^ $

捕获性分组及非捕获性分组 ?: 非捕获性体现到对应的数组 exec执行完的数组里面（默认会捕获）
var pattern = /(\d+)(?:[a-z])/; //一个或多个数字,和一个a-z的字母
var str =
"
123abc";
console.log(pattern.exec(str)); //"123a,123,a" //如果没有加上?: 就有a 加上了就没有了

今日问题:

在写改进购物车案例时,碰到了将页面刷新后再次渲染页面时报错或没有保存上次进行更改的内容

解决方法:

在每次打开页面时,判断localstorage中是否保存数组,为空则不渲染,不为空则将保存数组信息重新赋值给oUserlist数组和oCarlist数组并进行渲染

商品后台管理代码如下:

<!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>
    <script src="moment.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        fieldset {
            width: 500px;
            margin: auto;
            padding: 10px;
        }

        input {
            margin: 10px;
            text-indent: 5px;
        }

        button {
            padding: 0px 7px;
        }

        #searchBtn,
        .btn {
            margin: 0px 10px;
        }

        table {
            border-spacing: 0px;
        }

        td {
            width: 100px;
            text-align: center;
            border: 1px solid black;

        }

        td:nth-child(2n) {
            border-left: none;
            border-right: none;
        }

        td:last-child {
            border-right: 1px solid black;
        }
    </style>
</head>

<body>
    <fieldset>
        <legend>商品注册页面</legend>
        名称:<input type="text" id="name">
        <br>
        数量:<input type="text" id="number">
        <br>
        分类:<input type="text" id="type">
        <br>
        价格:<input type="text" id="price">
        <br>
        <button id="save">保存</button>
        <a href="./购物车页面.html">打开购物车</a>
    </fieldset>
    <fieldset>
        <legend>商品信息</legend>
        搜索: <input type="text" id="searchTxt"> <button id="searchBtn">搜索</button><button class="btn">返回</button>
        <table>
            <thead>
                <tr>
                    <td>名称</td>
                    <td>分类</td>
                    <td>数量</td>
                    <td>价格</td>
                    <td>注册时间</td>
                    <td>操作</td>
                    <td>购物车</td>
                </tr>
            </thead>
            <tbody id="tab">

            </tbody>
        </table>
    </fieldset>
</body>

</html>

<script>
    var oName = document.getElementById("name");
    var oType = document.getElementById("type");
    var oPrice = document.getElementById("price");
    var oSave = document.getElementById("save");
    var oNum = document.getElementById("number");
    var oSearchTxt = document.getElementById("searchTxt");
    var oSearchBtn = document.getElementById("searchBtn");
    var oBackbtn = document.querySelector(".btn");
    var oTab = document.getElementById("tab");
    //保存商品信息数组
    var oUserList = [];
    //保存购物车的数组
    var oCarList = [];

    //判断localstorage是否保存了信息,保存了就进行渲染并将localstorage保存到数组
    if (localStorage.getItem("userlist")) {
        render(JSON.parse(localStorage.getItem("userlist")));
        oUserList=JSON.parse(localStorage.getItem("userlist"));
        oCarList=JSON.parse(localStorage.getItem("carlist"));
    }
    console.log(JSON.parse(localStorage.getItem("userlist")));
    console.log(JSON.parse(localStorage.getItem("carlist")));
    //保存按钮的点击事件
    oSave.onclick = function () {
        var i = 0;
        //保存商品信息的对象
        var oUser = {
            name: oName.value,
            type: oType.value,
            price: oPrice.value,
            date: Date.now(),
            num: oNum.value,
            //计算购物车的商品数量
            count: 1,
        }
        //判断商品数组是否有相同的商品,有的话进行覆盖
        var isTag = oUserList.some(function (item, index) {
            i++;
            return item.name == oUser.name;
        })
        if (isTag) {
            oUserList[i] = {
                name: oName.value,
                type: oType.value,
                price: oPrice.value,
                date: Date.now(),
                num: oNum.value,
                count: 1,
            }
        }
        //将新商品存入数组
        oUserList.push(oUser);
        //将数组存入localStorage
        localStorage.setItem("userlist", JSON.stringify(oUserList));
        //进行页面渲染
        render(JSON.parse(localStorage.getItem("userlist")));
    }


    //页面渲染函数
    function render(arr) {
        var str = "";
        for (var i = 0; i < arr.length; i++) {
            str += `
                <tr class="user${i}">
                    <td>${arr[i].name}</td>
                    <td>${arr[i].type}</td>
                    <td>${arr[i].num}</td>
                    <td>${arr[i].price}</td>
                    <td>${moment(arr[i].date).format('YYYY-MM-DD HH:mm')}</td>
                    <td><a onclick="del(${i})" href="javascript:void(0)">删除</a></td>
                    <td><a onclick="add(${i})" href="javascript:void(0)">添加</a></td>
                </tr>
            `
        }
        oTab.innerHTML = str;
    }

    //删除函数
    function del(i) {
        //在页面进行删除
        oTab.removeChild(document.querySelector(`.user${i}`));
        //在商品数组中将其删除
        oUserList.splice(i, 1);
        //保存到localstora中
        localStorage.setItem("userlist", JSON.stringify(oUserList));
    }

    //添加购物车函数
    function add(num) {
        console.log(oUserList[num]);
        //判断标志
        var flag;
        //遍历购物车数组,如果名字相同则将数组下标赋值给flag
        oCarList.forEach(function (shop, index) {
            if (shop.name == oUserList[num].name) {
                flag = index;
            }
        })
        console.log(flag);
        //如果flag被赋值则表示购物车数组有相同的商品,则就将数量增加
        if (flag + 1) {
            oCarList[flag].count++;
        }
        //没有相同的就对应商品加入购物车数组
        else {
            oCarList.push(oUserList[num]);
        }
        console.log(oCarList);
        //将购物车数组存储到localstora中
        localStorage.setItem("carlist", JSON.stringify(oCarList));
    }

    //搜索函数
    oSearchBtn.onclick = function () {
        var txt = oSearchTxt.value;
        //过滤函数将名字与搜索的相同的商品形成数组,保存到searchList数组
        var searchList = oUserList.filter(function (item) {
            return item.name.indexOf(txt) != -1;
        })
        //进行页面渲染
        render(searchList);
    }
    //绑定返回函数
    oBackbtn.onclick = function () {
        render(oUserList);
    }
</script>

购物车页面如下:

<!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>
    <link rel="stylesheet" href="public.css">
    <style>
        body,
        html {
            height: 100%;
        }

        div {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        ul{
            border: 5px solid black;
            padding: 10px;
        }
        h1 {
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
    <div>
        <h1>我的购物车</h1>
        <ul></ul>
    </div>
</body>

</html>
<script>
    var oUl = document.querySelector("ul");
    //读取localstora中的carlist
    var cararr = JSON.parse(localStorage.getItem("carlist"));
    console.log(cararr);
    //如果cararr不为空,进行页面渲染
    if (cararr) {
        render(cararr);
    }

    //删除函数
    function del(i) {
        oUl.removeChild(document.querySelectorAll('li')[i]);
        cararr.splice(i, 1);
        localStorage.setItem("carlist",JSON.stringify(cararr));
        console.log(cararr);
    }

    //页面渲染函数
    function render(cararr) {
        for (var i = 0; i < cararr.length; i++) {
            oUl.innerHTML += `
            <li>商品名称:${cararr[i].name}  价格:${cararr[i].price}  数量:${cararr[i].count} <a onclick="del(${i})" href="javascript:void(0)">删除</a></li>
        `
        }
    }
</script>

标签：购物车,day15,正则,localStorage,数组,var,cararr,oUserList
来源： https://www.cnblogs.com/he-maoke/p/16366006.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

day15正则