正则表达式 - 2017 - 完结篇

** 题记:接上回,我们说到了关于正则表达式的基本的语法,这次我们就来继续拓展正则表达式的内容,包括了正则表达式中的JS对象属性以及常用的text和exec方法等等一系列内容。接下来,show time!!!(控制不住寄己啊)**

No.1前瞻

题外话:说到前瞻,大家是不是想到成语前瞻后顾了呢?笔者认为两者还是有一定联系的!瞻:向前看;顾:回头看。看看前面,又看看后面。形容做事之前考虑周密慎重。也形容顾虑太多,犹豫不决。亦作“瞻前顾后”。
</br>
回归正题,正则表达式的解析规则:文本头部向尾部开始解析,文本尾部方向,称为"前"。

前瞻就是在正则表达式匹配到规则的时候,还需要向前检查是否符合断言,后顾/后瞻方向相反。但是JavaScript不支持后顾,符合和不符合特定断言称为 肯定/正向 匹配和 否定/负向 匹配

前瞻:

名称 正则 含义
正向前瞻 exp(?=assert)
负向前瞻 exp(?!assert)
正向后顾 exp(?<=assert) JavaScript不支持
负向后顾 exp(?<!assert) JavaScript不支持

代码测试:

  • 测试1
var a = 'a2*w3_e3'.replace(/\w(?=\d)/g,'X');
console.log(a);

先检查是否是单词字符,如果是,则继续向后检查是否是数字字符的断言部分,如果符合就将单词字符替换成 'X';这里只把前面的单词字符替换成 'X',后面的数字并不替换。但断言部分也属于判断的条件。

打印结果
  • 测试2
var a = 'a2*w3_33'.replace(/\w(?!\d)/g,'X');
console.log(a);

匹配是单词字符,并且单词字符后面不是数字的字符的规则!将单词字符替换成 'X'。

打印结果

No.2 对象属性

  • global:是否全文搜索,默认为false
  • ignore case:是否大小写敏感,默认为false
  • multiline:多行搜索,默认为false
  • lastIndex:是当前表达式匹配内容的最后一个字符的下一个位置
  • source:正则表达式的文本字符串

代码测试

var reg1 = /\d/;
var reg2 = /\d/gim;
console.log(reg1.global,reg1.ignoreCase ,reg1.multiline,reg1.source);
console.log(reg2.global,reg2.ignoreCase ,reg2.multiline,reg2.source);
打印结果

设置了 g , i , m之后的值为true,source也就是正则表达式里的内容!

注意:g、i、m三者都是只读属性,不能通过 reg1.global = true 来设置,这样是无效的!

No.3 test方法

RegExp.prototype.test(str)
意义: 用于测试字符串中的数字是否存在匹配正则表达式模式的字符串
返回值:如果存在就返回true,否则返回false

  • 测试1
var reg1 = /\d/;
console.log(reg1.test('a'));
console.log(reg1.test("2"));
text测试结果

匹配字符 a 时返回false,匹配数字 2 时返回true。没错!

  • 测试2
var reg2 = /\d/;
console.log(reg2.test("2"));
console.log(reg2.test("2"));
console.log(reg2.test("2"));
console.log(reg2.test("2"));
连续打印

连续打印了四次true,这在我们的意料之中!

  • 测试3
var reg3 = /\d/g;
console.log(reg3.test("2"));
console.log(reg3.test("2"));
console.log(reg3.test("2"));
console.log(reg3.test("2"));
打印结果

什么情况?What happen?!这不科学啊!为啥这里出现了false了?难道不应该和上面的结果一样的吗?其实不然!这个就是因为定义了全局匹配,并且这个锅由lastIndex来背。

我们可以这样改下代码!

var reg4 = /\d/g;
while(reg4.test("12")){
  console.log(reg4.lastIndex);
}
lastIndex

