正则表达式分为元字符和修饰符，修饰符有三个，本文中说说对于元字符的理解。
1。. 通配符, 匹配任何一个字符
变为字符的方法: a.放在[]中 b.. 利用转义字符
var str="catcbtc/tc1tc.tcabt";
console.log(str.match(/c.t/g)); //["cat", "cbt", "c/t", "c1t", "c.t"]
console.log(str.match(/c\.t/g)); //[c.t]
console.log(str.match(/c[.]t/g)); //[c.t]
2。[] | 或者符，匹配其中任意一个
- []是字符维度 | 是边侧维度(左边，右边)
// []
var str="catcbtc/tc1tc.tcabt";
console.log(str.match(/c[abcdefghi]t/g)) //["cat", "cbt"]
console.log(str.match(/c[a-i]t/g)) //["cat", "cbt"]
// | || || 两个||中间表示空字符 是按照顺序查找的
console.log("abcd".match(/ab||cd/g)); // ["ab", "", "", ""]
应用举例
var str="中国四大古典名著有'西游记','红楼梦','水浒','三国演义'";
let n = 0
str=str.replace(/'/g,function(item){
return n++%2===0 ? "《" : "》";
});
console.log(str); //"中国四大古典名著有《西游记》,《红楼梦》,《水浒》,《三国演义》"
str=str.replace(/[《》]/g,function(item){
return item==="《" ? "<" : ">";
});
console.log(str); //"中国四大古典名著有<西游记>,<红楼梦>,<水浒>,<水浒>"
3。[^] 非符 不要后面的字符,但只能在[]的第一个字符位置才起此作用,在中间位置，作为字符的作用
console.log('catcbtc/tc1tc.tcabt').match(/c[^\/]t/g); // [ 'cat', 'cbt', 'c1t', 'c.t' ] 验证非符
console.log("abc^def".match(/[^\^]/g));// ["a", "b", "c", "d", "e", "f"] 不要^，即匹配除了^的任意字符
4。 ^ $ 开始/结束字符
要完成一个全体内容匹配就需要使用起始和结束符来操作 : 例如表输入框
console.log("bbaacc".match(/^a+/g));// 要求起始就需要是一个a以上
console.log("bbaacc".match(/c+$/g));// 要求必须以某个字符结束
5。\ 相当于\字符
两个\ 在字符或者正则表达式的[]都是一个\
console.log("aa\\a\a".match(/[\\]/g)) // ["\"]
6。简写
1)\w [a-zA-Z0-9_] \W [^a-zA-Z0-9_]
2)\d [0-9] \D [^0-9]
3)\s 空字符 \S 不要空字符
7。贪婪匹配
console.log("aaaaaaa".match(/a{1,4}/g)); // ["aaaa", "aaa"] 先匹配最大的字符串 贪婪匹配
console.log("aaaaaaa".match(/a{0,3}/g)) // ["aaa", "aaa", "a", ""] 因为0是最小，匹配空字符
简写:
1)* /a*/g /a{0,}/g 可以没有，可以有若干个
2)+ /a+/g /a{1,}/g 匹配至少1个也可以多个
3)? /a?/g /a{0,1}/g 可以有也可以没有
const text = 'Visit our website <a href="https://example.com">Example</a> or check out our <a href="https://example2.com">Other Example</a>';
const regex = /<a\s+href="([^"]+)"/g;
let match;
const links = [];
// console.log(/<a\s+href="([^"]+)"/.exec(text), '正常匹配, 匹配到http=" 之后第一个" 停止'); // 匹配结果：'<a href="https://example.com"', 群组结果：'https://example.com'
// console.log(/<a\s+href="(.+)"/g.exec(text), '贪婪匹配，匹配到匹配到http=" 之后最后一个" 停止'); // 匹配结果: '<a href="https://example.com">Example</a> or check out our <a href="https://example2.com"' 群组结果: 'https://example.com">Example</a> or check out our <a href="https://example2.com'
// console.log(/<a\s+href="(.*?)"/g.exec(text), '非贪婪匹配, 匹配到http=" 之后第一个" 停止'); // 匹配结果：'<a href="https://example.com"', 群组结果：'https://example.com'
// 如果先定义好regex，必须有g，那么上面的打印会执行exec一次，下面while就只能遍历出来后面的一个结果，如果上面打印两次，while遍历匹配结果就是空[] 即: exec可以使用while持续性往下进行，类似generetor执行效果
while ((match = regex.exec(text)) !== null) {
links.push(match[1]);
}
console.log(links); // ["https://example.com", "https://example2.com"]
8。非贪婪匹配
和贪婪匹配的区别: 区分符号为 ? 当使用了贪婪匹配，也就是字符重复了，后面加 ? ,就是非贪婪，选取最小的
常见: *? +? {3,}?
例如:
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); // 去掉所有的标签 换行
9。() 群组
1)当使用match时，如果使用群组，加上g和不加g是有差距
不加g可以将每个()群组的内容单独拿出来,在数组中按照顺序从下标1 开始放置
加g就不能找到群组内容,只有满足正则的内容,()内的内容不能查找
console.log("10[a]3[bc]".match(/(\d+)\[([a-zA-Z]+)\]/g)) // ["10[a]", "3[bc]"]
console.log("10[a]3[bc]".match(/(\d+)\[([a-zA-Z]+)\]/)) //["10[a]", "10", "a", index: 0, input: "10[a]3[bc]", groups: undefined]
2)在replace中如果不使用群组，后面的函数中参数第一位时符合正则内容，第二位是这个字符的下标
使用了群组,后面的函数中参数分别是符合正则的内容，和每个群组的内容
var str="10[a]3[bc]".replace(/(\d+)\[([a-zA-Z]+)\]/g,function(item1,item2,item3){
return item3.repeat(item2); // 把item3重复item2个数量,这里 item2对应的是 10 3 item3对应的是 a bc ,然后替换item1，也就是满足正则的内容
}
console.log(str) //aaaaaaaaaabcbcbc
//替换字符内容
var str="background-position-x".replace(/-([a-z])/g,function(item,item1){
return item1.toUpperCase();
});
console.log(str); // backgroundPositionX
//隐藏手机号
var str="13879061235".replace(/(\d{3})\d{4}(\d{4})/,"$1****$2");
console.log(str); //138****1235 群组会默认按照顺序把内容 赋予变量,只能使用$1,$2....等
10。 \1 重复
变成数组，排序，转回字符串，查找重复字符
用法: ([a-z])\1* ([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]e[4]f[3]g[4]r[1]s[2]
11。 断言
a(?=b) 前瞻断言 查找后面紧跟b的a字符
a(?!b) 前瞻断言 查找后面没有紧跟b的a字符
(?<=a)b 后瞻断言 查找前面是a的b字符
(?<!a)b 后瞻断言 查找前面没有a的b字符
console.log("abac".replace(/a(?=b)/g,"z")); // zbac
console.log("abac".replace(/a(?!b)/g,"z")); // abzc
console.log("abcb".replace(/(?<=a)b/g,"z")); //azcb
console.log("abcb".replace(/(?<!a)b/g,"z")); //abcz
