看了掘金的一个作者写的JS正则表达式完整教程受益匪浅，感谢作者的无私奉献。在此，做下笔记。

0. 目录
1. 正则表达式字符匹配
- 1.1.字符组
- 1.2.量词
- 1.3.多选分支
- 1.4.案例分析
2. 正则表达式位置匹配
- 2.1.什么是位置呢？
- 2.2.如何匹配位置呢？
- 2.3.位置的特性
- 2.4.案例分析
3. 正则表达式括号的作用
- 3.1.提取数据
- 3.2.替换
- 3.3.反向引用
- 3.4.非捕获分组
- 3.5.相关案例
4. 操作符优先级
5. 元字符转义
6. search，split，match，replace，test，exec

1. 正则表达式字符匹配

1.1 字符组

[ab]匹配a或者b其中一个字符

1.1.1 常见的简写

\d： [0-9]。表示是一位数字。记忆方式：其英文是digit（数字）。

\D： [^0-9]。表示除数字外的任意字符。

\w： [0-9a-zA-Z_]。表示数字、大小写字母和下划线。记忆方式：w是word的简写，也称单词字符。

\W： [^0-9a-zA-Z_]。非单词字符。

\s： [ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。记忆方式：s是space character的首字母。

\S： [^ \t\v\n\r\f]。非空白符。

.： [^\n\r\u2028\u2029]。通配符，表示几乎任意字符。换行符、回车符、行分隔符和段分隔符除外。记忆方式：想想省略号...中的每个点，都可以理解成占位符，表示任何类似的东西。

[\d\D]、[\w\W]、[\s\S]和[^] ：任意字符

1.1.2 排除字符组

[^abc] 一个除"a"、"b"、"c"之外的任意一个字符，^（脱字符），表示求反

1.2 量词

1.2.1 简写

{m,n} ：表示至少出现m次，至多出现n次。

{m,} ：表示至少出现m次。

{m} ：等价于{m,m}，表示出现m次。

? ：等价于{0,1}，表示出现或者不出现。记忆方式：问号的意思表示，有吗？

+：等价于{1,}，表示出现至少一次。记忆方式：加号是追加的意思，得先有一个，然后才考虑追加。

*：等价于{0,}，表示出现任意次，有可能不出现。记忆方式：看看天上的星星，可能一颗没有，可能零散有几颗，可能数也数不过来。

1.2.2 贪婪匹配

var regex = /\d{2,5}/g;

var string = "123 1234 12345 123456";

console.log( string.match(regex) );

// => ["123", "1234", "12345", "12345"]

/\d{2,5}/，表示数字连续出现2到5次。会匹配2位、3位、4位、5位连续数字，你有几位我就匹配几位，能匹配多的绝对不给你匹配少的

有时贪婪不是一件好事，而惰性匹配，就是尽可能少的匹配：

1.2.3 惰性匹配

var regex = /\d{2,5}?/g;

var string = "123 1234 12345 123456";

console.log( string.match(regex) );

// => ["12", "12", "34", "12", "34", "12", "34", "56"]

通过在量词后面加个问号就能实现惰性匹配，因此所有惰性匹配情形如下：

{m,n}?

{m,}?

??

+?

*?

1.3 多选分支 |

(p1|p2|p3)，其中p1、p2和p3是子模式，用|（管道符）分隔，表示其中任何之一。

var regex = /good|goodbye/g;

var string = "goodbye";

console.log( string.match(regex) );

// => ["good"]

var regex = /goodbye|good/g;

var string = "goodbye";

console.log( string.match(regex) );

// => ["goodbye"]

也就是说，分支结构也是惰性的，即当前面的匹配上了，后面的就不再尝试了。

1.4 案例分析

1.4.1匹配时间 23:59 02:07

分析：

共4位数字，第一位数字可以为[0-2]。

当第1位为2时，第2位可以为[0-3]，其他情况时，第2位为[0-9]。

第3位数字为[0-5]，第4位为[0-9]

var regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/;

1.4.2匹配日期 yyyy-mm-dd

分析：

年，四位数字即可，可用[0-9]{4}。

月，共12个月，分两种情况01、02、……、09和10、11、12，可用(0[1-9]|1[0-2])。

日，最大31天，可用(0[1-9]|[12][0-9]|3[01])。

var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;

console.log( regex.test("2017-06-10") );

// => true

1.4.3 window操作系统文件路径

案例 F:\study\javascript\regex\regular expression.pdf

分析：

整体模式是: 盘符:\文件夹\文件夹\文件夹<br/>

盘符:\：[a-zA-Z]+\ 盘符不能为空，\ 要转义

文件夹\：中间含有0或者多个文件夹的层级文件名或者文件夹名，不能包含一些特殊字符，此时我们需要排除字符组[^\:<>|"?\r\n/]来表示合法字符，另外不能为空名，至少有一个字符，也就是要使用量词+ ： [^\:<>|"?\r\n/+]*

最后一部分文件夹没有 \：[^\:*<>|"?\r\n/+]?

var regex = /^[a-zA-Z]:\\([^\\:*<>|"?\r\n/]+\\)*([^\\:*<>|"?\r\n/]+)?$/;

console.log( regex.test("F:\\study\\javascript\\regex\\regular expression.pdf") );

1.4.4 匹配id

提取出id="container"。
```
var regex = /id=".*"/
var string = '

';
console.log(string.match(regex)[0]);
// => id="container" class="main"
```
.是通配符，本身就匹配双引号的，而量词*又是贪婪的，当遇到container后面双引号时，不会停下来，会继续匹配，直到遇到最后一个双引号为止。
解决之道，可以使用惰性匹配：
```
var regex = /id=".*?"/
var string = '

';
console.log(string.match(regex)[0]);
// => id="container"

//优化

var regex = /id="[^"]*"/

var string = '

';

console.log(string.match(regex)[0]);

// => id="container"



##### 1.4.4 匹配带86的手机号 <br/>

13885821234 +8613885821234 08613885821234 (+86)13885821234 (086)13885821234

var string="13885821234 +8613885821234 08613885821234 (+86)13885821234 (086)13885821234"

var reg=/(+86|086|(+86)|(\086))?(1[34578][0-9]{9})/g

string.match(reg)

//["13885821234", "+8613885821234", "08613885821234", "(+86)13885821234", "13885821234"]



#### 2. <span id = "title-2">正则表达式位置匹配</span><br/>

#### 2.1 <span id = "title-2-1">什么是位置呢？</span><br/>

![](http://images2017.cnblogs.com/blog/1181900/201711/1181900-20171103144747763-1652231640.png)

#### 2.2 <span id = "title-2-2">如何匹配位置呢？</span><br/>

在ES5中，共有6个锚字符：<br/>

^ $ \b \B (?=p) (?!p)

#####2.2.1  ^和$ <br/>

^（脱字符）匹配开头，在多行匹配中匹配行开头。<br/>

$（美元符号）匹配结尾，在多行匹配中匹配行结尾。<br/>

var result = "hello".replace(/^|$/g, '#');

console.log(result);

// => "#hello#"

多行匹配

var result = "I\nlove\njavascript".replace(/^|$/gm, '#');

console.log(result);

/*

I#

love#

javascript#



#####2.2.2  \b和\B <br/>

\w是字母数字或者下划线的中任何一个字符<br/>

\b是单词边界，具体就是\w和\W之间的位置，也包括\w和^之间的位置，也包括\w和$之间的位置。 <br/>

var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');

console.log(result);

// => "[#JS#] #Lesson_01#.#mp4#"

\B就是\b的反面的意思，非单词边界。例如在字符串中所有位置中，扣掉\b，剩下的都是\B的。 <br/>

var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#');

console.log(result);

// => "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"

#####2.2.3 (?=p)和(?!p) <br/>

(?=p)，其中p是一个子模式，即p前面的位置 <br/>

(?=p)，一般都理解成：要求接下来的字符与p匹配，但不能包括p的那些字符。<br/>

而在本人看来(?=p)就与^一样好理解，就是p前面的那个位置<br/>

(?!p)，除了p前面的所有位置 <br/>

var result = "hello".replace(/(?=l)/g, '#');

console.log(result);

// => "he#l#lo"

var result = "hello".replace(/(?!l)/g, '#');

console.log(result);

// => "#h#ell#o#"



#### 2.3 <span id = "title-2-3">位置的特性</span><br/>

字符之间的位置，可以写成多个。<br/>

把位置理解空字符，是对位置非常有效的理解方式。<br/>

"hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "o" + "";

//true

"hello" == "" + "" + "hello"

//true

var result = /^^hello$$$/.test("hello");

console.log(result);

// => true

var result = /(?=he)^^he(?=\w)llo$\b\b$/.test("hello");

console.log(result);

// => true

#### 2.4. <span id = "title-2-4">相关案例</span><br/>

##### 2.4.1 不匹配任何东西的正则<br/>

/.^/   此正则要求只有一个字符，但该字符后面是开头 <br/>

##### 2.4.2 数字的千位分隔符表示法<br/>

把"12345678"，变成"12,345,678"<br/>

弄出最后一个逗号

var result = "12345678".replace(/(?=\d{3}$)/g, ',')

console.log(result);

// => "12345,678"

弄出所有逗号

var result = "12345678".replace(/(?=(\d{3})+$)/g, ',')

console.log(result);

// => "12345,678"

验证发现有问题

var result = "123456789".replace(/(?=(\d{3})+$)/g, ',')

console.log(result);

// => ",123,456,789"

怎么解决呢？我们要求匹配的到这个位置不能是开头。<br/>

我们知道匹配开头可以使用^，但要求这个位置不是开头怎么办？<br/>

easy，(?!^)，你想到了吗？测试如下：<br/>

var string1 = "12345678",

string2 = "123456789";

reg = /(?!^)(?=(\d{3})+$)/g;

var result = string1.replace(reg, ',')

console.log(result);

// => "12,345,678"

result = string2.replace(reg, ',');

console.log(result);

// => "123,456,789"

把"12345678 123456789"替换成"12,345,678 123,456,789"。 <br/>

此时我们需要修改正则，把里面的开头^和结尾$，替换成\b： <br/>

var string = "12345678 123456789",

reg = /(?!\b)(?=(\d{3})+\b)/g;

var result = string.replace(reg, ',')

console.log(result);

// => "12,345,678 123,456,789"

其中(?!\b)怎么理解呢？ <br/>

要求当前是一个位置，但不是\b前面的位置，其实(?!\b)说的就是\B。 <br/>

因此最终正则变成了：/\B(?=(\d{3})+\b)/g。 <br/>

##### 2.4.3 验证密码的问题<br/>

密码长度6-12位，由数字、小写字符和大写字母组成，但必须至少包括2种字符<br/>

不考虑“但必须至少包括2种字符”这一条件<br/>

var reg = /^[1]{6,12}$/;

必须包含数字(?=.*[0-9]) <br/>

/(?=.*[0-9])^[0-9A-Za-z]{6,12}$/<br/>

对于这个正则，我们只需要弄明白(?=.*[0-9])^即可。<br/>

分开来看就是(?=.*[0-9])和^。<br/>

表示开头前面还有个位置（当然也是开头，即同一个位置，想想之前的空字符类比）。<br/>

(?=.*[0-9])表示该位置后面的字符匹配.*[0-9]，即，有任何多个任意字符，后面再跟个数字。<br/>

var reg = /(?=.*[0-9])^[2]{6,12}$/;

同时包含具体两种字符(?=.*[0-9])(?=.*[a-z]) <br/>

var reg = /(?=.[0-9])(?=.[a-z])^[3]{6,12}$/;

我们可以把原题变成下列几种情况之一：<br/>

1. 同时包含数字和小写字母

2. 同时包含数字和大写字母

3. 同时包含小写字母和大写字母

4. 同时包含数字、小写字母和大写字母</br/>

var reg = /((?=.[0-9])(?=.[a-z])|(?=.[0-9])(?=.[A-Z])|(?=.[a-z])(?=.[A-Z]))^[4]{6,12}$/;

console.log( reg.test("1234567") ); // false 全是数字

console.log( reg.test("abcdef") ); // false 全是小写字母

console.log( reg.test("ABCDEFGH") ); // false 全是大写字母

console.log( reg.test("ab23C") ); // false 不足6位

console.log( reg.test("ABCDEF234") ); // true 大写字母和数字

console.log( reg.test("abcdEF234") ); // true 三者都有

解法二

“至少包含两种字符”的意思就是说，不能全部都是数字，也不能全部都是小写字母，也不能全部都是大写字母。</br/>

那么要求“不能全部都是数字”，怎么做呢？(?!p)出马！   <br/>

var reg = /(?!^[0-9]{6,12}$)^[0-9A-Za-z]{6,12}$/;

#### 3.  <span id = "title-3">正则表达式括号的作用</span><br/>

#### 3.1. <span id = "title-3-1">提取数据</span><br/>

以日期为例。假设格式是yyyy-mm-dd的<br/>

var regex = /(\d{4})-(\d{2})-(\d{2})/;

var string = "2017-06-12";

console.log( string.match(regex) );

// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

构造函数的全局属性$1-$9，如RegExp.$1匹配结果的第一个引用()内容<br/>

var regex = /(\d{4})-(\d{2})-(\d{2})/;

var string = "2017-06-12";

console.log(RegExp.$1); // "2017"

console.log(RegExp.$2); // "06"

console.log(RegExp.$3); // "12"

#### 3.2 <span id = "title-3-2">替换</span><br/>

把yyyy-mm-dd格式，替换成mm/dd/yyyy怎么做？<br/>



#### 3.3 <span id = "title-3-3">反向引用</span><br/>

>

2016-06-12

2016/06/12

2016.06.12

>

//缺点：但也匹配"2016-06/12"这样的数据。

var regex = /\d{4}(-|/|.)\d{2}(-|/|.)\d{2}/;

//使用反向引用

var regex = /\d{4}(-|/|.)\d{2}\1\d{2}/;

\1，表示的引用之前的那个分组(-|\/|\.)。不管它匹配到什么（比如-），\1都匹配那个同样的具体某个字符。\2和\3同理<br/>

#### 3.4 <span id = "title-3-4">非捕获分组</span><br/>

只想要括号最原始的功能，但不会引用它，此时可以使用非捕获分组(?:p)<br/>

var regex = /(?:ab)+/g;

var string = "ababa abbb ababab";

console.log( string.match(regex) );

// => ["abab", "ab", "ababab"]



#### 3.5 <span id = "title-3-5">相关案例</span><br/>

##### 3.5.1 trim()方法

//法一

function tirm(str){

return str.replace(/^\s+|\s+$/g,"")

}

//法二这里使用了惰性匹配?，不然也会匹配最后一个空格之前的所有空格的

function tirm(str){

return str.replace(/^\s(.?)\s$/g,"$1")

}

##### 3.5.2  将每个单词的首字母转换为大写

replace第一个参数是正则，第二个是字符串或者function，参数第一个是匹配正则的项，第二个是()引用返回的项，以此类推

function titleize(str) {

return str.toLowerCase().replace(/(?:^|\s)\w/g, function(c) {

return c.toUpperCase();

});

}

console.log( titleize('my name is epeli') );

// => "My Name Is Epeli"

##### 3.5.3  驼峰化 <br/>

-moz-transform  MozTransform <br/>

function camelize(str) {

return str.replace(/-_\s?/g,function(match,c){

return c?c.toUpperCase():''

})

}

console.log( camelize('-moz-transform') );

//中划线划

function dasherize(str) {

return str.replace(/([A-Z])/g, '-$1').replace(/[-_\s]+/g, '-').toLowerCase();

}

console.log( dasherize('MozTransform') );

// => "-moz-transform"

单词的界定是，前面的字符可以是多个连字符、下划线以及空白符。正则后面的?的目的，是为了应对str尾部的字符可能不是单词字符，比如str是'-moz-transform    '。<br/>

##### 3.5.4  html转义和反转义化 <br/>

// 将HTML特殊字符转换成等值的实体

function escapeHTML(str) {

var escapeChars = {

'¢' : 'cent',

'£' : 'pound',

'¥' : 'yen',

'€': 'euro',

'©' :'copy',

'®' : 'reg',

'<' : 'lt',

'>' : 'gt',

'"' : 'quot',

'&' : 'amp',

''' : '#39'

};

return str.replace(new RegExp('[' + Object.keys(escapeChars).join('') +']', 'g'), function(match) {

return '&' + escapeChars[match] + ';';

});

}

console.log( escapeHTML('

Blah blah blah

') );

// => "<div>Blah blah blah</div&gt";

// 实体字符转换为等值的HTML。

function unescapeHTML(str) {

var htmlEntities = {

nbsp: ' ',

cent: '¢',

pound: '£',

yen: '¥',

euro: '€',

copy: '©',

reg: '®',

lt: '<',

gt: '>',

quot: '"',

amp: '&',

apos: '''

};

return str.replace(/&([^;]+);/g, function(match, key) {

if (key in htmlEntities) {

return htmlEntities[key];

}

return match;

});

}

console.log( unescapeHTML('<div>Blah blah blah</div>') );

// => "

Blah blah blah



##### 3.5.5 匹配成对html标签 <br/>

匹配一个开标签，可以使用正则<[^>]+>，<br/>

匹配一个闭标签，可以使用<\/[^>]+>，<br/>

要求匹配成对标签，那就需要使用反向引用

var regex = /<([^>]+)>[\d\D]*</\1>/;



#### 4.  <span id = "title-4">操作符优先级</span><br/>

优先级从高到低<br/>

1. 转义符 \。

2. 括号和方括号 (...)、(?:...)、(?=...)、(?!...)、[...]。

3. 量词限定符 {m}、{m,n}、{m,}、?、*、+。

4. 位置和序列 ^ 、$、 \元字符、 一般字符。

5. 管道符 竖杠。

#### 5.  <span id = "title-5">元字符转义</span><br/>

正则不会引发歧义，自然不需要转义。<br/>

需要视情况转义的字符 ^ $ . * + ? | \ / ( ) [ ] { } = ! : - ,

#### 6.  <span id = "title-6">search，split，match，replace，test，exec </span><br/>

search和match，会把接受的字符串转换为正则<br/>

search有匹配结果返回第一个位置索引，无返回-1<br/>

match：没有g，返回的是标准匹配格式，即，数组的第一个元素是整体匹配的内容，接下来是分组捕获的内容，然后是整体匹配的第一个下标，最后是输入的目标字符串。<br/>

有g，返回的是所有匹配的内容。<br/>

当没有匹配时，不管有无g，都返回null。<br/>

exec：当正则没有g时，使用match返回的信息比较多。但是有g后，就没有关键的信息index了。

而exec方法就能解决这个问题，它能接着上一次匹配后继续匹配：<br/>

其中正则实例lastIndex属性，表示下一次匹配开始的位置。<br/>

var string = "2017.06.27";

var regex2 = /\b(\d+)\b/g;

console.log( regex2.exec(string) );

console.log( regex2.lastIndex);

console.log( regex2.exec(string) );

console.log( regex2.lastIndex);

console.log( regex2.exec(string) );

console.log( regex2.lastIndex);

console.log( regex2.exec(string) );

console.log( regex2.lastIndex);

// => ["2017", "2017", index: 0, input: "2017.06.27"]

// => 4

// => ["06", "06", index: 5, input: "2017.06.27"]

// => 7

// => ["27", "27", index: 8, input: "2017.06.27"]

// => 10

// => null

// => 0

split<br/>

第一，它可以有第二个参数，表示结果数组的最大长度：<br/>

var string = "html,css,javascript";

console.log( string.split(/,/, 2) );

// =>["html", "css"]

第二，正则使用分组时，结果数组中是包含分隔符的：<br/>

var string = "html,css,javascript";

console.log( string.split(/(,)/) );

// =>["html", ",", "css", ",", "javascript"]



replace <br/>

第一个参数是正则表达式<br/>

第二个参数是字符串时，如下的字符有特殊的含义：<br/>

>

$1,$2,...,$99 匹配第1~99个分组里捕获的文本

$& 匹配到的子串文本

$` 匹配到的子串的左边文本

$' 匹配到的子串的右边文本

$$ 美元符号

>

var text = "cat, bat, sat, fat";

var result = text.replace(/(.at)/g,"word ($1)"); //word (cat), word (bat), word (sat), word (fat)

巴特西

js之学习正则表达式

目录

0. 目录

1. 正则表达式字符匹配

1.1.字符组

1.2.量词

1.3.多选分支

1.4.案例分析

2. 正则表达式位置匹配

2.1.什么是位置呢？

2.2.如何匹配位置呢？

2.3.位置的特性

2.4.案例分析

3. 正则表达式括号的作用

3.1.提取数据

3.2.替换

3.3.反向引用

3.4.非捕获分组

3.5.相关案例

4. 操作符优先级

5. 元字符转义

6. search，split，match，replace，test，exec

1. 正则表达式字符匹配

1.1 字符组

1.1.1 常见的简写

1.1.2 排除字符组

1.2 量词

1.2.1 简写

1.2.2 贪婪匹配

1.2.3 惰性匹配

1.3 多选分支 |

1.4 案例分析

1.4.1匹配时间 23:59 02:07

1.4.2匹配日期 yyyy-mm-dd

1.4.3 window操作系统文件路径

1.4.4 匹配id

I#

love#

javascript#

最新文章

热门文章