JavaScript 正则表达式(1)


之前在前端群和一群人聊天,有人提到了正则表达式,很多人都说,没必要深入了解正则表达式,拿来主义,有需要的时候直接网上找,都有现成的,我并不吃惊,因为我也是拿来主义,没有系统的学习过,或者说了解过正则表达式,但是出于好奇,百度了一下正则表达式,发现它并没有想象中那么简单,一旦真正学会它,我觉得在以后做项目中,会轻松很多,或者说思路会广阔很多,所以准备自己写一点学习正则的感悟和理解,以供自己以后复习。


申明正则表达式##

在JavaScript中,正则表达式其实是正则对象,也可以说成RegExp对象,既然是对象,那么就和对象声明一样,有2种方式声明,一种是直接字面量声明,如下:

var a = /^cat/i;

上述代码很简单,就是用字面量的方式创建了一个正则表达式。它的结构大概是这样的:

var 正则的名字 = /正则表达式/正则的标志(行为)

其中最复杂的应该就是正则表达式部分了,这个先不提,慢慢学吧。正则的标志有以下3种:

  • g:表示的是全局模式,在这种模式下,这条正则规则将会去匹配你规定的所有字符串,而非发现一个匹配项就停止。
  • i:表示匹配的字符串不区分大小写,在上述例子中,就可以理解为,匹配以cat,或者Cat,或者CAT等等开头的段落。
  • m:表示多行模式,在这种模式下到达了一行文本的末尾会继续再下一行查找是否存在于之相匹配的。

正则的行为可以有多个。当然,还有第二种申明正则的方式,构造函数声明(new关键字),具体如下:

var a = new RegExp('^cat','i');

代码也很简单,结构大概是这样的:

var 正则的名字 = new RegExp('正则表达式','正则的标志')

2种方式都可以创建正则表达式,但是有一点要注意,字面量声明是在//里面声明,而构造函数声明传进去的参数是字符串,所有遇到一些\n这样转义字符,需要双重转义,变成\\\n,下面列出了一些例子:

字面量模式 构造函数模式的字符串
/\[bc\]at/ '\\[bc\\]at'
/\.at/ '\\.at'
/\w\\hello\123/ '\\w\\\\hello\\\\123'

正则表达式的基础##

再上一个例子中,我们看到了

var a = /^cat/i

其中^cat^元字符cat为普通字符,元字符的意思就是说,比起普通字符有更多的含义,比如^的意思就是一行的开始,与之相对应的还有$元字符,代表一行的结束。
^cat可以理解为,匹配以cat开头的行。当然,还有更准确的理解,匹配以c作为一行的第一个字符,紧接着是a,然后是t的文本。因为正则匹配都是按照字符而不是单词,所以这样理解会更加准确一些。
下面总结一下常用的基础的正则表达式元字符:

元字符 名称 匹配对象
. 点号 单个任意字符
[···] 字符组 并列出的任意字符
[ ^···] 排除型字符组 未列出的任意字符
^ 脱字符 行的起始位置
$ 美元符 行的结束位置
< 反斜线-小于 单词的起始位置
\> 反斜线-大于 单词的结束位置
竖线 匹配分隔两边的任意一个表达式
(···) 括号 限制竖线的作用范围,分组匹配,反向引用等

表示重复的元字符:

元字符 次数下限 次数上限 含义
? 1 可以出现,也可以只出现一次(单次可选)
* 可以出现无穷多次,也可以不出现(任意次数均可)
+ 1 可以出现无穷多次,但至少要出现一次(至少一次)

规定重复出现的次数范围:{min,max},如:

var a = /[0-9]{1,5}/  //匹配0至9的任意数字出现1至5次的行

正则实例方法##

JavaScript中,正则提供了2个方法。exec()test()

exec()是专门为捕获组而设计的,它接受一个参数,即要作用的字符串,然后返回第一个匹配项信息的数组(没有匹配项返回null),该数组中,第一项是整个模式匹配的字符串,其他项是与模式中捕获组的字符串(如果没有捕获组则只含有一项)。除此之外,该数组还包含2个属性,inputindexinput为作用的字符串,index为匹配项在字符串中的位置。具体例子如下:

var text = '123456789CATCatCAtnnlsnfl'
var reg = /(cat)+/gi;
var match = reg.exec(text);
console.log(match[0]);//CATCatCAt
console.log(match[1]);//CAt
console.log(match.index);//9
console.log(match.input);//123456789CATCatCAtnnlsnfl

test()方法相对来说就简单一点了,它接受一个字符串参数,匹配成功,返回true,匹配失败,返回false,所以常用在if判断句中。具体代码如下:

var text = '123456789CATCatCAtnnlsnfl'
var reg = /(cat)+/gi;
var reg2 = /(caat)+/gi;
var match = reg.test(text);
var match2 = reg.test(text);
console.log(match);//true
console.log(match2);//false

String对象里的正则##

string对象有很多方法都是支持正则的,比如search(),match()等等。下面,我们就来总结一下,string支持正则的方法。


