我相信不管是学什么语言，是哪个派路的对这几个字应该不会陌生吧，正则表达式终于让我给碰到了，之前看到了说实话那是真看不懂，一点头绪没有，猜我都猜不出是什么意思，今天终于把这个了解了一番，大概对正则也有一个把握了，今天主要是学习了js的正则一些应用，比如说表单验证啊、中文输入验证啊、敏感词的替换啊、提取字符串啊这些、
1.
首先第一个案例来一个初次认识正则表达式学到的一些基础，是一个座机号码的验证案例，
本案例两个注意点 一个是正则表达式的或只有一个竖线
一个是验证时候数字也要加引号
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- 座机号码验证 全国座机号码两种格式 010-12345678 或者 0100-1234567--><script>var reg=/^\d{3}-\d{8}|\d{4}-\d{7}$/// var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/// var reg = /^\d{3,4}-\d{7,8}$/ console.log(reg.test('010-12345689'));// 本案例两个注意点 一个是正则表达式的或只有一个竖线// 一个是验证时候数字也要加引号</script></body></html>
2.
第二个案例来一个替换的案例，这个案例大家应该不陌生，比如在网上问候对方爸妈的时候经常会碰到这种尴尬情况，打出了好大些字，很有成就准备发出去的时候，结果全把精髓部分变成了*号
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><textareaname="" id="" cols="30" rows="10"></textarea><button>提交</button><div></div><script>var text= document.querySelector('textarea')var btn= document.querySelector('button')var div= document.querySelector('div') btn.onclick=function() { div.innerHTML= text.value.replace(/激情|爱情/g,'**') }</script></body></html>
3.
接下来是一个比较繁琐的一个案例，一个关于表单验证的案例
window.addEventListener('load',function() {var tel = /^1[3|4|5|8|9]\d{9}$/var phone = document.querySelector('#tel')function getBlur(obj, regexp, str) {
obj.onblur=function() {if (regexp.test(this.value)) {this.nextElementSibling.innerText = ''+str+'输入正确'this.nextElementSibling.className = 'success'
}else {this.nextElementSibling.innerText = ''+str+'输入错误'this.nextElementSibling.className = 'error'
}
}
}// 1.手机号码验证
getBlur(phone, tel, '手机号')// 2.QQ验证var regqq = /^[1-9]\d{4,10}$/var qq =this.document.querySelector('#qq')
getBlur(qq, regqq,'QQ号')// 3.中文汉字匹配// 汉字采用的正则是中文第一个的Unicode编码和最后一个var uname = /^[\u4e00-\u9fa5]{2,8}$/var nc =this.document.querySelector('#nc')
getBlur(nc, uname,'昵称')// 4.短信验证码var msgreg = /^\d{6}$/var msg =this.document.querySelector('#msg')
getBlur(msg, msgreg,'验证码')// 5.密码var pasreg = /^\w{6,16}$/var pwd =this.document.querySelector('#pwd')
getBlur(pwd, pasreg,'密码')// 6.确认密码var surePwd =this.document.querySelector('#surepwd')
surePwd.onblur=function() {if (this.value == pwd.value) {this.nextElementSibling.innerText = '密码输入正确'this.nextElementSibling.className = 'success'
}else {this.nextElementSibling.innerText = '两次密码不一样'this.nextElementSibling.className = 'error'
}
}
})
5.
然后是关于字符串同时也能被正则所使用的两个 方法一个是替换的replace方法，一个是可以作为关键字搜索的提取方法
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>/* 将下列字符串使用正则表达式替换文本 将字符串 'cqyzsC012QzAabcd'中的acq(忽略大小写)替换为'你好'*/var str='cqyzsC012QzAabcd'var str1='' str1= str.replace(/[acq]/gi,'你好') console.log(str1);</script></body></html>
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>/* 邮箱提取 将字符串'小明：大神么么哒，正好是我想要的，我的邮箱是xiaoming@qq.com小红： 我老公最爱看这个了，我想给他一个惊喜，么么么哒，邮箱是xiaohong@sina.com我：好人一生平安，邮箱是wuyou@163.com'中所有 的邮箱号码提取出来*/var str='小明：大神么么哒，正好是我想要的，我的邮箱是xiaoming@qq.com小红：我老公最爱看这个了，我想给他一个惊喜，么么么哒，邮箱是xiaohong@sina.com我：好人一生平安，邮箱是wuyou@163.com'// console.log(str);var str1= str.match(/[a-zA-Z]+@[a-zA-Z0-9]+.com/g) console.log(str1);</script></body></html>
