关注前端 | 前端博客

JS-RegExp

2018-07-08 分类:JavaScript 作者:管理员 阅读(160)

概要:整理出数正则表达式一些常用的方法

正则表达式的概念
使用正则表达式的方法

正则表达式的概念

正则表达式是用于匹配字符串中字符组合的模式。
在 JavaScript中,正则表达式也是对象。
这些模式被用于 RegExp 的 exec 和 test 方法,
以及 String 的 match、replace、search 和 split 方法。

使用正则表达式的方法

方法 描述

exec 一个在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回null)。
test 一个在字符串中测试是否匹配的RegExp方法,它返回true或false。
match 一个在字符串中执行查找匹配的String方法,它返回一个数组或者在未匹配到时返回null。
search 一个在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。
replace 一个在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。
split 一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的String方法

当你想要知道在一个字符串中的一个匹配是否被找到,你可以使用test或search方法;
想得到更多的信息(但是比较慢)则可以使用exec或match方法。
如果你使用exec或match方法并且匹配成功了,
那么这些方法将返回一个数组并且更新相关的正则表达式对象的属性和预定义的正则表达式对象(详见下)。
如果匹配失败,那么exec方法返回null(也就是false)。

创建一个正则表达式
1
2
3
4
5
6
7
8
//使用一个正则表达式字面量,其由包含在斜杠之间的模式组成,如下所示:
/*
   /pattern/flags
*/


const regex = /ab+c/;

const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;

//调用RegExp对象的构造函数,如下所示:
/*
new RegExp(pattern [, flags])
*/

var regex = new RegExp("ab+c");

var regex = new RegExp(/^[a-zA-Z]+[0-9]*\W?_$/, "gi");

var regex = new RegExp("^[a-zA-Z]+[0-9]*\\W?_$", "gi");
//使用构造函数提供正则表达式的运行时编译。
//使用构造函数,当你知道正则表达式模式将会改变,或者你不知道模式,并从另一个来源,
//如用户输入。

[/cc]

语法
1
2
3
/pattern/flags
new RegExp(pattern , flags)
RegExp(pattern , flags)
参数

pattern
正则表达式的文本。
flags
如果指定,标志可以具有以下值的任意组合:

g
全局匹配;找到所有匹配,而不是在第一个匹配后停止
i
忽略大小写
m
多行; 将开始和结束字符(^和$)视为在多行上工作(也就是,分别匹配每一行的开始和结束(由 \n 或 \r 分割),而不只是只匹配整个输入字符串的最开始和最末尾处。
u
Unicode; 将模式视为Unicode序列点的序列
y
粘性匹配; 仅匹配目标字符串中此正则表达式的lastIndex属性指示的索引(并且不尝试从任何后续的索引匹配)。

描述

有两种方法来创建一个RegExp对象:一是字面量、二是构造函数。
要指示字符串,字面量的参数不使用引号,而构造函数的参数使用引号。
因此,以下表达式创建相同的正则表达式:

/ab+c/i;
new RegExp('ab+c', 'i');
new RegExp(/ab+c/, 'i');

()、[]、{} 的区别

() 的作用是提取匹配的字符串。表达式中有几个()就会得到几个相应的匹配字符串。比如 (\s+) 表示连续空格的字符串
[]是定义匹配的字符范围。比如 [a-zA-Z0-9] 表示字符文本要匹配英文字符和数字。
{}一般用来表示匹配的长度,比如 \d{3} 表示匹配三个空格,\d[1,3]表示匹配1~3个空格

^ 和 $

^ 匹配一个字符串的开头,比如 (^a) 就是匹配以字母a开头的字符串
$ 匹配一个字符串的结尾,比如 (b$) 就是匹配以字母b结尾的字符串
^ 还有另个一个作用就是取反,比如[^xyz] 表示匹配的字符串不包含xyz
需要注意的是:如果^出现在[]中一般表示取反,而出现在其他地方则是匹配字符串的开头

\d \s \w .

\d 匹配一个非负整数, 等价于 [0-9]
\s 匹配一个空白字符
\w 匹配一个英文字母或数字,等价于[0-9a-zA-Z]
. 匹配除换行符以外的任意字符,等价于[^\n]

* + ?

* 表示匹配前面元素0次或多次,比如 (\s*) 就是匹配0个或多个空格
+ 表示匹配前面元素1次或多次,比如 (\d+) 就是匹配由至少1个整数组成的字符串
? 表示匹配前面元素0次或1次,相当于{0,1} ,比如(\w?) 就是匹配最多由1个字母或数字组成的字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
正则表达式是基于grep和ed这些Unix管理工具发展而来的,使用正则表达式可以使字符串处理变得更加方便快捷,
以下内容主要是JavaScript正则表达式的一些基础知识汇总:

1. JavaScript正则表达式的实现

JavaScript对正则表达式的支持是通过ECMAScript中的RegExp类实现的,RegExp对象的构造函数可以带一个或两个参数。
第一个参数描述需要进行匹配的模式字符串,第二个参数指定了额外的处理指令。

程序代码

var re=new RegExp("test","gi");

 

实现方法二:使用Perl风格的语法(较常用)

程序代码

var re=/test/gi; //这种方式和上面是一样的效果

 

2. 使用RegExp对象的方法

RegExp对象主要方法有:
RegExp.test(String)
RegExp.exec(String)
String.match(RegExp)
String.search(RegExp)
replace()split()也常用正则

2.1 test()方法

test()方法,如果给定字符串匹配这个模式,就返回true,否则返回false

程序代码

var re=/test/;

alert(re.test("this is the test content")); //output "true"

 

2.2 exec()方法

exec()方法和test()用法类似,不过exec返回的是一个数组,并且只有一个条目,既是第一次的匹配。

程序代码

var re=/test/gi;

alert(re.exec("this is the test content")); //output "test"

 

2.3 match()方法

match()方法也是返回一个数组,不过使用方法和上面有区别,match的使用方法为String.match(RegExp)

程序代码

var re=/te/gi;

alert(("this is the test content").match(re)); //output "te, te"

 

2.4 search()方法

search()方法和字符串的indexOf()方法类似,返回在字符串中出现的一个匹配的位置。

程序代码

var re=/te/i;

alert(("this is the test content").search(re)); //output 12

 

3. 在字符串方法中使用正则表达式

在字符串方法String.replace()和String.split()中使用正则表达式。

3.1 String.replace()

程序代码

var re=/te/gi;

alert(("this is the test content").replace(re,"ok")); //output "this is the okst conoknt"

 

3.2 String.split()

示例代码:

程序代码

var re=/te/gi;

alert(("this is the test content").split(re)); //output "this is the ,st con,nt"

 

4. 使用元字符

JavaScript正则表达式元字符:

程序代码

( [ { \ ^ $ | ) ? * + .

 

任何时候要在正则表达式中使用元字符,都必须对他们进行转义。

程序代码

var re=/\?/ //匹配?

var re2=new RegExp("\\?"); //匹配?

 

第二行的定义中使用两个反斜杠,主要是因为JavaScript字符串解析器会按照\n的方式翻译\?,
为了保证不出现这个问题,所以要在元字符前面使用两个反斜杠,我们称之为双重转义。

5. 使用特殊字符

在表达式中可以使用字符串本身,也可以使用它的ASCII码或者Unicode代码,要用ASCII码来表示一个字符,
则必须制定一个两位的十六进制代码,并在前面加上\x。
例如:字符b的ASCII码为98,转换成十六进制为62,既是\x62。

程序代码

var re=/\x62/;

alert(re.test("blue")); //output "true"

 

另外也可以使用八进制代替十六进制表示。

示例代码:

程序代码

var re=/\142/; //使用八进制表示

alert(re.test("blue")); //output "true"

 

如果使用Unicode来表示字符,必须制定字符串的四位十六进制表示形式,比如b的表示方式为:\u0062

示例代码:

程序代码

var re=/\u0062/; //使用Unicode表示

alert(re.test("blue")); //output "true"

 

另外一些需要双重转义的字符:

程序代码

\t \n \r \r \a \e \cX \b \v \0

 

6. 正则表达式字符类

6.1 简单类 [abc...]

程序代码

var re=/[gts]o/g; //匹配go to so

alert(("you go to bed,so will i").match(re)); //output "go to so"

 

6.2 负向类 [^abc]

负向类主要是采用排除策略,例如[^abc],既是排除a b c三个字符。

程序代码

var re=/[^gts]o/g; //排除g t s +o

alert(("you go to bed,so do i").match(re)); //output "yo do"

 

6.3 范围类 [a-z]

范围类主要是不方便枚举,但连续的一系列字符或数字等。

程序代码

var re=/a[3-5]/g;

alert(("a1,a2,a3,a4,a5,a6").match(re)); //output "a3,a4,a5"

 

6.4 组合类 [a-z0-9\r\n]

组合类是有几种方式组合而成的字符串。

示例代码:

程序代码

var re=/[a-b3-5]/g;

alert(("a1,a2,a3,a4,a5,a6").match(re)); //output "a,a,a,3,a,4,a,5,a"

 

6.5 预定义类

常用的预定义类:

程序代码

. [^\n\r]

\d [0-9]

\D [^0-9]

\s [ \t\n\x0B\f\r]

\S [^ \t\n\x0B\f\r]

\w [a-zA-Z0-9]

\W [^a-zA-Z0-9]

 

7. 量词

7.1 简单量词

程序代码

? {0,1}

* {0,}

+ {1,}

{n} 一定出现n次

{n,m} 至少出现n次,但不超过m次

{n,} 至少出现n次

 

程序代码

var re=/g?oo?d?/g; //可匹配o go goo good oo ood od

alert(("to go is good").match(re)); //output "o go good"

 

7.2 贪婪的(? * + {n} {n,m} {n,})

贪婪的先看整个的字符串是否匹配,如果没有匹配,就去掉最后一个字符,
然后再次进行匹配,以此规则进行下去......

程序代码

var str="abc abcd abcde";

var re=/.*c/g; //贪婪方式匹配

alert(re.exec(str)); //output "abc abcd abc"

 

7.3 懒惰的 (?? *? +? {n}? {n,m}? {n,}?)

懒惰的跟贪婪的匹配方向相反,懒惰的先从第一个字符开始匹配,如果不成功,
就读入下一个字符继续进行匹配,以此规则进行下去...

程序代码

var str="abc abcd abcde";

var re=/.*?c/g; //懒惰方式匹配

alert(re.exec(str)); //output "abc"

 

7.4 支配的 (?+ *+ ++ {n}+ {n,m}+ {n,}+)

支配的只尝试匹配整个字符串,如果整个字符串不能匹配,不做进一步尝试,
此方法浏览器支持不太好,不推荐使用。

8. 复杂模式

8.1 分组

分组是通过用一系列括号包围一系列字符、字符类以及量词来使用的。

程序代码

var re=/g(o)+gle/g; "o"至少出现1

alert(("gogle google gooooogle").match(re)); //output "gogle google gooooogle"

 

8.2 反向引用(backreference)

利用分组进行正则匹配后,每个分组都被存储在一个特殊的地方,
这些存储在分组中的特殊值,我们称之为反向引用(backreference)

程序代码

var re=/(\d+)/;

re.test("123456789");

alert(RegExp.$1); //output "123456789"

 

8.3 候选

候选其实就是个or选择。使用|分隔。

程序代码

var re=/you|me/g;

alert(("say you say me").match(re)); //output "you, me"

 

8.4 非捕获性分组(?:)

不创建反向引用的分组,我们称之为非捕获性分组,使用非捕获性分组,
可以除去捕获性分组存储分组的时间消耗,提高程序执行效率。

示例代码:

程序代码

var re=/(?:\d+)/;

re.test("123456789");

alert(RegExp.$1); //output ""

 

8.5 前瞻(lookahead) (?= )

有时候,希望某个特定的字符出现在另一个字符串之前时,才会捕获它。
前瞻告诉正则表达式运算器向前看一些字符而不移动其位置。 前瞻有负向(?!)和正向(?=)之分。

程序代码

var re=/(good(?=lu))/g;

var str="goodluck is lucy";

alert(str.match(re)); //output "good"

 

8.6 边界

程序代码

^ 行开头

$ 行结尾

\b 单词的边界

\B 非单词的边界

 

程序代码

var re=/^(.+?)\b/g; //以懒惰的方式匹配单词

var str="goodluck is lucy";

alert(str.match(re)); //output "goodluck"

 

 

8.7 多行模式(m)

匹配多行,常配合g使用。

程序代码

var re=/(\w+)$/gm; //匹配每行末尾的一个单词

var str="goodluck is lucy\ngo to bed";

alert(str.match(re)); //output "lucy, bed"

主要参考网站:MDN web docsw3school
持续更新中...

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
0

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - JS-RegExp

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线