一文读懂JS正则表达式

1、正则的概念:
       正则表达式(regular expression)是一个描述字符规则的对象。可以用来检查一个字符串是否含有某个子字符串,将匹配的子字符串做替换或者从某个字符串中取出符合某个条件的子串等。
       使用正则可以使数据校验的工作量大大减轻,但要注意极简原则,常用在:网址、邮箱、身份证号、手机号等。
2、正则的创建方式:
       ①字面量:

var reg = /aaa/ig;

       ②构造函数:

var reg = new RegExp(“aaa”,“ig”); 
// 第二个参数为修饰符

i:表示忽略大小写ignore;
g:表示全局匹配,查找所有匹配而非在找到第一个匹配后停止全局匹配(global);
i和g 位置不分先后。

3、正则的对象方法:
①test();
       概念:正则实例对象的test方法返回一个布尔值,表示当前模式是否能匹配参数字符串。

console.log(/hello/.test("hello world"));     // true
// 上面代码验证参数字符串之中是否包含hello,结果返回true。

结果:
在这里插入图片描述
       如果正则表达式带有g修饰符,则每一次test方法都从上一次结束的位置开始向后匹配:

var r = /x/g;
var s = '_x_x';
r.lastIndex; // 0
r.test(s); // true
r.lastIndex; // 2
r.test(s); // true
r.lastIndex; // 4
r.test(s); // false
// 上面代码的正则表达式使用了g修饰符,表示是全局搜索,会有多个结果。
//接着,三次使用test方法,每一次开始搜索的位置都是上一次匹配的后一个位置。

       带有g修饰符时,可以通过正则对象的lastIndex属性指定开始搜索的位置:

var r = /x/g;
var s = '_x_x';
r.lastIndex = 4;
r.test(s); // false
//上面代码指定从字符串的第五个位置开始搜索,这个位置是没有字符的,
//所以返回false。

结果:

注意:
1、在使用正则的test方法做验证时,除非特殊要求,一般都是要加上开头和结尾 ,表示整体验证。不使用全局g。
2、在使用除了test方法做查找或匹配替换操作符时,一般使用全局g找到所有内容,而不是用开头^和结尾$。

②exec();
概念:
       用于检索字符串中的正则表达式的匹配。返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为null。

var s = '_x_x';
var r1 = /x/;
var r2 = /y/;
r1.exec(s); // ["x"]
r2.exec(s); // null
//上面代码中,正则对象r1匹配成功,返回一个数组,成员是匹配结果;
//正则对象r2匹配失败,返回null。

结果:

4、字符串函数:
①replace();
概念:
       是指按照给定的正则表达式进行替换,返回替换后的字符串。字符串对象的replace方法可以替换匹配的值。它接受两个参数,第一个是正则表达式,表示搜索模式,第二个是替换的内容。

str.replace(search, replacement);

正则表达式如果不加g修饰符,就替换第一个匹配成功的值,否则替换所有匹配成功的值:

'aaa'.replace('a', 'b') // "baa"
'aaa'.replace(/a/, 'b') // "baa"
'aaa'.replace(/a/g, 'b') // "bbb"
//上面代码中,最后一个正则表达式使用了g修饰符,所以导致所有的b都被替换掉了。

②match();
概念:
       字符串实例对象的match方法对字符串进行正则匹配,返回匹配结果。

var s = '_x_x';
var r1 = /x/;
var r2 = /y/;
s.match(r1); //["x"]
s.match(r2); // null
//从上面代码可以看到,字符串的match方法与正则对象的exec方法非常类似:
//匹配成功返回一个数组,匹配失败返回null。

结果:

       如果正则表达式带有g修饰符,则该方法与正则对象的exec方法行为不同,会一次性返回所有匹配成功的结果:

var a1 = 'abcaabc';
var a2 = /a/g;
console.log(a1.match(a2));  
console.log(a2.exec(a1)); 

结果:

③search();
概念:
       检索与正则表达式相匹配的值。返回字符串中第一个与正则表达式相匹配的子串的起始位置。如果没有找到则返回-1。

console.log('abcdefg'.search(/d/)); // 3

结果:

5、正则表达式构成:
       ①字面量字符
       大部分字符在正则表达式中,就是字面的含义,比如/a/匹配a,/b/匹配b。如果在正则表达式之中,某个字符只表示它字面的含义(就像前面的a和b),那么它们就叫做“字面量字符”。

/hello/.test("hello world") // true
//上面代码中正则表达式的hello,就是字面量字符,所以/hello/匹配
//hello world,因为它就表示h,e,l,l,o三个字母连在一起。

结果:

       除了字面量字符以外,还有一部分字符有特殊含义,不代表字面的意思。它们叫做“元字符”,主要有以下几个:
       正则表达式是由普通字符(例如字符a到z)以及特殊字符(称为元字符)组成的文字模式。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。
②元字符之限定符
       限定符可以指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。

*:匹配前面的子表达式零次或多次。
+:匹配前面的子表达式一次或多次。
?:匹配前面的子表达式零次或一次。
{n}:匹配确定n次。
{n,}:至少匹配n次。
{n, m}:最少匹配n次且最多匹配m次。

// t 出现0次或1次
/a?bcd/.test('abcd')		 // true
/a?bcd/.test('bcd')			 // true
// t 出现1次或多次
/a+bcd/.test('abcd')		 // true
/a+bcd/.test('aabcd')		 // true
/a+bcd/.test('bcd') 		// false
// t 出现0次或多次
/a*bcd/.test('abcd') 		// true
/a*bcd/.test('aabcd') 		// true
/a*bcd/.test('aaabcd')		 // true
/a*bcd/.test('bcd') 		// true
/ab{2}d/.test('abbd') 	   	// true
/ab{2,5}d/.test('abbbd')	 // true
//上面代码中,第一个模式指定b连续出现2次,第二个模式指定b连续出现2次到5次之间

③元字符之字符匹配符
       字符匹配符用于匹配某个或某些字符。

       [xyz]:字符集合。匹配所包含的任意一个字符。

/[abc]/.test('hello world') // false
/[abc]/.test('adefg') // true
//上面代码中,字符串hello world不包含a、b、c这三个字母中的任一个,
//所以返回false;字符串adefg包含字母a,所以返回true

结果:

[^xyz]: 表示除了x、y、z之外都可以匹配。

/[^abc]/.test('hello world') // true
/[^abc]/.test('aabbcc') // false
//上面代码中,字符串hello world不包含字母a、b、c中的任一个,
//所以返回true;字符串aabbcc不包含a、b、c以外的字母,所以返回false。

结果:

[a-z]:字符范围。匹配指定范围内的任意字符。
[abc]可以写成[a-c],[0123456789]可以写成[0-9],同理[A-Z]表示26个大写字母。

/[a-z]/.test('b');// true
//以下写法同样适用:[0-9]、[0-9a-z]、[0-9a-zA-Z]
//[0-9a-zA-Z]  表示数字0-9,大小写字母
//[^a-z]:表示不包含小写字母

\d 匹配0-9之间的任一数字,相当于[0-9]。
\D 匹配所有0-9以外的字符,相当于[^0-9]。
\w匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_]。
\W 除所有字母、数字和下划线以外的字符,相当于[^A-Za-z0-9_]。
\s 匹配空格(包括换行符、制表符、空格符等)。
\S 匹配非空格的字符。
. 通配符,匹配除”\n”之外的任何单个字符。

④元字符之定位符
       定位符可以将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。
       ^:匹配输入字符串的开始位置。
       $:匹配输入字符串的结束位置。

// test必须出现在开始位置/^test/.test('test123') // true

// test必须出现在结束位置/test$/.test('new test') // true

// 从开始位置到结束位置只有test/^test$/.test('test') // true
/^test$/.test('test test') // false