第一次reg4的 lastIndex 的结果为 ‘1’,第二次的值为 ‘2’;上边我们有说到lastIndex就是当前表达式匹配内容的最后一个字符的下一个位置。所以就不难理解为什么会打印出 1 和 2 了,这也就解释了之前为什么打印出true、false、true、false了。执行到第二次的时候,lastIndex的值为1,打印出false;执行到第三次的时候就重置lastIndex为0了,所以打印出true!但是,我们用test的本意就是想查看字符串中是否存在符合正则表达式规则的内容,所以不必使用全局变量g

No.4 exec方法

RegExp.prototype.exec(str)
意义:使用正则表达式模式对字符串执行搜索,并将更新全局RegExp对象的属性以反映匹配的结果!(这里的属性主要指的就是lastIndex属性)
返回值:如果没有匹配的文本就返回null,否则返回一个结果数组:

  • index:声明匹配文本的第一个字符的位置
  • input :存放被检索的字符串 string
No.4.1 非全局调用
  • 调用非全局的 RegExp 对象的 exec() 时,返回数组
  • 第一个元素是与正则表达式相匹配的文本
  • 第二个元素是与 RegExpObject 的第一个子表达式相匹配的文本(如果有的话,也就是分组的文本)
  • 第三个元素是与 RegExpObject 的第二个子表达式相匹配的文本(如果有的话,也就是分组的文本),以此类推。。。

代码测试:

var reg5 = /\d(\w)\d/;
var str = '1q2w3e4r5t';
var ret = reg5.exec(str);
console.log(reg5.lastIndex + '\t' + ret.index + '\t' + ret.toString());
测试结果

从打印结果我们可以看出reg5lastIndex之为‘0’,但实际上我们知道lastIndex的值实际上不应该为0,这也就变相的说明了,在非全局调用(g)中,reg5lastIndex属性根本不生效!而第二个ret.index指的就是符合正则表达式的字符串在原字符串中的开始下标;第三个ret.toString就是上面所说返回的数组,"1q2"代表与正则表达式相匹配的文本内容,"q"代表的就是分组的文本内容。

No.4.2 全局调用

话不多说,直接上代码看不同!

var reg6 = /\d(\w)(\w)\d/g;
var str = '1qw2wd3ef4rg5th';
while (ret = reg6.exec(str)) {
    console.log(reg6.lastIndex + '\t' + ret.index + '\t' + ret.toString());
}
打印结果

这里可以看出lastIndex4,就是匹配完1qw2后;index为0就是数字1的下标了,里面的分组内容就是qw

No.5 search方法

** String.prototype.search(reg)**
意义:search()方法用于检索字符串中指定的字符串,或检索与正则表达式相匹配的子字符串
返回值:方法返回第一个匹配结果的index,查找不到返回-1
search方法不执行全局匹配,它将忽略标志 g,并且总是从字符串的开始进行检索!

代码测试:

var str = "b45h65j8k9";
console.log(str.search('5'));
console.log(str.search('10'));
打印结果

这里直接返回5所在的下标2;未找到10就返回-1,这是相当的简单!

No.5 match方法

** String.prototype.match(reg)**
意义:match()方法将检索字符串,以找到一个或多个与regexp匹配的文本。
RegExp是否具有标志 g对结果影响很大。

No.5.1 非全局调用
  • 如果没有标志 g ,那么 match()方法就只能在字符串中执行一次匹配。
  • 如果没有找到任何匹配的文本,将返回 Null。
  • 否则它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。
  • 返回数组的第一个元素存放的是匹配的文本,而其余的元素存放的是与正则表达式的子元素匹配的文本。
  • 除了常规的数组元素之外,返回的数组还含有 2个对象属性
  • index 声明匹配文本的起始字符在字符串的位置
  • input 声明对 stringObject 的引用。
var reg5 = /\d(\w)\d/;
var str = '1q2w3e4r5th';
var ret = str.match(reg5);
console.log(ret);
console.log(reg5.lastIndex + '\t' + ret.index);
打印结果

