视频做网站背景,网上商城可行性分析报告,新遵义,下载app免费下载app目录
正则表达式的语法
定义
检测
检索
元字符
边界符
量词
字符类
表单判断案例
修饰符
过滤敏感词 正则表达式是一种用于匹配和操作文本的强大工具#xff0c;它是由一系列字符和特殊字符组成的模式#xff0c;用于描述要匹配的文本字符组合模式
正则表达式是一…目录
正则表达式的语法
定义
检测
检索
元字符
边界符
量词
字符类
表单判断案例
修饰符
过滤敏感词 正则表达式是一种用于匹配和操作文本的强大工具它是由一系列字符和特殊字符组成的模式用于描述要匹配的文本字符组合模式
正则表达式是一种通用的模式在js里一般用作验证表单
用户名表单只能输入英文字母、数字或者下划线 昵称输入框中可以输入中文(匹配) 过滤掉页面内容中的一些敏感词(替换)或从字符串中获取我们想要的特定部分(提取)等 。
正则表达式的语法
定义
定义正则表达式的语法//内部是正则表达式的字面量
const reg/兔子/
检测
使用test()方法查看正则表达式与指定的字符串是否匹配
const str我有三只小兔子
//定义正则表达式
const reg/兔子/
//是否匹配
console.log(reg.test(str));
匹配上了返回true没匹配上返回false
reg是正则表达式的对象test()是reg对象的方法而定义的正则表达式就相当于一套规则
在实际使用中我们要先有一套规则再进行检验
检索
除了test()还有一个方法
exec()方法在一个指定字符串中执行一个搜索匹配 const str我有三只小兔子分别是阿米娅兔兔特雷西娅兔兔德克萨斯兔兔//定义正则表达式const reg/兔兔///是否匹配console.log(reg.exec(str)); 如果匹配成功exec() 方法返回一个数组否则返回null 其中的index表示数组的下标14的位置上匹配成功
返回值不同是test()和exec()最大的区别
元字符
普通的字符只能描述他们本身而元字符是一些具有特殊意义的字符可以匹配一类字符例如普通字符里想表示26个英文字母需要abcdefg......一个一个写出来但是元字符可以用[a-z]来表示这些字符
极大提高了灵活性和强大的匹配功能。
参考文档MDNhttps://developer.mozilla.org/zhCN/docs/Web/JavaScript/Guide/Regular_Expressions
正则表达式的测试工具 http://tool.oschina.net/regex
元字符太多了所以我们对它做出分类分别是边界符、量词、字符类
边界符
表示字符的位置必须以某某字符开头、结尾等格式要求 第一个true:str里含有gigity
第二个和第三个的true是因为str以gigity开头/结尾
如果想要精确匹配
//以某一字符开头以某一字符结尾
console.log(/^gigity$/.test(str))
答案为什么是false? 当我们确定字符串的^和$也就是开头和结尾你们这个开头和结尾必须是同一个字符
也就是说只有这种情况才为true
//和正则表达式里面的字符一模一样才是true
console.log(/^gigity$/.test(gigity))//true
欸那你就要问了谁问你了怎么表示多个重复字符的正则表达式字面量呢所以我们要学
量词
表示字符的重复次数设定某个模式出现的次数 *
const str ygigitygigitygigitygigityconsole.log(/^gigity*$/.test(str));//falseconsole.log(/y*$/.test(str));//true
为什么第一个是false?第二个是true?
首先在字符后面加【*】则这个字符只作用于该字符正前方的字符也就是【y】那么这句正则表达式的意思就变成了【匹配的是以 gigity 开头后面可以跟 0 个或多个 y 的字符串】而该字符不满足这个规则所以false
所以根据这个规则我们写成第二种形式的意思是【含0个或多个y并且以y结尾的字符串】str满足条件所以true
如果你想匹配多个 gigity 的重复可以使用 /^(gigity)$/
const str gigitygigitygigitygigity;
console.log(/^(gigity)$/.test(str)); // true
当然如果我们写成这样
console.log(/^y*$/.test(str));
就false了因为这样的写法要求【字符串里只能有0或0个以上的y】 改为也很好理解至少有一个【y】 const str ygigitygigitygigitygigityconsole.log(/^gigity$/.test(str));//falseconsole.log(/y$/.test(str));//true 只有出现0和1次为true其余都为false
const str ygigitygigitygigitygigityconsole.log(/^gigity?$/.test(str));//falseconsole.log(/y?$/.test(str));//true
当然以上三种量词也可以辨别空白 console.log(/^y*$/.test());//trueconsole.log(/^y$/.test());//falseconsole.log(/^y?$/.test());//true
还可以设置固定字符出现的次数只有只出现四个【y】时为true
console.log(/^y{3}$/.test());//false
console.log(/^y{3}$/.test(y));//false
console.log(/^y{3}$/.test(yy));//false
console.log(/^y{3}$/.test(yyy));//true
可以用作判别手机号、验证码、身份证号码输入的位数是否正确
大于等于3即为true:
console.log(/^y{3,}$/.test(yy));//false
console.log(/^y{3,}$/.test(yyy));//true
console.log(/^y{3,}$/.test(yyyy));//true
console.log(/^y{3,}$/.test(yyyyy));//true
大于等于三小于等于4即为true注意{n,m}【】左右两边没有空格:
console.log(/^y{3,4}$/.test(yy));//false
console.log(/^y{3,4}$/.test(yyy));//true
console.log(/^y{3,4}$/.test(yyyy));//true
console.log(/^y{3,4}$/.test(yyyyy));//false
字符类
类似于[a-z]等表示一类字符的元字符\d表示0~9其实我在学makefile的时候就没觉得正则表达式方便到哪去
[]匹配字符集合后面的字符串只要包含abc中的任意一个字符都返回true: 当判定为【字符串里含a/b/c里的一个以上】的时候会判定为false,但是用上量词就会变为true:
使用连字符表示一个范围 Ø [a-z] 表示 a 到 z 26个英文字母都可以 Ø [a-zA-Z] 表示大小写都可以 Ø [0-9] 表示 0~9 的数字都可以 比如 1、在[]内加^符表示取反和[]内的字符取反[^abc]表示【abc之外的所有其他字符】 2、【.】匹配除了换行符的任何单个字符 3、预定义类 某些常见模式的简写方式。 表单判断案例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylespan {display: inline-block;width: 250px;height: 30px;vertical-align: middle;line-height: 30px;padding-left: 15px;}.error {color: red;/* background: url(./images/error1.png) no-repeat left center; */}.right {color: green;/* background: url(./images/right.png) no-repeat left center; */}/style
/headbodyinput typetextspan/spanscriptconst reg /^[a-zA-Z0-9-_]{6,16}$/const input document.querySelector(input)const span document.querySelector(span)input.addEventListener(blur, function () {if (reg.test(this.value)) {span.innerHTML 输入正确span.classList.remove(error)span.classList.add(right)} else {span.innerHTML 请输入6-16位的英文、数字或下划线// span.classList.remove(right)// span.classList.add(error)也可以用className来修改类名span.classNameerror}})/script
/body/html
修饰符
修饰符约束正则执行的某些细节行为如是否区分大小写、是否支持多行匹配等
语法 i 是单词 ignore 的缩写正则匹配时字母不区分大小写 g 是单词 global 的缩写匹配所有满足正则表达式的结果一般用于全局替换
替换replace 替换 和g一起作用或是【|】竖线 过滤敏感词
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytextarea name id cols30 rows10/textareabutton发布/buttondiv/divscriptconst tx document.querySelector(textarea)const btn document.querySelector(button)const div document.querySelector(div)btn.addEventListener(click, function () {// console.log(tx.value)div.innerHTML tx.value.replace(/wcnm/g,我上早八)})/script
/body/html 注册界面
利用之前学过的东西写一个注册页面
其中讲到了两个新的知识点
change事件是判断表单和之前的内容有没有区别的事件
classList.contains()可以确定该元素有没有包含某个类 !DOCTYPE html
html langenheadmeta charsetUTF-8title小兔鲜儿 - 新鲜 惠民 快捷!/titlemeta http-equivX-UA-Compatible contentIEedgemeta namerenderer contentwebkitlink relshortcut icon href./favicon.icolink relstylesheet href./css/common.csslink relstylesheet href./css/register.csslink relstylesheet hrefhttps://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css
/headbody!-- 项部导航 --div classxtx_topnavdiv classwrapper!-- 顶部导航 --ul classxtx_navslia href./login.html请先登录/a/lilia href./register.html免费注册/a/lilia href./center-order.html我的订单/a/lilia href./center.html会员中心/a/lilia hrefjavascript:;帮助中心/a/lilia hrefjavascript:;在线客服/a/lilia hrefjavascript:;i classmobile sprites/i手机版/a/li/ul/div/div!-- 头部 --div classxtx_headerdiv classwrapper!-- 网站Logo --h1 classxtx_logoa href/小兔鲜儿/a/h1!-- 主导航 --div classxtx_navsul classclearfixlia href./index.html首页/a/lilia href./category01.html生鲜/a/lilia href./category01.html美食/a/lilia href./category01.html餐厨/a/lilia href./category01.html电器/a/lilia href./category01.html居家/a/lilia href./category01.html洗护/a/lilia href./category01.html孕婴/a/lilia href./category01.html服装/a/li/ul/div!-- 站内搜索 --div classxtx_search clearfix!-- 购物车 --a href./cart-none.html classxtx_search_cart spritesi2/i/a!-- 搜索框 --div classxtx_search_wrapperinput typetext placeholder搜一搜 onclicklocation.href./search.html/div/div/div/divdiv classxtx-wrapperdiv classcontainer!-- 卡片 --div classxtx-cardh3新用户注册/h3form classxtx-formdiv data-propusername classxtx-form-itemspan classiconfont icon-zhanghao/spaninput nameusername typetext placeholder设置用户名称span classmsg/span/divdiv data-propphone classxtx-form-itemspan classiconfont icon-shouji/spaninput namephone typetext placeholder输入手机号码 span classmsg/span/divdiv data-propcode classxtx-form-itemspan classiconfont icon-zhibiaozhushibiaozhu/spaninput namecode typetext placeholder短信验证码span classmsg/spana classcode hrefjavascript:;发送验证码/a/divdiv data-proppassword classxtx-form-itemspan classiconfont icon-suo/spaninput namepassword typepassword placeholder设置6至20位字母、数字和符号组合span classmsg/span/divdiv data-propconfirm classxtx-form-itemspan classiconfont icon-suo/spaninput nameconfirm typepassword placeholder请再次输入上面密码span classmsg/span/divdiv classxtx-form-item pl50i classiconfont icon-queren/i已阅读并同意i《用户服务协议》/i/divdiv classxtx-form-itembutton classsubmit下一步/button!-- a classsubmit hrefjavascript:;下一步/a --/div/form/div/div/div!-- 公共底部 --div classxtx_footer clearfixdiv classwrapper!-- 联系我们 --div classcontact clearfixdldt客户服务/dtdd classchat在线客服/dddd classfeedback问题反馈/dd/dldldt关注我们/dtdd classweixin公众号/dddd classweibo微博/dd/dldldt下载APP/dtdd classqrcodeimg src./uploads/qrcode.jpg/dddd classdownloadspan扫描二维码/spanspan立马下载APP/spana hrefjavascript:;下载页面/a/dd/dldldt服务热线/dtdd classhotline400-0000-000small周一至周日 8:00-18:00/small/dd/dl/div/div!-- 其它 --div classextradiv classwrapper!-- 口号 --div classslogana hrefjavascript:; classprice价格亲民/aa hrefjavascript:; classexpress物流快捷/aa hrefjavascript:; classquality品质新鲜/a/div!-- 版权信息 --div classcopyrightpa hrefjavascript:;关于我们/aa hrefjavascript:;帮助中心/aa hrefjavascript:;售后服务/aa hrefjavascript:;配送与验收/aa hrefjavascript:;商务合作/aa hrefjavascript:;搜索推荐/aa hrefjavascript:;友情链接/a/ppCopyRight copy; 小兔鲜儿/p/div/div/div/divscript//验证码模块const code document.querySelector(.code)let flag truelet timerId code.addEventListener(click, function () {if (flag) {flag falselet i 5code.innerHTML 0${i}秒后重新获取setInterval(function () {i--code.innerHTML 0${i}秒后重新获取if (i 0) {clearInterval(timerId)flag truecode.innerHTML 重新获取}}, 1000)}})//用户名验证const username document.querySelector([nameusername])username.addEventListener(change, verifyName)function verifyName() {//使用正则表达式验证const reg /^[a-zA-Z0-9-_]{6,10}$///使用兄弟节点操纵span因为dom树里有很多spanconst span username.nextElementSibling//如果不通过if (!reg.test(username.value)) {//console.log(不通过);span.innerText 输入不合法请输入6~10位return false}//如果通过span.innerText return true}//手机号验证const phone document.querySelector([namephone])phone.addEventListener(change, verifyPhone)function verifyPhone() {//使用正则表达式验证const reg /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$///使用兄弟节点操纵span因为dom树里有很多spanconst span phone.nextElementSibling//如果不通过if (!reg.test(phone.value)) {//console.log(不通过);span.innerText 输入不合法请输入正确的11位手机号return false}//如果通过span.innerText return true}//验证码验证const codeInput document.querySelector([namecode])codeInput.addEventListener(change, verifyCodeInput)function verifyCodeInput() {//使用正则表达式验证const reg /^\d{6}$///使用兄弟节点操纵span因为dom树里有很多spanconst span codeInput.nextElementSibling//如果不通过if (!reg.test(codeInput.value)) {//console.log(不通过);span.innerText 输入不合法请输入6位数字return false}//如果通过span.innerText return true}//密码验证const password document.querySelector([namepassword])password.addEventListener(change, verifyPassword)function verifyPassword() {//使用正则表达式验证const reg /^[a-zA-Z0-9-_]{6,20}$///使用兄弟节点操纵span因为dom树里有很多spanconst span password.nextElementSibling//如果不通过if (!reg.test(password.value)) {//console.log(不通过);span.innerText 输入不合法请输入6~20位数字、字母和符号return false}//如果通过span.innerText return true}//再次输入密码const confirm document.querySelector([nameconfirm])confirm.addEventListener(change, verifyConfirm)function verifyConfirm() {//使用兄弟节点操纵span因为dom树里有很多spanconst span confirm.nextElementSibling//如果不通过if (confirm.value ! password.value) {//console.log(两次输入密码不一致);span.innerText 两次输入密码不一致return false}//如果通过span.innerText return true}//用户协议勾选状态切换const queren document.querySelector(.icon-queren)queren.addEventListener(click, function () {//切换类原有的删掉没有的添加this.classList.toggle(icon-queren2)})//表单提交//没有勾选同意协议提示需要勾选:classList.contains()查看有没有包含某个类如果有则返回true没有返回false//验证模块中有一个返回false则阻止提交const form document.querySelector(form)form.addEventListener(submit, function () {if (!queren.classList.contains(icon-queren2)) {alert(请勾选同意协议)//阻止默认行为才能真正阻止提交e.preventDefault()}//判断先前的验证模块返回false就代表没有通过验证if (!verifyName()) e.preventDefault()if (!verifyPhone) e.preventDefault()if (!verifyPassword) e.preventDefault()if (!verifyCodeInput) e.preventDefault()if (!verifyConfirm) e.preventDefault()})/script
/body/html
登录界面
!DOCTYPE html
html langenheadmeta charsetUTF-8title小兔鲜儿 - 新鲜 惠民 快捷!/titlemeta http-equivX-UA-Compatible contentIEedgemeta namerenderer contentwebkitlink relshortcut icon href../favicon.icolink relstylesheet href./css/common.csslink relstylesheet href./css/login.csslink relstylesheet hrefhttps://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css
/headbody!-- 登录头部 --div classxtx-login-headerh1 classlogo/h1a classhome href./index.html进入网站首页/a/div!-- 登录内容 --div classxtx-login-maindiv classwrapperform action autocompleteoffdiv classboxdiv classtab-nava hrefjavascript:; classactive data-id0账户登录/aa hrefjavascript:; data-id1二维码登录/a/divdiv classtab-panediv classlinka hrefjavascript:;手机验证码登录/a/divdiv classinputspan classiconfont icon-zhanghao/spaninput required typetext placeholder请输入用户名称/手机号码 nameusername/divdiv classinputspan classiconfont icon-suo/spaninput required typepassword placeholder请输入密码 namepassword/divdiv classagreelabel formy-checkboxinput typecheckbox value1 idmy-checkbox classremember nameagreespan classiconfont icon-xuanze/span/label我已同意 a hrefjavascript:;《服务条款》/a hrefjavascript:; 和 a《服务条款》/a/divdiv classbutton clearfixbutton typesubmit classdl登 录/button!-- a classdl href./center.html登 录/a --a classfl href./forget.html忘记密码/aa classfr href./register.html免费注册/a/div/divdiv classtab-pane styledisplay: none;img classcode src./images/code.png alt/div/div/form/div/div!-- 登录底部 --div classxtx-login-footer!-- 版权信息 --div classcopyrightpa hrefjavascript:;关于我们/aa hrefjavascript:;帮助中心/aa hrefjavascript:;售后服务/aa hrefjavascript:;配送与验收/aa hrefjavascript:;商务合作/aa hrefjavascript:;搜索推荐/aa hrefjavascript:;友情链接/a/ppCopyRight copy; 小兔鲜儿/p/div/divscript//判断是否通过事件委托来自注册事件关系太复杂的盒子互相套来套去不建议使用事件委托//tab栏切换使用事件委托const tab_nav document.querySelector(.tab-nav)const pane document.querySelectorAll(.tab-pane)tab_nav.addEventListener(click, function (e) {if (e.target.tagName A) {//取消上一个active位当前元素添加activetab_nav.querySelector(.active).classList.remove(active)e.target.classList.add(active)//通过for()循环将两个盒子都隐藏for (let i 0; i pane.length; i) {pane[i].style.display none}//让对应需要的pane显示pane[e.target.dataset.id].style.display block}})//点击提交模块const form document.querySelector(form)const agree document.querySelector([nameagree])form.addEventListener(submit, function (e) {e.preventDefault()//判断是否勾选同意协议if (!agree.checked) {return alert(请勾选同意协议)}//保存用户名到本地const username document.querySelector([nameusername])localStorage.setItem(xtx-uname, username.value)//跳转到主页location.href ./index.html})/script
/body/html
从登陆页面跳转到主页的模块js
script//从登录页面跳转过来 //获取第一个liconst li1 document.querySelector(.xtx_navs li:first-child)const li2 li1.nextElementSiblingfunction render() {const uname localStorage.getItem(xtx-uname)//console.log(uname)if (uname) {li1.innerHTM a hrefjavascript:;i classiconfont icon-user${uname}/i/ali2.innerHTML a hrefjavascript:;退出登录/a} else {li1.innerHTML a href./login.html请先登录/ali2.innerHTML a href./register.hmtl免费注册/a}}render()//退出登录的模块li2.addEventListener(click, function () {localStorage.removeItem(xtx-uname)render()})/script