⑤元字符之转义符
       \:用于匹配某些特殊字符。
       正则表达式中那些有特殊含义的元字符,如果要匹配它们本身,就需要在它们前面要加上反斜杠。比如要匹配+,就要写成+。

/1+1/.test('1+1');	// false
/1\+1/.test('1+1'); // true
//上面代码中,第一个正则表达式之所以不匹配,因为加号是元字符,不代表自身。
//第二个正则表达式使用反斜杠对加号转义,就能匹配成功。

⑥元字符---选择匹配符
       |:可以匹配多个规则。
       竖线符号(|)在正则表达式中表示“或关系”(OR),即a|b表示匹配a或b。

/11|22/.test('211'); // true
//上面代码中,正则表达式指定必须匹配11或22
//例:匹配aa、bb、cc之中的一个
/aa|bb|cc/

6、应用举例:
①网址监测

var reg = /^(https?:\/\/)?([0-9a-z]{1,10}\.)?[0-9a-z]{2,9}(\.[a-z]{2,4}){1,2}$/;

②邮政编码监测:

var reg = /^\d{6}$/

③字符串首尾去空格:

var str = '      avaasdf ';
var reg = /^\s+|\s+$/g;
console.log(str.replace(reg,''))

④文件格式监测:

var reg = /^.+\.(jpeg|png|gif|jpg)$/

⑤邮件格式监测:

var reg = /^\w+[-+.]*\w*@([a-z0-9A-Z\u2E80-\u9FFF]-?)+(\.\w{2,6})+/

⑥手机号监测:

var reg = /^(13[0-9]|14[0-9]|15[0-9]|18[0-9]|17[0-9])\d{8}$/

⑦身份证号监测:

var reg = /(^\d{15}$|^\d{18}$)|^\d{17}X$/

⑧中文监测:

var reg = /^[\u2E80-\u9FFF]+$/

⑨用户名监测(规则数字、字母、下划线、中划线组成,2-12位):

var reg = /^[a-z0-9_-]{2,12}$/

扩展:
1.分组:

var reg = /(\d{6})/
reg.test('666666');  //true
// 这里reg中的(/d{2})就表示一个分组,匹配两位数字。

2.捕获型分组:
       被正则表达式捕获(匹配)到的字符串会被暂存起来,其中,由分组捕获到的字符串会从1开始编号,于是我们可以引用这些字符串:

var reg = /(\d{4})-(\d{2})-(\d{2})/;
var dateStr = '6666-66-66';
reg.test(dateStr);  //true
//引用捕获到的内容使用 $1 代表第一个分组的捕获到的内容
RegExp.$1   //6666
RegExp.$2   //66
RegExp.$3   //66

3.非捕获型非捕获型 :
       我们有时候只是为了分组,但是并不需要捕获,此时就可以使用非捕获型分组。

var reg = /(?:\d{4})-(\d{2})-(\d{2})/
var date = '2020-02-20'
reg.test(date)
RegExp.$1 // 02
RegExp.$2 // 20

4.结合replace()方法做字符串自定义替换:

var dateStr = '2020/02/20';
var reg = /(\d{4})\/(\d{2})\/(\d{2})/;
dateStr = dateStr.replace(reg, '$1-$2-$3') //"2020-02-20"
//注意:这里的/是需要用\转义的。

5.结合exec()方法来使用:

var a;
var re = new RegExp("d(g+)(d)", "ig");
var str = "bbdGdgddggb";
var arr = re.exec(str);
console.log(arr);
a = "$1 contains: " + RegExp.$1 + "\n";
a += "$2 contains: " + RegExp.$2 + "\n";
console.log(a);

结果:

6.结合字符串match()方法来进行使用:

var str = "https://www.baidu.com:8848/baidu/demo.html";
var patt1 = /(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/;
arr = str.match(patt1);
console.log(RegExp.$1);

结果:

结束。

评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值