大前端基础之JS正则表达式
先来个常用的8到16位高级密码正则表达式
/^(?=\D+\d)(?=.[a-z])(?=.[A-Z])[a-zA-Z0-9]{8,16}$/
解释
(?=\D+\d) 条件是首字母不能是数字，但是整个字符串中必须含有1个数字
(?=.[a-z]) 必须包含一个小写字母，字母可以在任意位置*
(?=.*[A-Z]) 必须包含一个大写字母，字母可以在任意位置
[a-zA-Z0-9]{8,16} 大小写字母和数字字符最少8个，最多个16
正则表达式
作用: 查找、替换，通常用作验证，截取，隐藏，编码
一、正则表达式的创建
1、字面量写法
var reg=/表达式/修饰符
var reg=/ab/g;
修饰符
1）g 全部
2）i 不区分大小写
3）m 多行匹配
2、构造函数创建方法
var reg=new RegExp(“表达式”,“修饰符”)；
var reg=new RegExp(“ab”,“g”);
第二种方法实际上是将一个字符串转化为正则对象
二、正则表达式的方法 test exec
1、 test 查看字符串是否有满足正则表达式的内容，会查完，查一次，如果有，返回true，没有就返回false。
var bool=reg.test(“abcde”);
这里indexOf和text都可以执行，等同，但是一个是返回下标，一个是返回布尔值。
var str=“eksdakjdksdh”;
if(str.indexOf(“sa”)>-1){
console.log(“这个字符串中有sa字符”);
}
if(/sa/.test(str)){
console.log(“这个字符串中有sa字符”);
}
2、exec 查找符合正则内容 ，index就是下标，返回一个以查找到的值为属性值的数组，没找到就会返回null。
不能查找多个
var str=“eksakjdksadh”;
console.log(/sa/g.exec(str)); Array(1)==>0:“sa”
三.字符串用在的正则表达式中的方法
1、replace 替换， 替换字符"z"也可以为函数,返回一个改变后的字符串，原字符串不变。
var str=“abcedg”;
str.replace(/a/,“z”);
var str=“abcdabcd”;
replace 字符替换
str=str.replace(/a/,“z”);//单字替换
str=str.replace(/a/g,“z”);//多个替换
str=str.replace(/[ac]/g,"z");
str=str.replace(/[ac]/g,function(item,index){
// replace后面的函数 参数有2个，第一个是查找到的元素，第二个是下标
// 这个函数中return 的结果就是这个对于的字符串要替换成什么
if(item==="a") return "x";
if(item==="c") return "y";
})
2、 match查找返回数组
var str=“abcdabcd”;
str.match(/a/);
console.log(str.match(/a/));//查找一个时，与test类似，可以返回一个数组，下标和查找到的内容
console.log(str.match(/a/g));//查找多个，就会把每个查找到的内容返回出来
3、 search查找元素，返回下标
var str=“abcdabcd”;
str.search(/a/);
console.log(str.search(/c/));//只能找到一个正则表达式的下标
4、 以a分割字符串，返回数组。此时a在首位的时候，以a分割，a前面还有一个空字符，所以会分成为 [0:"",1:“bcedg”]
var str=“abcedg”;
str.split(/a/);
四、正则表达式基础
1、元字符
var reg=/abc/;
abc就是元字符，要求必须包含a接下来是b，再接下来是c的字符
2、 通配符点 . 任意一个字符
var reg=/c.t/g; c接下来的字符任意一个，然后在接上t；
“cdtcat”.match(reg); ==》cdt和cat
var reg=/a./g
var str="ababdeaf";
str=str.replace(reg,"az");
console.log(str); //azazdeaz
3、 \反斜杠，将在正则里有特殊意义的字符改为正常字符；
当遇到 \内容 相当于将内容转换为字符 \ 表示\字符
4、[],群组选择符，满足[]内任意一个字符 ，中括号内代表任意一个字符
var str=“a&tacta1tadtalt”;
console.log(str.match(/a.t/g));//输出结果为[0:a&t,1:act,2:a1t,3:adt,4:alt]
console.log(str.match(/a[abcdef]t/g));a接上[abcdef]中的任意一个字符再接上t
// [0-9] [0123456789]
// [a-z]
// [A-Z]
// [a-zA-Z]
// [a-Z] 错误的 小写字母的编码数字大，大写编码小
// [A-z] 错误的 Z到a直接还有其他字符
// /[A-Za-z0-9]/
// console.log(String.fromCharCode(0x4e03))
// /[\u4e00-\u9fa5]/ 匹配中文，其中\代表16进制0x
. 这个通配符在[]内不需要转义，因为在中括号内.就是字符.不是通配符
// 不管中括号中有什么内容，都只代表着一个字符
// console.log("1231".match(/[1-31]/g));//123 多出1重复无效
除了通配符. 以外在[]内其它符号仍需要转义 [,],这两个字符也需要转义
// console.log("a[b]c".match(/[\[\]]/g));
5、 反义字符 ^
[^0-9] 除了数字以外的所有字符
/[^a-zA-Z]/ 除了字母以外
/[a^cb]/ 如果反义字符不是[]的第一位，就代表反义字符字符。实际这个是匹配 acb^,四个字符中任意一个
// /\w/ === /[a-zA-Z0-9_]/
// /\W/ === /[^a-zA-Z0-9_]/
// /\d/ === /[0-9]/;
// /\D/ === /[^0-9]/;
// /\s/ === / / 空格
// /\S/ 非空格
// console.log("a c".match(/\s/));
\b 单词分隔符
\B 非单词分隔符
// 单词分隔符并不是空格，是英文单词之间的间隙
6、 重复 {}
var str=“caaaaaaat”;
和a{7}一样的效果，a重复7次
console.log(/ca{7}t/.test(str));//true;
eg:
重写： /[0-9][0-9][0-9][0-9]-[0-9][0-9]-[0-9][0-9]/
1、 /\d\d\d\d-\d\d-\d\d/
2、 /\d{4}-\d{2}-\d{2}/
3、 /\d{4}(-\d{2}){2}/ //里面的-也重复
// 任何内容重复0次，就是"" a{0} z{0} 9{0} 都是""
// console.log("asajhdksahd".split(/a{0}/));==》以10个元素为长度的空字符组成的数组
// console.log("aaaaa".match(/a{0}/g)); a{0}为"";
// console.log("aaaaa".match(/aa{0}/g));// aa{0} --->a""--->a 如果没有(),{}针对前一个，
// /[a{2}]/ 这样并不是重复，[]里面是代表一个字符 这里代表a,{,2,},4个字符任意一个
var str="caat"; //希望可以满足 caat,caaat,caaaat,caaaaat
// 要满足这样重复次数就不确定最小重复2次，最多重复5次
console.log(/ca{2}t/.test(str)); //一个参数代表重复n次；
console.log(/ca{2,5}t/.test("cat"));false//最少重复2次，最多重复5次
// {0,1} 有或者没有这个字符都可以
console.log(/cats{0,1}/.test("cat"));//true；
console.log(/cats{0,1}/.test("cats"));//true；
扩展：
// 最大优先匹配 贪婪匹配
console.log("aaaaaaaaab".match(/a{0,4}/g));//这里会匹配到最大的位数。
// 最少2个，最多不限
console.log("caaaaaaaaaat".match(/ca{2,}t/));
console.log("aaaaaaaaaaaa".match(/a{0,}/g));
// /ca{0,}t/ === /ca*t/ {0,} * 有或者没有，有多少个都可以
// /ca{1,}t/ === /ca+t/ {1,} + 有至少一个以上
// /ca{0,1}t/ === /ca?t/ {0,1} ? 有或者没有都行，最多1个
// 非贪婪匹配
console.log("caataaaataaaaat".match(/c.*t/)); ==》贪婪匹配选择符合条件的全部
console.log("caataaaataaaaat".match(/c.*?t/));==》非贪婪匹配选符合条件的最小一个caat
更深一层理解：
console.log("<div><span></span></div><a></a>".match(/<\/?[a-z]+>/g));
console.log("<div><span></span></div><a></a>".match(/<\/?.+>/g));//两种效果一样，只有一个，匹配全部 [0：<div><span></span></div><a></a>]
// 非贪婪匹配 在+号后面加里? 表示取最少
// console.log("<div><span></span></div><a></a>".match(/<\/?.+?>/g));[0："<div>" 1:"<span>" 2:"</span>" 3:"</div>" 4:"<a>" 5:</a>]
7 起始符^和结束符$;
^ 写在[]内叫反义，写在中括号外最前叫做起始
$ 写在正则最后叫做结束
8 | 或者 依次进行匹配,一般和()一起使用；
console.log("abac".match(/a[bc]/g)); //ab或者cd
console.log("abcd".match(/ab|cd/g)); //ab或者cd
console.log("abcd".match(/a|b|c|d/));相当于 /[abcd]/
// |写在前面先匹配，然后再向后匹配,匹配一次；
console.log("abcd".match(/ab|cd|/g));//当多写一个或者符号，最后一个代表或者一个""
console.log("abcd".match(/ab||cd/g));//[0:ab,1:"",2:"",3:""];
//当在中间多写一个或者符号，代表或者一个""，这样匹配完""后，cd就不匹配了
console.log("abcd".match(/|ab|cd/g));//[0:"",1:"",2:"",3:"",4:""]
//当多写一个或者符号，代表或者一个""，这样匹配完""后，ab和后面的cd就不匹配了
9、 ?= ?! ?<= ?<!当然，这里的？是英文状态上的？;
?= ?! 紧邻其后
console.log(“abad”.match(/a(?=d)/g)); //Array(1)[0:a];
var str=“abad”.replace(/a(?=d)/,“z”);//abzd;判断条件前的字符是否为判断紧邻其后的字符。
var str=“abadac”.replace(/a(?!d)/g,“z”); ==>azadaz错误的； 正确的是zbadzc ;修改的是a，这里表示判断条件前的字符非在判断紧邻其后的字符，（）里面是条件
?<= ?<! 前置条件
var str=“abcbdb”.replace(/(?<=c)b/g,“z”);//abczdb，满足b前面的是c的b
var str=“abcbdb”.replace(/(?<!c)b/g,“z”);
10 、 () 群组
1） 将a,b,c使用（）后，分别被分为3个组，只有在不使用g全局的情况match可以看到
2） 当使用分组时，不要使用g全局匹配
3） 分组的顺序是从外向内，从前向后
console.log(“abc”.match(/(a(b)c)/)) 会返回 “abc” “abc” “b”;
eg:
修改号码中间的 "186****7689"
var str="18675467689";
$1 是群组1 $3 是群组3
console.log(str.match(/^(\d{3})(\d{4})(\d{4})$/))
str=str.replace(/^(\d{3})(\d{4})(\d{4})$/,"$1****$3");
11、 - 范围 a-z 0-8之间 一般和[]配合
12、 [\u4e00-\u9fa5] 匹配中文
13 、 正则表达式中的比较常用的验证方法
用户名
/^\w{8,16}$/
邮箱验证
/^\w{5,}\@[a-zA-Z0-9]{2,}\.(com|net|org)(\.cn)?$/
电话号码
/^1\d{10}$/
网址验证
/^https?:\/\/www\.\w+\.\w+$/
eg:
var str = "<p>Uber的这款无人车原型配备了多个<strong>摄像头</strong>、<em>激光雷达</em>以及<span>传感器</span>，可看清100米范围内任何方向的东西</p><br/><p>第二行内容，哎嘿，第二行内容</p>";
//要求： 把里面除<br />之外所有的标签去掉，如果标签是br 则换成\n
str=str.replace(/<\/?(.+?)\/?>/g,function(a,b,c){
if(b.indexOf("br")>-1) return "\n";
return "";
}); // 这里的reture结果就是替换内容
回顾贪婪匹配和非贪婪匹配：
var str="#ak%as#sdakh2#18371283#...#"
// 贪婪匹配
console.log(str.match(/#.*#/)) 这里取最长的
// 非贪婪匹配
console.log(str.match(/#.*?#/)) 这里取最短的
来个压轴，常用的表单验证
var form=document.querySelector("form");
// 获取所有的input列表转换为数组
var list=Array.from(document.getElementsByTagName("input"));
list.pop();
var arr=[];
for(var i=0;i<list.length;i++){
// 初始化让每个元素都标示没有验证通过，都是false
arr.push(false);
}
form.addEventListener("submit",formHandler);
form.addEventListener("input",formHandler);
function formHandler(e){
if(e.type==="input"){
// 获取当前input触发文本框是数组中第几个
var index=list.indexOf(e.target);
// 执行验证，带入当前是第几个文本框，文本内容
var bool=getVerify(index,e.target.value);
// 本次验证文本内容是否正确
if(bool){
// 如果正确就让本次验证内容后面的元素span添加内容改变颜色
e.target.nextElementSibling.textContent="正确的";
e.target.nextElementSibling.style.color="green";
}else{
// 如果不正确提示错误，红色
e.target.nextElementSibling.textContent="错误的";
e.target.nextElementSibling.style.color="red";
}
// index是当前验证元素list列表的第几个元素
console.log(arr,index);
// 让arr数组的对于顺序标示为是否验证正确
// 数组中对于下标顺序，对于的input顺序位置标示当前验证是否正确
arr[index]=bool;
}else if(e.type==="submit" && arr.indexOf(false)===-1){
// 这个条件 提交事件时
// 数组中是否有false
}else{
e.preventDefault();
console.log("请输入正确后再提价");
}
}
function getVerify(index,value){
switch(index){
case 0:
return /^\w{8,16}$/.test(value);
case 1:
return /^1\d{10}$/.test(value);
case 2:
return /^1\d{10}$/.test(value);
}
}
喜欢小编的请动动您的小金指哦，您的鼓励就是我的动力，欢迎留言评论，不喜误喷哦。
1271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
