javascript 正則表達式补充

定义

JavaScript种正則表達式有两种定义方式，定义一个匹配类似 <%XXX%> 的字符串

1. 构造函数

var reg=new RegExp('<%[^%>]+%>','g');

2. 字面量

var reg=/<%[^%>]%>/g;

g： global。全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大写和小写，默认大写和小写敏感
m： multiple lines。多行搜索

元字符

正則表達式让人望而却步以一个重要原因就是其转义字符太多了，组合很之多，可是正則表達式的元字符（在正則表達式中具有特殊意义的专用字符，能够用来规定其前导字符）并不多

元字符：( [ { \ ^ $ | ) ? * + .

并非每一个元字符都有其特定意义。在不同的组合中元字符有不同的意义。分类看一下

提前定义特殊字符

字符	含义
\t	水平制表符
\r	回车符
\n	换行符
\f	换页符
\cX	与X相应的控制字符(Ctrl+X)
\v	垂直制表符
\0	空字符

字符类

普通情况下正則表達式一个字符（转义字符算一个）相应字符串一个字符，表达式 ab\t 的含义是

javascript 正則表達式补充

可是我们能够使用元字符[]来构建一个简单的类。所谓类是指，符合某些特征的对象。是一个泛指，而不是特指某个字符了，我们能够使用表达式 [abc] 把字符a或b或c归为一类，表达式能够匹配这类的字符

javascript 正則表達式补充

元字符[]组合能够创建一个类。我们还能够使用元字符^创建反向类/负向类，反向类的意思是不属于XXX类的内容，表达式 [^abc] 表示不是字符a或b或c的内容

javascript 正則表達式补充

范围类

依照上面的说明要是我们希望匹配单个数字那么表达式是这种

[0123456789]

假设是字母那么。

。

。。好麻烦，正則表達式还提供了范围类，我们能够使用 x-y来连接两个字符表示从x到y的随意字符。这是个闭区间，也就是说包括x和ybenshen。这样匹配小写字母就非常easy了

[a-z]

javascript 正則表達式补充

要是想匹配全部字母呢？在[]组成的类内部是能够连写的，我们还能够这样写 [a-zA-Z]

javascript 正則表達式补充

提前定义类

刚才使用正则我们创建了几个类，来表示数字。字母等，但这样写也非常是麻烦，正則表達式为我们提供了几个经常使用的提前定义类来匹配常见的字符

字符	等价类	含义
.	[^\n\r]	除了回车符和换行符之外的全部字符
\d	[0-9]	数字字符
\D	[^0-9]	非数字字符
\s	[ \t\n\x0B\f\r]	空白符
\S	[^ \t\n\x0B\f\r]	非空白符
\w	[a-zA-Z_0-9]	单词字符（字母、数字、下划线）
\W	[^a-zA-Z_0-9]	非单词字符

有了这些提前定义类，写一些正则就非常方便了，比方我们希望匹配一个 ab+数字+随意字符的字符串。就能够这样写了 ab\d.

javascript 正則表達式补充

边界

正則表達式还提供了几个经常使用的边界匹配字符

字符	含义
^	以xx开头
$	以xx结尾
\b	单词边界，指[a-zA-Z_0-9]之外的字符
\B	非单词边界

看个不负责任的邮箱正则匹配（切勿模仿，小括号后面会讲到） \w+@\w+\.(com)$

javascript 正則表達式补充

量词

之前我们介绍的方法都是一一匹配的，假设我们希望匹配一个连续出现20次数字的字符串难道我们须要写成这样

\d\d\d\d...

为此正則表達式引入了一些量词

字符	含义
?	出现零次或一次（最多出现一次）
+	出现一次或多次（至少出现一次）
*	出现零次或多次（随意次）
{n}	出现n次
{n,m}	出现n到m次
{n,}	至少出现n次
{,m}	最多出现m次

看几个使用量词的样例

\w+\b Byron 匹配单词＋边界＋Byron

(/\w+\b Byron/).test('Hi Byron'); //true

(/\w+\b Byron/).test('Welcome Byron'); //true

(/\w+\b Byron/).test('HiByron'); //false

\d+\.\d{1,3} 匹配三位小数的数字

javascript 正則表達式补充

贪婪模式与非贪婪模式

看了上面介绍的量词。或许爱思考的同学会想到关于匹配原则的一些问题，比方{3,5}这个量词，要是在句子种出现了十次，那么他是每次匹配三个还是五个，反正3、4、5都满足3～5的条件。量词在默认下是尽可能多的匹配的。也就是大家常说的贪婪模式

'123456789'.match(/\d{3,5}/g); //["12345", "6789"]

既然有贪婪模式。那么肯定会有非贪婪模式。让正則表達式尽可能少的匹配，也就是说一旦成功匹配不不再继续尝试，做法非常easy，在量词后加上 ? 就可以

'123456789'.match(/\d{3,5}?/g); //["123", "456", "789"]

分组

有时候我们希望使用量词的时候匹配多个字符，而不是像上面样例仅仅是匹配一个。比方希望匹配Byron出现20次的字符串，我们假设写成 Byron{20} 的话匹配的是Byro＋n出现20次，怎么把Byron作为一个总体呢？使用()就能够达到次目的，我们称为分组

(Byron){20}

javascript 正則表達式补充

假设希望匹配Byron或Casper出现20次该怎么办呢？能够使用字符｜达到或的功效

(Byron|Casper){20}

javascript 正則表達式补充

我们看到图中有个＃1的东东，那是什么？使用分组的正則表達式会把匹配项也放到分组中，默认就是按数字编号分发的。各异依据编号获得捕获的分组内容，这个在一些希望详细操作第几个匹配项的函数中非常实用

(Byron).(ok)

javascript 正則表達式补充

假设有分组嵌套的情况。外面的组的编号靠前

((^|%>)[^\t]*)

javascript 正則表達式补充

有时候我们不希望捕获某些分组。仅仅须要在分组内加上 ?: 就能够了，着并不意味着该分组内容不属于正則表達式，仅仅是不会给这个分组加编号了而已

:Byron).(ok)

javascript 正則表達式补充

事实上在C#等语言中分组还能够起名字。只是JavaScript不支持

前瞻

表达式	含义
exp1(? =exp2)	匹配后面是exp2的exp1
exp1(?!exp2)	匹配后面不是exp2的exp1

说的有些抽象，看个样例 good(?=Byron)

javascript 正則表達式补充

(/good(?=Byron)/).exec('goodByron123'); //['good']

(/good(?

=Byron)/).exec('goodCasper123'); //null

(/bad(?=Byron)/).exec('goodCasper123');//null

通过上面样例能够看出 exp1(?=exp2) 表达式会匹配exp1表达式，但仅仅有其后面内容是exp2的时候才会匹配，也就是两个条件。exp1(?!exp2) 比較类似

good(?!Byron)

javascript 正則表達式补充

(/good(?!Byron)/).exec('goodByron123'); //null

(/good(?

!Byron)/).exec('goodCasper123'); //['good']

(/bad(?!Byron)/).exec('goodCasper123');//null

參考

司徒正美 JavaScript正則表達式

有了这些基本知识，能够看看正則表達式在JavaScript的应用了。在一切開始之前。看看RegExp实例的几个属性

javascript 正則表達式补充

RegExp实例对象有五个属性

global：是否全局搜索，默认是false
ignoreCase：是否大写和小写敏感，默认是false
multiline：多行搜索。默认值是false
lastIndex：是当前表达式模式首次匹配内容中最后一个字符的下一个位置，每次正則表達式成功匹配时。lastIndex属性值都会随之改变。
source：正則表達式的文本字符串

除了将正則表達式编译为内部格式从而使运行更快的compile()方法，对象还有两个我们经常使用的方法

regObj.test(strObj)

方法用于測试字符串參数中是否存正則表達式模式。假设存在则返回true，否则返回false

var reg=/\d+\.\d{1,2}$/g;

reg.test('123.45'); //true

reg.test('0.2'); //true

reg.test('a.34'); //false

reg.test('34.5678'); //false

regObj.exec(strObj)

方法用于正則表達式模式在字符串中执行查找，假设 exec() 找到了匹配的文本。则返回一个结果数组。否则，返回 null。除了数组元素和 length 属性之外。exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。

调用非全局的 RegExp对象的 exec() 时，返回数组的第 0 个元素是与正則表達式相匹配的文本。第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（假设有的话），第 2 个元素是与 RegExp对象的第 2 个子表达式相匹配的文本（假设有的话）。以此类推。

调用全局的RegExp对象的 exec() 时，它会在 RegExp实例的 lastIndex 属性指定的字符处開始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExp实例的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。

能够通过重复调用 exec() 方法来遍历字符串中的全部匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。

var reg=/\d/g;

var r=reg.exec('a1b2c3');

console.log(reg.lastIndex); //2

r=reg.exec('a1b2c3');

console.log(reg.lastIndex); //4

两次运行r的结果

javascript 正則表達式补充

var reg=/\d/g;

while(r=reg.exec('a1b2c3')){

    console.log(r.index+':'+r[0]);

}

能够看到结果：

1:1

3:2

5:3

除了上面的两个方法，有些字符串函数能够传入RegExp对象作为參数。进行一些复杂的操作

strObj.search(RegObj)

search() 方法用于检索字符串中指定的子字符串，或检索与正則表達式相匹配的子字符串。search() 方法不运行全局匹配，它将忽略标志 g。它同一时候忽略 regexp 的 lastIndex 属性，而且总是从字符串的開始进行检索。这意味着它总是返回 stringObject 的第一个匹配的位置。

'a1b2c3'.search(/\d/g); //1

'a1b2c3'.search(/\d/); //1

strObj.match(RegObj)

match() 方法将检索字符串 stringObject，以找到一个或多个与 regexp 匹配的文本。但regexp是否具有标志 g对结果影响非常大。

假设 regexp 没有标志 g，那么 match() 方法就仅仅能在 strObj 中运行一次匹配。假设没有找到不论什么匹配的文本。 match() 将返回 null。否则，它将返回一个数组，当中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本。而其余的元素存放的是与正則表達式的子表达式匹配的文本。除了这些常规的数组元素之外，返回的数组还含有两个对象属性。

index 属性声明的是匹配文本的起始字符在 stringObject
中的位置。input 属性声明的是对 stringObject 的引用。

var r='aaa123456'.match(/\d/);

javascript 正則表達式补充

假设 regexp 具有标志 g，则 match() 方法将运行全局检索。找到 strObj 中的全部匹配子字符串。若没有找到不论什么匹配的子串，则返回 null。假设找到了一个或多个匹配子串。则返回一个数组。

只是全局匹配返回的数组的内容与前者大不同样，它的数组元素中存放的是 strObj 中全部的匹配子串，并且也没有 index 属性或 input 属性。

var r='aaa123456'.match(/\d/g);

javascript 正則表達式补充

strObj.replace(regObj,replaceStr)

关于strng对象的replace方法，我们最经常使用的时传入两个字符串的做法。但这样的做法有个缺陷。仅仅能replace一次

'abcabcabc'.replace('bc','X'); //aXabcabc

replace方法的第一个參数还能够传入RegExp对象，传入正則表達式能够时replace方法更加强大灵活

'abcabcabc'.replace(/bc/g,'X'); //aXaXaX

'abcaBcabC'.replace(/bc/gi,'X'); //aXaXaX

假设replace方法的第一个參数传入的是带分组的正則表達式，我们在第二个參数中能够使用$1...$9来获取对应分组内容，比方希望把字符串 1<%2%>34<%567%>89 的<%x%>换为$#x#$，我们能够这样

'1<%2%>34<%567%>89'.replace(/<%(\d+)%>/g,'@#$1#@');

//"1@#2#@34@#567#@89"

当然还有非常多方式能够达到这一目的，这里仅仅是演示一下利用分组内容，我们在第二个參数中使用 @#$1#@，当中$1表示被捕获的分组内容，在一些js模板函数中能够常常见到这样的方式替换字符串。

strObj.replace(regObj,function(){})

能够通过改动replace方法的第二个參数，使replace更加强大，在前面的介绍中，仅仅能把全部匹配替换为固定内容，但假设我希望把一个字符串中全部数字。都用小括号包起来该怎么弄

'2398rufdjg9w45hgiuerhg83ghvif'.replace(/\d+/g,function(r){

    return '('+r+')';

}); //"(2398)rufdjg(9)w(45)hgiuerhg(83)ghvif"

把replace方法的第二个參数传入一个function。这个function会在每次匹配替换的时候调用，算是个每次替换的回调函数，我们使用了回调函数的第一个參数，也就是匹配内容，事实上回调函数一共同拥有四个參数

第一个參数非常easy。是匹配字符串
第二个參数是正則表達式分组内容。没有分组则没有该參数
第三个參数是匹配项在字符串中的index
第四个參数则是原字符串

'2398rufdjg9w45hgiuerhg83ghvif'.replace(/\d+/g,function(a,b,c){

    console.log(a+'\t'+b+'\t'+c);

    return '('+a+')';

}); 

2398    0    2398rufdjg9w45hgiuerhg83ghvif

9    10    2398rufdjg9w45hgiuerhg83ghvif

45    12    2398rufdjg9w45hgiuerhg83ghvif

83    22    2398rufdjg9w45hgiuerhg83ghvif

这是没有分组的情况，打印出来的各自是匹配内容、匹配项index和原字符串，看个有分组的样例，假设我们希望把一个字符串的<%%>外壳去掉，<%1%><%2%><%3%> 变成123

'<%1%><%2%><%3%>'.replace(/<%([^%>]+)%>/g,function(a,b,c,d){

    console.log(a+'\t'+b+'\t'+c+'\t'+d);

    return b;

}) //123

<%1%>    1    0    <%1%><%2%><%3%>

<%2%>    2    5    <%1%><%2%><%3%>

<%3%>    3    10    <%1%><%2%><%3%>

依据这样的參数replace能够实现非常多强大的功能，尤其是在复杂的字符串替换语句中常常使用。

strObj.split(regObj)

我们常常使用split方法把字符串切割为字符数组

'a,b,c,d'.split(','); //["a", "b", "c", "d"]

和replace方法类似，在一些复杂的切割情况下我们能够使用正則表達式解决

'a1b2c3d'.split(/\d/); //["a", "b", "c", "d"]

这样就能够依照数字切割字符串了。是不是非常强大。看完这两篇博客基本就能对平时用到的JavaScript正則表達式游刃有余了。要求在前端把一个div中的英文段落单词首字母都换成大写，你是不是知道该怎么做了？

秒客网

javascript 正則表達式补充

定义

元字符

提前定义特殊字符

字符类

范围类

提前定义类

边界

量词

贪婪模式与非贪婪模式

分组

前瞻

參考

regObj.test(strObj)

regObj.exec(strObj)

strObj.search(RegObj)

strObj.match(RegObj)

strObj.replace(regObj,replaceStr)

strObj.replace(regObj,function(){})

strObj.split(regObj)

相关文章