js:正则表达式

正则表达式的语法

定义

检测

检索

元字符

边界符

量词

字符类

表单判断案例

修饰符

过滤敏感词

正则表达式是一种用于匹配和操作文本的强大工具，它是由一系列字符和特殊字符组成的模式，用于描述要匹配的文本字符组合模式

正则表达式是一种通用的模式，在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]来表示这些字符

极大提高了灵活性和强大的匹配功能。

参考文档：MDN：https://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 = 'ygigitygigitygigitygigity'console.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 = 'ygigitygigitygigitygigity'console.log(/^gigity+$/.test(str));//falseconsole.log(/y+$/.test(str));//true

？：

只有出现0和1次为true，其余都为false

const str = 'ygigitygigitygigitygigity'console.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 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><style>span {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>
</head><body><input type="text"><span></span><script>const 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.className='error'}})</script>
</body></html>

修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

语法：

i 是单词 ignore 的缩写，正则匹配时字母不区分大小写

g 是单词 global 的缩写，匹配所有满足正则表达式的结果，一般用于全局替换

替换：replace 替换

和g一起作用，或是【|】竖线：

过滤敏感词

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><textarea name="" id="" cols="30" rows="10"></textarea><button>发布</button><div></div><script>const 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 lang="en"><head><meta charset="UTF-8"><title>小兔鲜儿 - 新鲜 惠民 快捷!</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/register.css"><link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head><body><!-- 项部导航 --><div class="xtx_topnav"><div class="wrapper"><!-- 顶部导航 --><ul class="xtx_navs"><li><a href="./login.html">请先登录</a></li><li><a href="./register.html">免费注册</a></li><li><a href="./center-order.html">我的订单</a></li><li><a href="./center.html">会员中心</a></li><li><a href="javascript:;">帮助中心</a></li><li><a href="javascript:;">在线客服</a></li><li><a href="javascript:;"><i class="mobile sprites"></i>手机版</a></li></ul></div></div><!-- 头部 --><div class="xtx_header"><div class="wrapper"><!-- 网站Logo --><h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1><!-- 主导航 --><div class="xtx_navs"><ul class="clearfix"><li><a href="./index.html">首页</a></li><li><a href="./category01.html">生鲜</a></li><li><a href="./category01.html">美食</a></li><li><a href="./category01.html">餐厨</a></li><li><a href="./category01.html">电器</a></li><li><a href="./category01.html">居家</a></li><li><a href="./category01.html">洗护</a></li><li><a href="./category01.html">孕婴</a></li><li><a href="./category01.html">服装</a></li></ul></div><!-- 站内搜索 --><div class="xtx_search clearfix"><!-- 购物车 --><a href="./cart-none.html" class="xtx_search_cart sprites"><i>2</i></a><!-- 搜索框 --><div class="xtx_search_wrapper"><input type="text" placeholder="搜一搜" onclick="location.href='./search.html'"></div></div></div></div><div class="xtx-wrapper"><div class="container"><!-- 卡片 --><div class="xtx-card"><h3>新用户注册</h3><form class="xtx-form"><div data-prop="username" class="xtx-form-item"><span class="iconfont icon-zhanghao"></span><input name="username" type="text" placeholder="设置用户名称"><span class="msg"></span></div><div data-prop="phone" class="xtx-form-item"><span class="iconfont icon-shouji"></span><input name="phone" type="text" placeholder="输入手机号码  "><span class="msg"></span></div><div data-prop="code" class="xtx-form-item"><span class="iconfont icon-zhibiaozhushibiaozhu"></span><input name="code" type="text" placeholder="短信验证码"><span class="msg"></span><a class="code" href="javascript:;">发送验证码</a></div><div data-prop="password" class="xtx-form-item"><span class="iconfont icon-suo"></span><input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合"><span class="msg"></span></div><div data-prop="confirm" class="xtx-form-item"><span class="iconfont icon-suo"></span><input name="confirm" type="password" placeholder="请再次输入上面密码"><span class="msg"></span></div><div class="xtx-form-item pl50"><i class="iconfont icon-queren"></i>已阅读并同意<i>《用户服务协议》</i></div><div class="xtx-form-item"><button class="submit">下一步</button><!-- <a class="submit" href="javascript:;">下一步</a> --></div></form></div></div></div><!-- 公共底部 --><div class="xtx_footer clearfix"><div class="wrapper"><!-- 联系我们 --><div class="contact clearfix"><dl><dt>客户服务</dt><dd class="chat">在线客服</dd><dd class="feedback">问题反馈</dd></dl><dl><dt>关注我们</dt><dd class="weixin">公众号</dd><dd class="weibo">微博</dd></dl><dl><dt>下载APP</dt><dd class="qrcode"><img src="./uploads/qrcode.jpg"></dd><dd class="download"><span>扫描二维码</span><span>立马下载APP</span><a href="javascript:;">下载页面</a></dd></dl><dl><dt>服务热线</dt><dd class="hotline">400-0000-000<small>周一至周日 8:00-18:00</small></dd></dl></div></div><!-- 其它 --><div class="extra"><div class="wrapper"><!-- 口号 --><div class="slogan"><a href="javascript:;" class="price">价格亲民</a><a href="javascript:;" class="express">物流快捷</a><a href="javascript:;" class="quality">品质新鲜</a></div><!-- 版权信息 --><div class="copyright"><p><a href="javascript:;">关于我们</a><a href="javascript:;">帮助中心</a><a href="javascript:;">售后服务</a><a href="javascript:;">配送与验收</a><a href="javascript:;">商务合作</a><a href="javascript:;">搜索推荐</a><a href="javascript:;">友情链接</a></p><p>CopyRight &copy; 小兔鲜儿</p></div></div></div></div><script>//验证码模块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('[name=username]')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('[name=phone]')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('[name=code]')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('[name=password]')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('[name=confirm]')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 lang="en"><head><meta charset="UTF-8"><title>小兔鲜儿 - 新鲜 惠民 快捷!</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit"><link rel="shortcut icon" href="../favicon.ico"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/login.css"><link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head><body><!-- 登录头部 --><div class="xtx-login-header"><h1 class="logo"></h1><a class="home" href="./index.html">进入网站首页</a></div><!-- 登录内容 --><div class="xtx-login-main"><div class="wrapper"><form action="" autocomplete="off"><div class="box"><div class="tab-nav"><a href="javascript:;" class="active" data-id="0">账户登录</a><a href="javascript:;" data-id="1">二维码登录</a></div><div class="tab-pane"><div class="link"><a href="javascript:;">手机验证码登录</a></div><div class="input"><span class="iconfont icon-zhanghao"></span><input required type="text" placeholder="请输入用户名称/手机号码" name="username"></div><div class="input"><span class="iconfont icon-suo"></span><input required type="password" placeholder="请输入密码" name="password"></div><div class="agree"><label for="my-checkbox"><input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree"><span class="iconfont icon-xuanze"></span></label>我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a></div><div class="button clearfix"><button type="submit" class="dl">登 录</button><!-- <a class="dl" href="./center.html">登 录</a> --><a class="fl" href="./forget.html">忘记密码？</a><a class="fr" href="./register.html">免费注册</a></div></div><div class="tab-pane" style="display: none;"><img class="code" src="./images/code.png" alt=""></div></div></form></div></div><!-- 登录底部 --><div class="xtx-login-footer"><!-- 版权信息 --><div class="copyright"><p><a href="javascript:;">关于我们</a><a href="javascript:;">帮助中心</a><a href="javascript:;">售后服务</a><a href="javascript:;">配送与验收</a><a href="javascript:;">商务合作</a><a href="javascript:;">搜索推荐</a><a href="javascript:;">友情链接</a></p><p>CopyRight &copy; 小兔鲜儿</p></div></div><script>//判断是否通过事件委托来自注册事件，关系太复杂的盒子（互相套来套去不建议使用事件委托）//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('[name=agree]')form.addEventListener('submit', function (e) {e.preventDefault()//判断是否勾选同意协议if (!agree.checked) {return alert('请勾选同意协议')}//保存用户名到本地const username = document.querySelector('[name=username]')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 href="javascript:;"><i class="iconfont icon-user">${uname}</i></a>`li2.innerHTML = `<a href="javascript:;">退出登录</a>`} else {li1.innerHTML = `<a href="./login.html">请先登录</a>`li2.innerHTML = `<a href="./register.hmtl">免费注册</a>`}}render()//退出登录的模块li2.addEventListener('click', function () {localStorage.removeItem('xtx-uname')render()})</script>