JavaScript系列文章:详解正则表达式基本知识

正则表达式是一个精巧的利器,经常用来在字符串中查找和替换,JavaScript语言参照Perl,也提供了正则表达式相关模块,开发当中非常实用,在一些类库或是框架中,比如jQuery,就存在大量的正则表达式,所以说学好正则表达式,是提高开发技能的一项基本要求。那么今天博主就来详细总结一下正则表达式的相关知识,希望不熟悉的同学们,也能够掌握正则表达式的原理及应用。

在JS中,创建正则表达式有两种方式,一种是字面量方式,一种是构造器方式,如下所示:

var regex = /\w+/; // 或者 var regex = new RegExp('\\w+');

大家也许注意到,使用字面量要比构造器简洁得多,\w表示一个word,匹配单个字母、数字或下划线,而使用RegExp构造器时,我们的正则变为了"\\w",这是因为要在字符串中表示一个反斜杠\,我们需要对其转义,也就是在前面再加一个转义字符\。相信大家都知道,要在字面量正则中表达一个匹配反斜杠\的正则,只需写成\\这样,但在字符串中表达这个正则,则是"\\\\"这个样子的,这是因为字符串中前两个表示一个反斜杠\,后两个也表示一个反斜杠\,最终在正则层面,结果还是\\。

对于上面两种创建形式,都可以加上一些后缀修饰符,这些修饰符可以单个使用,也可以组合起来使用:

复制代码 代码如下:


/\w+/g; // global search
/\w+/i; // ignore case
/\w+/m; // multi-line
/\w+/u; // unicode
/\w+/y; // sticky

/\w+/gi;
new RegExp('\\w+', 'gi');


从英文注释来看,相信大家都大概都略知一二了,需要注意的是u和y修饰符,它们是ES6新增的特性,u表示启用Unicode模式,对于匹配中文特别有用,而y是sticky,表示“粘连”,跟g很相似,都属于全局匹配,但它们也有不同之处,这个我们后面会介绍。

正则相关方法

有了正则表达式对象了,如何使用呢?JS中的正则和字符串在原型中均提供相应的方法,先来看看正则原型中的两个方法:

RegExp.prototype.test(str); RegExp.prototype.exec(str);

上面的test()和exec()方法都需传入一个字符串,对这个字符串进行搜索和匹配,不同的是,test()方法会返回true或false,表示字符串和正则是否匹配,而exec()方法在匹配时返回一个匹配结果数组,如果不匹配,则只返回一个null值,下面来看看两者的差异:

// RegExp#test() var regex = /hello/; var result = regex.test('hello world'); // true // RegExp#exec() var regex = /hello/; var result = regex.exec('hello world'); // ['hello']

对于exec()方法,如果正则中含有捕获组,匹配后则会出现在结果数组中:

// (llo)是一个捕获组 var regex = /he(llo)/; var result = regex.exec('hello world'); // ['hello', 'llo']

开发当中,test()方法一般用于用户输入验证,比如邮箱验证,手机号验证等等,而exec()方法一般用于从特定内容中获取有价值的信息,比如从用户邮箱输入中获取其ID和邮箱类型,从手机号中获取此号码的归属地等等。

字符串相关方法

上面是正则原型中的两个方法,现在来看看字符串原型中都提供了哪些可用的方法:

String.prototype.search(regexp); String.prototype.match(regexp); String.prototype.split([separator[, limit]]); String.prototype.replace(regexp|substr, newSubStr|function);

先来说说String#search()方法,它会根据正则参数对字符串进行匹配搜索,如果匹配成功,就返回第一次匹配处的索引,如果匹配失败,则返回-1。

// String#search() 'hello world'.search(/hello/); // 0 'hello world'.search(/hi/); // -1

String#match()方法跟RegExp#exec()方法相似,会返回结果数组,所不同的是,如果String#match()的正则参数中含有全局标记g,则结果中会只出现匹配的子串,而忽略捕获组,这一点与RegExp#exec()有些出入。且看下面代码:

// String#match() 'hello hello'.match(/he(llo)/); // ['hello', 'llo'] // String#match()遇到全局g修饰符时会舍弃捕获组 'hello hello'.match(/he(llo)/g); // ['hello', 'hello'] // RegExp#exec()仍旧包含捕获组 /he(llo)/g.exec('hello hello'); // ['hello', 'llo']

所以,如果需要总是将捕获组作为结果返回,应该使用RegExp#exec()方法,而不是String#match()方法。

接下来说说String#split()方法,这个方法用于将字符串分割,然后返回一个包含其子串的数组结果,其中separator和limit参数都是可选的,separator可指定为字符串或正则,limit指定返回结果个数的最大限制。如果separator省略,该方法的数组结果中仅包含自身源字符串;如果sparator指定一个空字符串,则源字符串将被以字符为单位进行分割;如果separator是非空字符串或正则表达式,则该方法会以此参数为单位对源字符串进行分割处理。下面代码演示了该方法的使用:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjsszj.html