• JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解


    二、JavaScript中正则表达式函数详解(exec, test, match, replace, search, split)

    1、使用正则表达式的方法去匹配查找字符串

    1.1. exec方法详解

    exec方法的返回值

    exec方法返回的其实并不是匹配结果字符串,而是一个对象,简单地修改一下execReg函数,来做一个实验就可以印证这一点:

    function  execReg(reg, str) {
    	var result = reg.exec(str);
    	alert(typeof result);
    }
    
    var reg = /b/;
    var str = 'bbs.bblueidea.com';
    execReg(reg,str);

    结果显示result的类型是object。而且是一个类似数组的对象。使用for in可以知道它的属性: index input 0。其中index是表示匹配在原字符串中的索引;而input则是表示输入的字符串;

    至于0则是表示只有一个匹配结果,可以用下标0来引用这个匹配结果,这个数量可能改变。我们可以通过返回值的length属性来得知匹配结果的总数量。

    根据以上对返回值的分析,修改execReg函数如下:

    function  execReg(reg, str) {
    	var result = reg.exec(str);
    	document.write('index:'+result.index+'<br  />'
    		+'input:'+result.input+'<br  />'
    	);
    	for (i=0; i<result.length; i++) {
    		document.write('result['+i+']:'+result[i]+'<br  />')
    	}
    }

    马上来实验一下:

    var reg = /w/;
    var str = 'bbs.bblueidea.com';
    execReg(reg,str);

    结果如下:

    index:0
    input:bbs.bblueidea.com
    result[0]:b

    输入字符串为bbs.bblueidea.com;

    匹配的b在原字符串的索引是0。

    正则的匹配结果为一个,b;

    var reg =  /(w)(w)(.+)/;
    var  str='bbs.bblueidea.com';
    execReg(reg,str);

    结果为:

    index:0
    input:bbs.bblueidea.com
    result[0]:bbs.bblueidea.com
    result[1]:b
    result[2]:b
    result[3]:s.bblueidea.com

    由上面两个例子可见,返回对象[0]就是整个正则表达式所匹配的内容。后续的元素则是各个子正则表达式的匹配内容。

    exec方法对正则表达式的更新

    exec方法在返回结果对象的同时,还可能会更新原来的正则表达式,这就要看正则表达式是否设置了g修饰符。先来看两个例子吧:

    var reg = /b/;
    var str = 'bbs.blueidea.com';
    execReg(reg,str);
    execReg(reg,str);

    结果如下:

    index:0
    input:bbs.blueidea.com
    result[0]:b
    index:0
    input:bbs.blueidea.com
    result[0]:b

    也就是说,两次匹配的结果完全一样,从索引可以看出来,匹配的都是字符串首的b字符。

    下面看看设置了g的正则表达式表现如何:

    var reg = /b/g;
    var str =  'bbs.blueidea.com';
    execReg(reg,str);
    execReg(reg,str);

    结果如下:

    index:0
    input:bbs.blueidea.com
    result[0]:b
    index:1
    input:bbs.blueidea.com
    result[0]:b

    可以看得出来,第二次匹配的是字符串的字符串的第二个b。这也就是g修饰符的作用了,下面来看exec是如何区别对待g和非g正则表达式的。

    如果正则表达式没有设置g,那么exec方法不会对正则表达式有任何的影响,如果设置了g,那么exec执行之后会更新正则表达式的 lastIndex属性,表示本次匹配后,所匹配字符串的下一个字符的索引,下一次再用这个正则表达式匹配字符串的时候就会从上次的lastIndex属 性开始匹配,也就是上面两个例子结果不同的原因了。

    1.2.正则表达式的test()方法简介

    test方法仅仅检查是否能够匹配str,并且返回布尔值以表示是否成功。同样建立一个简单的测试函数:

    function  testReg(reg,str){
    	alert(reg.test(str));
    }

    实例1

    var reg = /b/;
    var str =  'bbs.blueidea.com';
    testReg(reg,str);

    成功,输出true。

    实例2

    var reg = /9/;
    var str =  'bbs.blueidea.com';
    testReg(reg,str);

    失败,返回false。

    2、使用字符串的方法执行正则表达式

    2.1. match()方法

    形式:str.match(reg);

    与正则表达式的exec方法类似,该方法同样返回一个类似数组的对象,也有input和index属性。我们定义如下一个函数用来测试:

    function  matchReg(reg,str){
    	var result =  str.match(reg);
    	if(result ){
    		document.write('index:'+result.index+'<br  />'
    			+'input:'+result.input+'<br  />'
    		);
    
    		for(i=0;i<result.length;i++){
    			document.write('result['+i+']:'+result[i]+'<br  />')
    		}
    	}else{
    		alert('null:匹配失败!')
    	}
    }

    例如:

    var reg = /b/;
    var str =  'bbs.blueidea.com';
    matchReg(reg,str);

    结果如下:

    index:0
    input:bbs.blueidea.com
    result[0]:b

    可见,和exec的结果一样。

    但是如果正则表达式设置了g修饰符,exec和match的行为可就不一样了,见下例:

    index:undefined
    input:undefined
    result[0]:b
    result[1]:b
    result[2]:b

    设置了g修饰符的正则表达式在完成一次成功匹配后不会停止,而是继续找到所有可以匹配到的字符。返回的结果包括了三个b。不过没有提供input和index这些信息。

    2.2. replace()方法

    形式:str. replace (reg,’new str’);

    它的作用是将str字符串中匹配reg的部分用’’new str”部分代码,值得注意的是原字符串并不会被修改,而是作为返回值被返回。例子:

    var reg = /b/;
    var str =  'bbs.blueidea.com';
    var newStr =  str.replace(reg,'c');
    document.write(newStr);

    结果为cbs.blueidea.com,只有第一个b被替换为c。

    var reg = /b/g;
    var str =  'bbs.blueidea.com';
    var newStr =  str.replace(reg,'c');
    document.write(newStr);

    输出ccs.clueidea.com

    由于,设置了g修饰符,所以会替换掉所有的b。

    var reg = /w+/g;
    var str =  'bbs.blueidea.com';
    var newStr =  str.replace(reg,'word');
    document.write(newStr);

    输出:

    word.word.word。

    在replace函数中使用$引用子正则表达式匹配内容

    就像在正则里我们可以使用1来引用第一个子正则表达式所匹配的内容一样,我们在replace函数的替换字符里也可以使用$1来引用相同的内容。

    还是来看一个例子吧:

    var reg =  /(w+).(w+).(w+)/;
    var str =  'bbs.blueidea.com';
    var newStr =  str.replace(reg,'$1.$1.$1');
    document.write(newStr);

    输出的结果为:

    bbs.bbs.bbs

    首先,我们知道第一个子正则表达式匹配到了bbs,那么$1也就代表bbs了。其后我们把替换字符串设置为’$1.$1.$1′,其实也就是“bbs.bbs.bbs”。同理,$2就是blueidea,$3就是com。

    在来看一个例子,颠倒空格前后两个单词的顺序。

    var reg =  /(w+)s(w+)/;
    var str = 'cainiao  gaoshou';
    var newStr =  str.replace(reg,'$2 $1');
    document.write(newStr);

    结果为:gaoshou cainiao,也就是空格前后的单词被调换顺序了。

    由于在替换文本里$有了特殊的含义,所以我们如果想要是用$这个字符的话,需要写成$$,例如:

    var reg =  /(w+)s(w+)/;
    var str = 'cainiao  gaoshou';
    var newStr =  str.replace(reg,'$$ $$');
    document.write(newStr);

    结果为:$ $。

    2.3. search()方法  和  2.4. split()方法

    同样,字符串的search方法和split方法中也可以使用正则表达式,形式如下:

    str.search(reg);

    search返回正则表达式第一次匹配的位置。例子:

    var reg = /idea/;
    var str = 'blueidea';
    var pos =  str.search(reg);
    document.write(pos);

    结果为4。

    下面的例子找出第一个非单词字符:

    var reg = /W/;
    var str =  'bbs.blueidea.com';
    var pos =  str.search(reg);
    document.write(pos);

    结果为3,也就是那个点“.”的位置。

    str.split(reg,’seprator’);

    split返回分割后的数组,例如:

    var reg = /W/;
    var str =  'bbs.blueidea.com';
    var arr =  str.split(reg);
    document.write(arr);

    结果为:bbs,blueidea,com,可见字符串被非单词字符分为了有三个元素的数组。

    var  reg = /W/;
    var  str = 'http://www.baidu.com/';
    var  arr = str.split(reg);
    document.write(arr.length+'<br  />');
    document.write(arr);

    结果为:

    7
    http,,,www,baidu,com,

    可见字符串被分为了有7个元素的数组,其中包括了三个为空字符串的元素。

    附:JavaScript正则表达式详解(一)正则表达式入门

  • 相关阅读:
    若依问题解决(一)
    Java 将两个List转换为流合并List
    后端返回前端文本换行显示,只能在前端再转换
    Java Stream() 流根据对象属性去重
    vue 当前端传回后端,后端使用实体类接收数据显示报错
    js 中 getMonth() 获取的月份比现实少一个月
    vue连个数组对比
    JS链接跳转方法
    ElementUI--表格toggleRowSelection无法选中
    Linux 常用命令
  • 原文地址:https://www.cnblogs.com/52php/p/5659840.html
Copyright © 2020-2023  润新知