正则表达式基础
// var reg=/^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/;
// 构造函数创建
var reg=new RegExp(正则内容,修饰符);
// 字面量创建
var reg=/正则内容/修饰符
var reg=/a/i;
// 修饰符 三个
// i 不区分大小写
// g 全局匹配
// m 多行匹配
//正则对象的方法
// test()
// exec()
var reg=/a/i;
//判断test()参数中的字符串中有没有匹配正则表达式内容
var bool=reg.test("bcAdf");
console.log(bool);
var reg=/a/ig;
// exec 返回一个数组，表示exec()参数中字符串匹配正则的内容
// 不会全局匹配
var arr=reg.exec("bcAdfa");
console.log(arr);
// 字符串的方法
//search()
//match()
//replace()
//split()
var str="0Babcdef";
// 只能找到第一个不能全局匹配，返回找到内容下标
var index= str.search(/b/i);
console.log(index);
var str="0Babcdef";
var arr=str.match(/b/ig);
// 把找到匹配的元素用数组罗列，如果没有全局匹配和exec相同
console.log(arr);
var str="0Babcdef";
str=str.replace(/b/ig,"z");
// 当使用全局匹配时，可以完成所有元素的匹配替换
console.log(str);
str=str.replace(/b/ig,function(item,index){
if(item==="B") return "Z";
return "z";
});
console.log(str);
var str="abc(nihao)dejs";
str=str.split(/[\(\)]/)[1];
console.log(str); */
元字符
var str="catcbtc/tc1tc.tcabt";
console.log(str.match(/cat/g));
console.log(str.match(/cbt/g));
// . 匹配任何一个字符 是一个通配符
console.log(str.match(/c.t/g));
console.log(str.match(/c\.t/g));// \. 把通配符.转为字符.
console.log(str.match(/c.t/g))
// [ab] 表示a或者b任意一个字符
// [abcdefghi] 匹配其中任意一个
console.log(str.match(/c[abcdefghi]t/g))
console.log(str.match(/c[a-i]t/g))
console.log("catcytcjt".match(/c[a-ik-z]t/g))
var str="中国四大古典名著有'西游记','红楼梦','水浒','三国演义'";
// "中国四大古典名著有《西游记》,《红楼梦》,《水浒》,《三国演义》"
// "中国四大古典名著有<西游记>,<红楼梦>,<水浒>,<水浒>";
var n=0;
str=str.replace(/'/g,function(item){
return n++%2===0 ? "《" : "》";
});
str=str.replace(/[《》]/g,function(item){
return item==="《" ? "<" : ">";
});
console.log(str);
// 写在[]中的.就是转义字符.，不是通配符
console.log("ab.cd".match(/[ad.]/g));
// 所有的括号必须增加转义\
console.log("ab.cd".match(/[\{\}\[\]\(\)]/g));
// 两个\ 在字符或者正则表达式的[]都是一个\
console.log("aa\\a\a".match(/[\\]/g));
console.log("ab12nfs2".match(/[0-9]/g))
// [0-20] [0-2 0] === [0-2]
console.log("134".match(/[0-20]/g));
console.log("aZsw".match(/[a-zA-Z]/g));
console.log("aZsw".match(/[a-zA-Z0-9]/g));
// /[aaaazzzzdddd]/ 无意义 /[azd]/
console.log("aZsw".match(/[a-Z]/g));//错误的Unicode编码中a比Z大
console.log("aZsw".match(/[A-z]/g));//错误大写Z到a中间还有其他字符串
console.log("abcdef".match(/[a-ce-z]/g));
// 在[]内第一个字符是^，表示后面的字符不用，取反
console.log("abcdef".match(/[^d]/g));
console.log("abc^def".match(/[^\^]/g));//不要^
console.log("abc^def".match(/[a^c]/g));//如果^不是第一个，作为字符^使用
console.log("abcdfeas".match(/[a-zA-Z0-9_]/g));
console.log("abcdfeas".match(/\w/g));
console.log("abcdfeas".match(/\W/g));// /[^a-zA-Z0-9_]/g
console.log("28wdhd8223".match(/\d/g));// [0-9]
console.log("28wdhd8223".match(/\D/g));// [^0-9]
console.log("asd shw".match(/\s/g));// 空格
console.log("asd shw".match(/\S/g));// 非空格
重复
<div class="div1 div2 div4"></div>
<script>
console.log("aaaaaa".match(/a{6}/));
console.log("aabbaaabbb".match(/a{2}b{2}/g));
console.log("aaaaaaa".match(/a{2}/g));
console.log("aaaaaaa".match(/a{4}/g));
console.log("aaaaaaa".match(/a{0}/g));//空字符串 空字符
console.log("aaaaaaa".match(/a{1,4}/g)); // 先匹配最大的字符串 贪婪匹配
console.log("aaaaaaa".match(/a{0,3}/g));
console.log("colour".match(/colou{0,1}r/g));//可以有也可以没有
console.log("color".match(/colou{0,1}r/g));
console.log("color".match(/colou?r/g));
console.log("aaaaaaa".match(/a{1,}/g));//{1,} 匹配至少1个也可以多个
console.log("aaaaaaa".match(/a{0,}/g));//{0,} 可以有可以有若干个
// /a*/g /a{0,}/g
// /a+/g /a{1,}/g
// /a?/g /a{0,1}/g
var div = document.querySelector("div");
addClass(div, "div3 div6 div2 ");
removeClass(div, "div3 div6 div2 ");
function addClass(elem,className){
var arr1=elem.className.trim().split(/\s+/);//把div的类名拿到，并且去除两边空字符，再把类名切割放入数组
var arr2=className.trim().split(/\s+/);//原理同上，是添加的类名的数组
console.log(arr1,arr2);
arr1.forEach(function(item){//遍历原有的类名数组
if(arr2.indexOf(item)<0) arr2.push(item);//遍历原类名数组里的item，如果在新数组里找不到，则把这个添加进去
})
elem.className=arr2.join(" ");//把新的和旧的类名整合到arr2，变成字符串赋值给elem.className
}
function addClass(elem, className) {
elem.className = (elem.className.trim() + " " + className.trim())//先把旧的新的类名字符串连接起来并且切割成数组A
.split(/\s+/)
.reduce(function (value, item) {
if (value.indexOf(item) < 0) value.push(item);//初始值为一个空数组，当数组A中没有这个元素，则push进value这个归并值数组
return value;//每次返回value数组
}, [])
.join(" ");//相当于数组去重，最后转换为字符串
}
function removeClass(elem,className){
var arr=className.trim().split(/\s+/);
elem.className =elem.className.trim().split(/\s+/).reduce(function(value,item){
if(arr.indexOf(item)<0) value.push(item);
return value;
},[]).join(" ");
}
// ([a-z])\1 相同重复
var str="aaabbffddeeaaggfddssaaggeer".split("").sort().join("").match(/(\w)\1*/g).reduce(function(value,item){
value+=item[0]+"["+item.length+"]";
return value;
},"")
console.log(str);
// "a[7]b[2]d[4]"
// * 或者+ 或者 ｛num,｝ ? 来匹配最少的部分
console.log('".aa""bbbb""dddd"'.match(/".+?"/));
console.log('"...""bbbb""dddd"'.match(/"(.)\1+"/));
var str = "<p>Uber的这款无人车原型配备了多个<strong>摄像头 </strong>、<em>激光雷达</em>以及<span>传感器</span>，可看清100米范 围内任何方向的东西</p><br/><p>第二行内容，哎嘿，第二行内容</p>";
str=str.replace(/<.*?>/g,function(item){
if(item==="<br/>") return "\n";
return "";
});
console.log(str);
</script>
选择和起始字符
<input type="text" name="user" id="user"><span></span><br>
<input type="password" name="password" id="password"><span></span><br>
<input type="text" name="email" id="email"><span></span><br>
<script>
console.log("abcd".match(/ab/g));
console.log("abcd".match(/[ac][bd]/g));
console.log("abcd".match(/ab|cd/g));
console.log("abcd".match(/ab||cd/g));
console.log("abcd".match(/ab|cd|/g));
console.log("abcd".match(/|ab|cd/g));
var inputs=document.querySelectorAll("input");
init();
function init(){
inputs.forEach(function(item){
item.ids=0;
item.addEventListener("input",inputHandler)
})
}
function inputHandler(e){
if(this.ids) return;
var input=this;
this.ids=setTimeout(function(){
clearTimeout(input.ids);
input.ids=undefined;
regText(input);
},500)
}
function regText(input){
var span= input.nextElementSibling;
if(regTest(input.value,input.name)){
span.textContent="OK";
span.style.color="green";
}else{
span.textContent="错误";
span.style.color="red";
}
}
function regTest(txt,name){
switch(name){
case "user":
return /^\w{8,36}$/.test(txt);
case "password":
return /^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/.test(txt);
case "email":
return /^\w{3,36}@\w+\.(com|net|cn|org)$/.test(txt);
}
}
// 要完成一个全体内容匹配就需要使用起始和结束符来操作
// ^ 起始符，表示开始从这个开始匹配
console.log("bbaacc".match(/^a+/g));//要求起始就需要是一个a以上
// $ 结束符
console.log("bbaacc".match(/c+$/g));//要求必须以某个字符结束
</script>
群组
console.log("aabcddaa".match(/(a+)bc(d+)(a+)/));
// 当使用match时，如果使用群组，加上g和不加g是有差距
// 不加g可以将每个群组列表在数组的下标1开始的元素
// 加g就不能找到群组内容
console.log("10[a]3[bc]".match(/(\d+)\[([a-zA-Z]+)\]/g))
// 在replace中如果不使用群组，后面的函数中参数第一位时符合正则内容，第二位是这个字符的下标
// 在replace中如果使用群组，后面的函数中参数分别是符合正则的内容，和每个群组的内容
var str="10[a]3[bc]".replace(/(\d+)\[([a-zA-Z]+)\]/g,function(item1,item2,item3){
return item3.repeat(item2);
});
console.log(str);
var str="backgroundPositionX".replace(/[A-Z]/g,function(item){
return "-"+item.toLowerCase()
});
console.log(str);
var str="background-position-x".replace(/-([a-z])/g,function(item,item1){
return item1.toUpperCase();
});
console.log(str);
var str="13879061235".replace(/(\d{3})\d{4}(\d{4})/,"$1****$2");
console.log(str);
断言
// 前瞻断言 先行断言 紧随其后
console.log("abac".match(/a(?=b)/g));
// 查找紧随其后的内容是某个字符的条件
console.log("abac".replace(/a(?=c)/g,"z"));
// 查找紧随其后的内容不是某个字符的条件
console.log("abac".replace(/a(?!c)/g,"z"));
// 后瞻断言 后行断言 紧随其前
// 前面必须是某个条件，紧随其后的字符
console.log("abcb".replace(/(?<=a)b/g,"z"));
// 前面必须不是某个条件，紧随其后的字符
console.log("abcb".replace(/(?<!a)b/g,"z"));
console.log("6a66b7d".replace(/(?<=\d+)[a-z]+/g,"z"));
/* "a4"
"aaaaaa4"
"aaslkdjaslkj4"
"a"
"As"
"A1232938s" */
// 1、字符中必须包含大写、小写字母，也必须包含数字，但是数字不能作为第一位使用
console.log(/^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,16}$/)
// /[\u4e00-\u9fa5]/ 匹配中文字符
