day15正则
正则表达式
正则表达式是用于字符串匹配的(四个支持正则的方法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
\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>