返回的结果就是匹配到的内容1q2和分组的内容q。因为不是全局匹配,所以lastIndex没用,这里的index就是0。

No.5.2 全局调用
  • 如果RegExp具有标志 g 则 match()方法将执行全局检索,找到字符串中所有的匹配子字符串
  • 没有找到任何匹配的子串,则返回null
  • 如果找到了一个或多个匹配子串,则返回一个数组
  • 数组元素中存放的是字符串中的所有的匹配子串,而且也没有index属性或input属性。
var reg6 = /\d(\w)\d/g;
var str = '1q2w3e4r5th';
var ret = str.match(reg6);
console.log(ret);
console.log(reg6.lastIndex + '\t' + ret.index);
打印结果

返回值就是两个符合匹配规则的内容 1q23e4,这里也并没有返回分组信息和lastIndexindex的信息了。

No.6 split方法

** String.prototype.split(reg) **

  • 我们经常使用 split 方法把字符串分割为字符数组
    ** "a,b,c,d".split(',');      // ["a","b","c","d"]**
  • 在一些复杂的分割情况下我们可以使用正则表达式解决
    ** "a1b2c3d".split(/\d/);     // ["a","b","c","d"]**

No.6 replace方法

** String.prototype.replace(reg) **
有三种用法:

  • String.prototype.replace(str,replaceStr)
  • String.prototype.replace(reg,replaceStr)
  • String.prototype.replace(reg,function)
打印结果

这里第二个replace只替换了字符串的第一个数字 “1”,隐式地转换成"a1b1c3".replace('/1/',2),这样我们应该也能想到这个就涉及到了全局变量的替换问题了!
我们这样写就没问题了!

利用正则表达式

function参数的含义
function会在每次匹配替换的时候调用,有4个参数

  • 匹配字符串
  • 正则表达式分配的内容,没有分组则没有该参数
  • 匹配项在字符串中的index
  • 原字符串

例子1:
我们可以利用function来完成一些复杂的功能;利用function我们能将a1b2c3d4e5字符串中的数字部分分别加1,变成a2b3c4d5e6

var ret = 'a1b2c3d4e5'.replace(/\d/g,function(match,index,origin){
       console.log(index);
       return parseInt(match) + 1;
});
console.log(ret);
替换结果

例子2:
我们能将a1b2c3d4e5字符串中的数字中间的字母去掉,变成a12c34e5

var ret = 'a1b2c3d4e5'.replace(/(\d)(\w)(\d)/g,function(match,group1,group2,group3,index,origin){
    console.log(index);
    return group1 + group3;
});
console.log(ret);
去掉分组内容

正则表达式终结者:关于正则表达式中笔者了解的所有的内容全都如数奉上了,尽情享用!如有裨补缺漏,望各位积极补刀!如果能助您一臂之力,实乃在下荣幸!(书写完毕,感觉身体被掏空/(ㄒoㄒ)/~~点一首《冬天的秘密》送给各位,此乃滋阴补阳之良品!望各位猿类好好享用)

君问归期未有期,巴山夜雨涨秋池! -------《夜雨寄北》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • 初衷:看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印...
    DCbryant阅读 3,982评论 0 20
  • RegExp 三大方法本文的RegExp采用直接量语法表示:/pattern/attributes。attribu...
    恩德_b0c2阅读 452评论 0 0
  • 参考博文:http://www.cnblogs.com/tugenhua0707/p/5037811.html 1...
    createEngine阅读 651评论 0 0
  • 穿越世纪的爱恋,在我青农的大舞台中尽情的展现,对你的情愫,也是在学术的熏陶中逐渐成熟,青岛农业大学,你将会...
    东方小白丶嗨式阅读 315评论 0 6
  • 我开始了一个人的旅程,这比停滞不前更痛苦,刘同说“孤独之前是迷茫,孤独之后是成长。” 孤独之前是迷茫。 你说,就...
    柯江芮阅读 9,590评论 247 380