正则表达式基本概念
简单的说，正则表达式是匹配模式，或者匹配字符，或者匹配位置；
一个正则表达式一般是由匹配的范围和匹配元素的次数所组成；
基本语法
- 常用的范围表：
- 常用的量词表：
- 定位符表：
- 特殊字符：(需要匹配下面字符时，需要转义即"\"+字符)
- 非打印字符：
使用方式
-
介绍
- 判断string是否符合正则要求,返回 Boolean：regex.test(string);
- 2)找出字符串中符合正则的字串,返回匹配结果的数组：regex.exrc(string);
- 3)找出字符串中符合正则的字串,一次返回所有匹配结果的数组：string.match(regex);
- 4)把原有的字符替换成新的字符:string.replace(regex,'替换的内容');
-
举例
1)'test'
var str = "1a1b1c";
var reg = new RegExp("1.", "");
console.log(reg.test(str)); // => true
2)'exec'
var str = "1a1b1c";
var reg = new RegExp("1.", "g");
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
// =>
["1a", index: 0, input: "1a1b1c", groups: undefined]
["1b", index: 2, input: "1a1b1c", groups: undefined]
["1c", index: 4, input: "1a1b1c", groups: undefined]
3)'match'
var str = "1a1b1c";
var reg = new RegExp("1.", "g");
console.log(str.match(reg));
// => ["1a", "1b", "1c"]
4)'replace'
var string="12345678"; //金额格式化，分位符
var result = string.replace(/(?!^)(?=(\d{3})+$)/g,',');
console.log(result); // => 12,345,678;
总结如下：
1. '{m,n}'与'{m,n}?'
a.'{m,n}'
var regex = /\d{2,5}/g;
var string = "123 1234 12345 123456";
console.log( string.match(regex) );// => ["123", "1234", "12345", "12345"]
b.'{m,n}?'
var regex = /\d{2,5}?/g;
var string = "123 1234 12345 123456";
console.log( string.match(regex) );// => ["12", "12", "34", "12", "34", "12", "34", "56"]
c.总结：
'{m,n}'是指匹配元素至少出现m次,最多出现n次;
在'{m,n}'没有加'?'代表匹配为贪婪，尽可能多的匹配;如果没有加'?'代表匹配为惰性,即匹配m次就够了，不需要匹配n次了。
2. '[ab]'与'[a|b]'
a.'[ab]'
var regex = /\d[ab]/g;
var string = "123a 1234ab 12345abc 123456ac";
console.log( string.match(regex) );// => ["3a", "4a", "5a", "6a"]
b.'[a|b]'
var regex = /\d[a|b]/g;
var string = "123a 1234ab 12345abc 123456ac";
console.log( string.match(regex) );// => ["3a", "4a", "5a", "6a"]
c.总结:
'[ab]'和'[a|b]'都是匹配一个元素;
3. '^'(匹配开头)和'^'(取反)
a.'^'(匹配开头)
var regex=/^\d/g;
var string_a="1abc";
var string_b="bac";
console.log(regex.test(string_a)); // => true;
console.log(regex.test(string_b)); // => false;
b.'^'(取反)
var regex=/\d[^a]/g;
var string_a="1abc";
var string_b="1bac";
console.log(regex.test(string_a)); // => false;
console.log(regex.test(string_b)); // => true;
c.总结:
如何区别'^'?一般跟在'/'后面的,就是匹配开头;一般跟在'['后面的,就是取反;
4. '\b'和'\B'
a.'\b'(单词边界)
var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
console.log(result);
// => "[#JS#] #Lesson_01#.#mp4#"
b.'\B'(非单词边界)
var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#');
console.log(result);
// => "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"
c.总结:
'\b':具体就是 \w 与 \W 之间的位置，也包括 \w 与 ^ 之间的位置，和 \w 与 $ 之间的位置。(\w=[0-9a-zA-Z_]);简单说匹配由数组，字母和下划线组成的单词
5. '(?=e)'和'(?!e)'
a.'(?=e)'(匹配e前面的位置)
var result = "hello".replace(/(?=e)/g, '#');
console.log(result);
// => "h#ello"
b.'(?!e)'(匹配不是e前面的位置)
var result = "hello".replace(/(?!e)/g, '#');
console.log(result);
// => "#he#l#l#o#"
举例说明：
1. 判断是否包含有某一种字符
场景：通常在验证表单密码，要求密码包含数字，小写字母和大写字母组成;
第一步：匹配数字
var regex_1=/(?=\d)/g;
var string_1="abc123456";
console.log(regex_1.test(string_1)) // => true;
第二步：匹配小写字母
var regex_2=/(?=[a-z])/g;
var string_2="abc123456";
console.log(regex_2.test(string_2)) // => true;
第三步：匹配大写字母
var regex_3=/(?=[A-Z])/g;
var string_3="Abc123456";
console.log(regex_3.test(string_3)) // => true;
第四步：匹配包含
var regex = /(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])^[0-9A-Za-z]{6,12}$/;
var string="Abc123456";
console.log(regex.test(string)) // => true;
2. 金额的分位符格式化
场景：通常金额的分位符;
思路:从最后一位往前算，每逢第3位，加‘，’；
var string="12345678";
var result = string.replace(/(?!^)(?=(\d{3})+$)/g,',');
console.log(result); // => 12,345,678;
3. 获取当前url查询字符串中的参数的方法
场景：提取数据
思路:用“&”为分割标志，然后再利用字符串分割“=”
function urlFun(url){
var addUrl=url+"&"
var reg=/[\?|&].+?(?=&)/g
var narr={};
addUrl.match(reg).forEach((item) => {
var str=item.slice(1);
narr[str.substring(0,str.indexOf('='))]=str.slice(str.indexOf('=')+1);
});
console.log(narr);
}
urlFun("https://baidu.com/index?page=38&q=is%3Aissue+is%3Aopen");
>{page: "38", q: "is%3Aissue+is%3Aopen"}
结尾
正则表达式学习笔记会不断更新，请期待！
如果文章中有误的，可以留言告知。希望这篇文章对你有帮助！一起成长！一起进步！
