目录
正则
一、 正则的概念
正则表达式就是一个描述字符规则的对象，可以用于检查一个字符串是否符合条件
常见的场景:用户名验证，手机号验证，身份证号验证
正则，会记一些符号，验证表单的时候会用到正则。说白了就是用于表单验证的。
推荐一个谷歌插件：极简插件前端助手
crx文件改后缀名zip解压，然后托到插件处
二、创建正则方式
有很多插件生成，前端助手就可以快速生成正则表达式。
讲一下语法，不然看不懂什么意思
2.1 构造函数去创建正则
let reg = new RegExp("hello","i"); //用new RegExp是你的正则表达式
console.log(reg.test("aaaHEllo"));//通过test方法验证(返回结果真假)
验证你的字符串aaaHEllo里边是否有hello（如果没有第二个参数i则区分大小写） i不区分大小写2.2 字面量去创建正则
let reg1 = /hello/i;//正则表达式
console.log(reg1.test("HELLo123abc"));//验证 //测试符不符合用的方法永远是test
验证你的字符串里边是否有hello i不区分大小写2,3 test方法
reg1.test("HELLo123abc")
reg1 定义的正则表达式
test用于验证 字符串是否符合 正则表达式三、正则修饰符
i g
i 不区分大小写
g 修饰符 验证时 从上一次结束的位置开始向后匹配
let reg1 = /hello/i
//console.log(reg1.test("HELLo123abc"));
// i 不区分大小写
// g 修饰符 验证时 从上一次结束的位置开始向后匹配
let reg2 = /hello/g
let reg2 = /hello/gi
console.log(reg2.test("hello HELLO world")); //真
console.log(reg2.test("hello HELLO world")); //真
console.log(reg2.test("hello HELLO world")); //假(匹配到第三个)，结尾了又从头匹配四、 正则的方法
lastIndex
// lastIndex 获取开始搜索的位置
// 如果不加g 每一次都是从0的位置开始检索
// let reg = /hello/i;
// console.log(reg.lastIndex); //0
// console.log(reg.test("hello world")); //true
// console.log(reg.lastIndex); //0
// console.log(reg.test("hello world")); //true
// console.log(reg.lastIndex); //0
let reg = /hello/ig;
console.log(reg.lastIndex); //0
console.log(reg.test("hello world")); //true
console.log(reg.lastIndex); //5
console.log(reg.test("hello world")); //false
console.log(reg.lastIndex); //0test方法
reg1.test("HELLo123abc")
reg1 定义的正则表达式
test用于验证 字符串是否符合 正则表达式exec
用于提取字符串中符合正则的内容 和 test方法很想
exec 如果匹配到返回数组 否则 null
let reg = /hello/ig;
console.log(reg.exec("hello heLLO world"));
console.log(reg.exec("hello heLLO world"));五、字符串方法
replace
var str = "hello hello world";
// str = str.replaceAll("hello","**"); //之前字符串的方法
// console.log(str);
let reg = /hello/g;
str = str.replace(reg,"**") //正则实现的
console.log(str);match
从字符串中提取匹配的所有内容‘
var str = "hello hello world";
let reg = /hello/ig;
console.log(str.match(reg));search
检索与正则所匹配的值，返回第一个和正则表达式匹配的起始位置，如果没匹配到就返回-1
console.log("hello HELLO world".search(/hello/ig));//0
console.log("hello HELLO world".search(/123/ig));//-1split
console.log("hello aa hello bb".split("hello"));
console.log("hello aa hello bb".split(/hello/i));六、正则表达式的构成
字面量字符: 大部分字符在正则中都是字面的含义，比如/hello/ /a/ /b/ 都叫字面量字符
元字符：除了字面量字符之外 有一些特殊含义的 就叫元字符 比如^ ? +
元字符-- 定位符
定位符可以将一个正则表达式固定在一行的开始或者结束
^ 代表必须以XXX开头
$ 代表必须以XXX结尾
console.log(/hello/.test("hello123")); //true
console.log(/hello/.test("ahello123")); //true
console.log(/^hello/.test("h123ello123")); //false 必须以hello开头
console.log(/test$/.test("abc test"));//true
console.log(/abc$/.test("hhh bbb ccc abc"));元字符 -- 限定符
限定字符串在正则表达式中出现多少次才能满足匹配
* 匹配表达式的0次或多次
+ 匹配表达式的1次或多次
？ 匹配表达式的0次或1次
{n} 确定匹配n次
{n,} 至少匹配n次
{n,m} 至少匹配n次 最多匹配m次
// console.log(/^he*l$/.test("hl"));//true 匹配*前边的字母出现的次数
// console.log(/^he*l$/.test("hel"));//true 匹配*前边的字母出现的次数
// console.log(/^he*l$/.test("heel"));//true 匹配*前边的字母出现的次数
// console.log(/^he*l$/.test("heeel"));//true 匹配*前边的字母出现的次数
// console.log(/^he+l$/.test("hl"));//false 匹配+前边的字母出现的次数
// console.log(/^he+l$/.test("hel"));//true 匹配+前边的字母出现的次数
// console.log(/^he+l$/.test("heel"));//true 匹配+前边的字母出现的次数
// console.log(/^he+l$/.test("heeel"));//true 匹配+前边的字母出现的次数
// console.log(/^he?l$/.test("hl"));//true 匹配?前边的字母出现的次数
// console.log(/^he?l$/.test("hel"));//true 匹配?前边的字母出现的次数
// console.log(/^he?l$/.test("heel"));//false 匹配?前边的字母出现的次数
// console.log(/^he?l$/.test("heeel"));//false 匹配?前边的字母出现的次数
//{n} 确定匹配n次
// {n,} 至少匹配n次
// {n,m} 至少匹配n次 最多匹配m次
console.log(/^he{1}l$/.test("hl"));//false
console.log(/^he{1}l$/.test("hel"));//true
console.log(/^he{1}l$/.test("heel"));//false
console.log(/^he{1}l$/.test("heeel"));//false
console.log(/^he{1,}l$/.test("hl"));//false
console.log(/^he{1,}l$/.test("hel"));//true
console.log(/^he{1,}l$/.test("heeeeeel"));//true
console.log(/^he{1,3}l$/.test("hl"));//false
console.log(/^he{1,3}l$/.test("hel"));//true
console.log(/^he{1,3}l$/.test("heel"));//true
console.log(/^he{1,3}l$/.test("heeel"));//true
console.log(/^he{1,3}l$/.test("heeeel"));//false元字符 - 字符匹配符
// 开头必须是a-f之间的某个字符
console.log(/^[abcd]/.test("ppabc"));false
console.log(/^[abcd]/.test("appabc"));true
console.log(/^[abcd]/.test("hhhppabc"));false
// 匹配a-z里边的所有字符
console.log(/^[a-z]/.test("j123234"));
console.log(/^[a-z]/.test("123234"));
console.log(/^[a-z,A-Z]/.test("A123234"));
console.log(/^[a-z,A-Z,0-9]/.test("123234"));
// 开头必须是987
console.log(/^[987]/.test("j123234"));
// 匹配不包含数字的
console.log(/^[^0-9]/.test("1234"));
console.log(/^[^0-9]/.test("a234"));
console.log(/^[^0-9]/.test("顶顶顶顶234"));
\d 匹配0-9之间的数字 相当于[0-9]
\D 匹配除了0-9之间的数字 相当于[^0-9]
\w 匹配任意字母、数字、下划线 相当于[a-zA-Z0-9_]
\W 匹配除了任意字母、数字、下划线 相当于[^a-zA-Z0-9_]
\s 匹配空格（包含换行、tab、空格）
\S 匹配非空格
. 匹配除了\n 之外的任何单个字符
// \d 匹配0-9之间的数字 相当于[0-9]
console.log(/^\d/.test("a123"));
// \D 匹配除了0-9之间的数字 相当于[^0-9]
console.log(/^\D/.test("哈哈123"));
// \w 匹配任意字母、数字、下划线 相当于[a-zA-Z0-9_]
console.log(/^\w/.test("_哈123"));
// \W 匹配除了任意字母、数字、下划线 相当于[^a-zA-Z0-9_]
console.log(/^\W/.test("%哈123"));
// \s 匹配空格（包含换行、tab、空格）
console.log(/^\s/.test(`
_哈123`));
// \S 匹配非空格
console.log(/^\S/.test(`_哈123`));
// . 匹配除了 \n(换行) 之外的任何单个字符
console.log(/^./.test(`
999`));
console.log(/^./.test(`\n999`));元字符--转义符\
转义转化它本来的含义
匹配某些特殊含义的字符，，比如有+ 号？号 . 点这些都有自己含义 如果我想匹配这些内容 就必须转义\
转义了就是失去本身的功能，仅仅是个字符而已。本来\n是换行 转义后 n就是n
本来是n，转义后就是\n换行
console.log(/.com$/.test("a.com"));//true
console.log(/\.com$/.test("acom"));//false
console.log(/\*com$/.test("*com"));//true
元字符：选择匹配符
可以匹配多个规则，| 类似或者的意思 如果cat|dog 表示匹配cat或者dog
console.log(/dog|cat/.test("dog"));
console.log(/dog|cat/.test("cat"));
console.log(/^11|22/.test("22cat")); 应用
1：掌握正则创建方式
2：尽量记一下语法
3：学这些语法可以能看懂人家写的正则，也可以自己写
// 去除字符串的首尾空格
var str = " abfjsdhfjsdf ";
var str1 = "abfjsdhfjsdf";
let reg = / /g;
console.log(str.replace(reg,""));
console.log(str1);
// 匹配QQ邮箱
// 2324234@qq.com
console.log(/^\d{5,}@qq\.com$/.test("1321@qq.com"));
// 匹配手机号
console.log(/^1[3-9]\d{9}$/.test("13789724567"));常用正则前端助手
百度就行
点击一下图标
怎么用？
<script>
var reg=/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
//reg.test("04556");
console.log(reg.test("04556"));
</script>
//右键打开网页 控制台<body>
<form action="#">
用户名：* <input type="text"> <span></span> <br><br>
密码：* <input type="text"> <span></span> <br><br>
确认密码：*<input type="text"> <span></span> <br><br>
昵称：<input type="text"> <span></span> <br><br>
头像：<input type="file"> <span></span> <br><br>
电子邮箱：<input type="email"> <span></span> <br> <br>
<button>提交</button>
</form>
<script>
let ipts = document.querySelectorAll("input");
let btn = document.querySelector("button");
// 1-记录一下输入框的值是否需要验证
let isUsername = false; //小写字母和数字组合 2-16位
let isPassword = false; // 只要不是空白都行
let isRePassword = false;
let isNickname = true;
let isAvatar = true;
let isEmail = false;
ipts[0].onchange=function(){
let reg = /[a-z][0-9]+|[0-9][a-z]+/;
// this 在事件处理函数里 this指向的是当前元素
if(reg.test(this.value)){
isUsername = true;
this.nextElementSibling.innerHTML = "格式正确";
this.nextElementSibling.style.color="green"
}else{
this.nextElementSibling.innerHTML = "格式不正确";
this.nextElementSibling.style.color="red";
isUsername = false;
}
}
ipts[1].onchange=function(){
let reg = /^\S{6,16}$/
if(reg.test(this.value)){
isPassword = true;
this.nextElementSibling.style.color="green";
let level = getpwdlevel(this.value);
if(level==1){
this.nextElementSibling.innerHTML = "格式正确-弱";
}else if(level==2){
this.nextElementSibling.innerHTML = "格式正确-中";
}else{
this.nextElementSibling.innerHTML = "格式正确-强";
}
}else{
this.nextElementSibling.innerHTML = "格式不正确";
this.nextElementSibling.style.color="red";
isPassword = false;
}
}
ipts[2].onchange=function(){
if(this.value == ipts[1].value){
isRePassword = true;
this.nextElementSibling.innerHTML = "密码一致";
this.nextElementSibling.style.color="green";
}else{
isRePassword = false;
this.nextElementSibling.innerHTML = "两次的密码不一致";
this.nextElementSibling.style.color="red";
}
}
ipts[3].onchange =function(){
let reg = /^\S{1,10}$/
if(reg.test(this.value)){
isNickname = true;
this.nextElementSibling.innerHTML = "格式正确";
this.nextElementSibling.style.color="green"
}else{
isNickname = false
this.nextElementSibling.innerHTML = "格式不正确";
this.nextElementSibling.style.color="red"
}
}
ipts[4].onchange =function(){
// .png
let reg = /\.png$/
if(reg.test(this.value)){
isAvatar = true
this.nextElementSibling.innerHTML = "格式正确";
this.nextElementSibling.style.color="green"
}else{
isAvatar = false
this.nextElementSibling.innerHTML = "格式不正确";
this.nextElementSibling.style.color="red"
}
}
ipts[5].onchange=function(){
let reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
if(reg.test(this.value)){
isEmail = true
this.nextElementSibling.innerHTML = "格式正确";
this.nextElementSibling.style.color="green"
}else{
isEmail = false
this.nextElementSibling.innerHTML = "格式不正确";
this.nextElementSibling.style.color="red"
}
}
btn.onclick=function(){
if(isAvatar&&isEmail&&isNickname&&isPassword&&isRePassword&&isUsername){
alert("注册成功")
}else{
alert("请在次检查")
}
}
// 封装一个密码强弱的函数
function getpwdlevel(pwd){
// 只有数字、字母、特殊字符里其中一项 就是 弱
// 有其中两项就是 中
// 有其中三项 强
let n =0;
if(/\d/.test(pwd)){
n++
}
if(/[a-zA-Z]/.test(pwd)){
n++
}
if(/[^0-9a-zA-Z]/.test(pwd)){
n++
}
return n;
}
</script>
</body>
扫一扫
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