search()
search()方法支持传入一个参数,该参数可以是普通的字符串,也可以是一个正则表达式,如果是字符串,那就返回第一个符合条件的位置,同理,如果是正则表达式,就返回匹配正则表达式的位置,如果匹配失败,返回-1,具体代码如下:

var text = '123456789CATCatCAtnnlsnfl'
var reg = /(cat)+/gi;
var match = text.search(reg);
var match2 = text.search('cat');
console.log(match);//9
console.log(match2);//-1

值得一提的是,在search()中,会忽略正则表达式的g标志,并且总是从字符串左向右匹配,一旦匹配到第一个符合条件的项就会立马结束匹配,并返回项所在的位置。


match()
match()方法支持传入一个参数,该参数可以是普通的字符串,也可以是一个正则表达式,如果是字符串,那就返回一个以第一个匹配的字符串,并且有index,input属性的数组,其中,index是第一个匹配成功的位置,input是字符串本身,如果匹配失败,则返回null;同理,如果是正则表达式,那就返回所有匹配成功的字符串组成的数组,并有inputindex,具体代码如下:

var text = '123456789catCATCatCAtnnlsnflcAt'
var reg = /cat/gi;
var reg2 = /c.t/i;
var match = text.match(reg);
var match2 = text.match('cat');
var match3 = text.match(reg2);
console.log(match);//["cat", "CAT", "Cat", "CAt", "cAt"]
console.log(match2);//["cat", index: 9, input: "123456789catCATCatCAtnnlsnflcAt"]
console.log(match3);//["cat", index: 9, input: "123456789catCATCatCAtnnlsnflcAt"]

值得一提的是,如果正则表达式是全局匹配,即有g标志,返回的只是一个所有符合条件的项的数组,而没有indexinput属性。


replace()
replace()方法接受2个参数,第一个参数是需要匹配的字符串或者正则表达式,第二个参数是替换的字符串。然后返回新的字符串。具体代码如下:

var text = '123456789catCATCatCAtnnlsnflcAt'
var reg = /(cat)+/gi;
var match = text.replace(reg,'dog');
var match2 = text.replace('cat','dog');
console.log(match);//123456789dognnlsnfldog
console.log(match2);//123456789dogCATCatCAtnnlsnflcAt

还没完!!Perl中,我们知道有括号的分组匹配,即,用括号能够‘记住’他们包含子表达式匹配的文本,在JavaScript中replace()中也有与之类似的功能,不过写法不一样,JavaScript,使用的是$,可以用$来得到括号里面的值并保留,具体如下:

var text = '123456789catCATCatCAtnnlsnflcAt'
var reg = /(cat)?(cat)/gi;
var match = text.replace(reg,' 1=$1 2=$2 ');
var match2 = text.replace('cat','dog');
console.log(match);//123456789 1=cat 2=CAT  1=Cat 2=CAt nnlsnflcAt
console.log(match2);//123456789dogCATCatCAtnnlsnflcAt

使用$1可以去到第一个括号的值并保留,同理,可以一直向下取值。
当然,不仅仅只有$number的用法,具体还有

符号 含义
1....99 与regexp中的第1到第99个子表达式相匹配的文本。
$& 与RegExp相匹配的子字符串。
lastMatch或RegExp["$_"] 返回任何正则表达式搜索过程中的最后匹配的字符。
lastParen或 RegExp["$+"] 返回任何正则表达式查找过程中最后括号的子匹配。
leftContext或RegExp["$`"] 返回被查找的字符串从字符串开始的位置到最后匹配之前的位置之间的字符。
rightContext或RegExp["$'"] 返回被搜索的字符串中从最后一个匹配位置开始到字符串结尾之间的字符。

split()
split()接受2个参数, 第一个参数是一个字符串或者正则表达式,第二个参数可填可不填,是限制返回数组的最大长度。通过匹配字符串或者正则表达式,来对字符串进行切割,并返回一个切割的数组。具体代码如下:

var text = '1,2-3,4.5,6-7*8,9'
var reg = /[,-.*]*/gi;
var match = text.split(reg);
var match2 = text.split(',');
var match3 = text.split(reg,3);
console.log(match);//["1", "2", "3", "4", "5", "6", "7", "8", "9"]
console.log(match2);//["1", "2-3", "4.5", "6-7*8", "9"]
console.log(match3);//["1", "2", "3"]

JavaScript 正则表达式(1)
JavaScript 正则表达式(2)
JavaScript 正则表达式(3)
JavaScript 正则表达式(4)

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

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0 4
  • 初衷:看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印...
    DCbryant阅读 3,980评论 0 20
  • 推荐几个正则表达式编辑器 Debuggex :https://www.debuggex.com/ PyRegex:...
    木易林1阅读 11,452评论 9 151
  • 很久以前,有一位骑士,他认为自己是一个善良又有爱心的人。于是他身穿盔甲,不停的拯救公主、打倒恶龙,受到人民的无限爱...
    时光蜜糖阅读 1,000评论 3 51
  • 安卓,电脑:ADSafe 苹果:乐网 浏览网页、看视频过滤广告神器 -----------------------...
    只是一点阅读 241评论 0 1