js正则表达式的使用

js正则表达式的使用

本文只是说明js有哪些方法可以使用正则表达式以及它们之间的区别,所以阅读需要你懂正则表达式的知识。

一、字符串方法使用正则

字符串方法即String对象的方法,它的调用方式是:字符串.方法(正则表达式),即正则表达式在这里是作为参数。

1、search

var s = "This is a test of Regular Expression.";
reg = /Regula1r/i;            // i表示不区分大小写
var pos = s.search(reg);
console.log(pos);

2、match

1)全局匹配(有g修饰)
① 如果有匹配到子串,则返回数组,数组中元素为匹配到的所有子串
② 如果没有匹配到子串,返回null
③ 不返回子匹配(每个括号都是一个子匹配)

var str="I love javascript and java";
var res = str.match(/java(script)?/g);
console.log(res);

Xnip2018-09-22_15-52-16.png

2)非全局匹配(没有g修饰)
① 匹配第一个查询到的子串以及分组(即被括号括着的部分,也叫子匹配)
② 如果匹配到子串,则返回数组,数组第0个元素为整体匹配,0-1为子匹配(每个括号都是一个子匹配)
③ 如果没有匹配到子串,返回null

例:匹配到子串javascript后,不再像全局匹配那样继续匹配后边的java(即使它也符合匹配规则),第0个元素是完整匹配的javascript,第1个元素是script,即括号捕获的分组

var str="I love javascript and java";
var res = str.match(/java(script)?/);
console.log(res);

Xnip2018-09-22_15-52-51.png

3、replace/replaceAll

replace返回替换后的字符串,另外,js并没有replaceAll这样的方法,由于replace只会替换第一个匹配到的子串,如果要替换全部,需要加修饰符g表示替换全部。
只替换匹配到的第一个子串

var str="This is a text of Regular Expression, just for text!";
var res = str.replace(/text/, 'test');
console.log(res);

Xnip2018-11-12_18-27-21.png

替换全部匹配到的子串

var str="This is a text of Regular Expression, just for text!";
var res = str.replace(/text/g, 'test');
console.log(res);

Xnip2018-11-12_18-27-57.png

另外,replace也可以当普通方法用,即第一个参数就写普通字符串,不用两个斜杠/包起来,而是用引号(单/双都可以)引起来,这样的话,也是只替换匹配到的第一个子串:

var str="This is a text of Regular Expression, just for text!";
var res = str.replace('text', 'test');
console.log(res);

Xnip2018-11-12_18-35-06.png

4、split

以匹配到的子串作为分割符,把给定字符串分割成一个数组

var str="may I ask you a question, 1 plus 20 is 21 right?";
var res = str.split(/\d+/);
console.log(res);

Xnip2018-09-22_16-17-54.png

二、正则方法使用正则

正则方法是RegExp对象的方法,所以它的调用方式是:正则表达式.方法(字符串),字符串是作为一个参数,传入正则表达式的方法中。

1、exec

全局模式下,与String.match()不一样的是,它不是一次性返回所有匹配到的元素,而是调用一次返回一次,从第二次调用开始,每一次都是从前一次匹配位置的后面开始匹配(说白了就是不会重复从头开始匹配)

var str="I love javascript and java";
var reg = /java(script)?/g;
console.log(reg.exec(str));
console.log(reg.exec(str));

Xnip2018-09-22_16-44-15.png

非全局模式与String.match一样
Xnip2018-09-22_16-47-52.png

2、test

用于测试给定字符串是否符合正则的规则

var mobile = 13838383388;
var reg = /1[3-8]\d{9}/;
if(reg.test(mobile)){
    console.log('the phone number format is right!');
}else{
    conosle.log('this phone number format is wrong!');
}

Xnip2018-09-22_16-26-01.png

三、字符串方法与正则方式的区别

1、字符串方法即String对象的方法,它的调用方式是:字符串.方法(正则表达式),即正则表达式在这里是作为参数。
2、正则方法是RegExp对象的方法,所以它的调用方式是:正则表达式.方法(字符串),字符串是作为一个参数,传入正则表达式的方法中。

四、创建正则表达式的三种方式及区别

1、字面量(literal)方式

前面第二点,正则表达式的方法中,使用exectest方法的正则表达式,都是字面量定义方式,即把正则直接写在两个斜线中间即可,这样就可以调用正则的exectest方法,如:

//字面量方式定义一个正则表达式
var reg = /1[3-8]\d{9}/;
reg.test('13838383388');

2、创建实例对象方式

方式一:传入的正则表达式前后还是像字面量方式那样使用斜线,第二个参数为修饰符,这样跟直接使用字面量方式无任何区别,还不如直接使用字面量方式简单。

var reg = new RegExp(/1[3-8]\d{9}/,'g');
reg.test('13838383388');

方式二:传入的正则表达式用引号(单双引号都可以)括起来,注意这种方式,反斜线需要写两个,比如数字是\d,在这里就要写成\\d

var reg = new RegExp('1[3-8]\\d{9}','g');
reg.test('13838383388');

方式二如果只是这样,一个反斜杠要写成两个反斜杠,那还不如直接用字面量方式更简单,其实方式二与方式一以及字面量方式最大的不同,就在于它能传入变量:

var name = 'Bruce';
var reg = new RegExp('\\d'+name+'\\d', 'g');
var str = 'this is a test 8Bruce8!';
reg.exec(str);

从方式二能使用变量可以看出,其实传入RegExp构造函数中的参数并不是作为正则表达式传入的,而是作为普通字符串传入的,它返回的才是正则表达式,这也解释了,为什么\d要写成\\d,因为\本身就是一个转义字符,要表示它自己,只能再加一个反斜杠把它转义成普通字符,另外,从使用引号也可以看出,方式二传入的参数就是字符串,因为在js里,用引号括起来的就是一个字符串。

3、使用eval()方式创建

其实还可以用eval代替new RegExp来让正则表达式支持变量,但这种方式必须在两边添加斜线。

var name = 'Bruce';
var reg = eval('/\\d'+name+'\\d/');
var str = 'this is a test 8Bruce8!';
reg.exec(str);

很明显,这种方式也只是为了使用变量,如果不使用变量的情况下,还是字面量方式简单方便!

五、总结

1、js中支持正则表达式的方法有8个,分别是四个String对象的方法:search/match/replace/split,以及两个RegExp对象的方法:exec/test
2、如果正则中不需要使用变量,则使用字面量方式创建正则表达式即可,因为这种方式最方便。

打赏

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of

扫码在手机查看
iPhone请用自带相机扫
安卓用UC/QQ浏览器扫

js正则表达式的使用