序章

本专栏主要介绍JavaScript正则表达式。读完整篇文章你将获得三部分内容：了解正则表达式语法；在IDE中使用正则处理复杂的字符串查找和替换需求；在javaScript程序设计中使用正则处理字符串。

什么是正则表达式

Regular Expression 使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。例如，find ./ -name *.txt 在当前目录下通过name查找所有的txt文件，*是任意的意思。

正则表达式工具及使用

知识点速读
\d-> 数字
\d?-> 0个或者1个
\d+-> 1个或者多个
\d{3}-> 3个
\d{3,5}-> 3到5个
\d*-> 任意个，可以0个、1个或者任意个
匹配字符串
ide里面替换字符串，搜索字符串，有些也支持正则检索。

He is a good boy.
This is a test.
Where are you ?
Display is also a noun.
What is your name?

把代码中所有的is替换成大写的IS，直接搜索，this也会匹配上。如果写成\bis\b，就可以准确检索到is。\b是单词边界。
图形工具中所示：

匹配收尾有特征字符串
去掉http协议的jpg文件的协议头

https://img.host.com/images/swwswssw.jpg
http://img.host.com/images/rrtyyee.jpg
https://img.host.com/images/kkgfggh.jpg
https://img.host.com/images/hjjjgff.jpg
https://img.host.com/images/qwarrr.jpg
http://img.host.com/images/rgdgegg.jpg
https://img.host.com/images/ffghhgd.jpg

首先，找到匹配的内容http:\/\/.+\.jpg ，.在正则中表示任意字符的意思。注意处理任意字符，需要严格查找的都要把特殊字符转义一下。
图形工具中所示：

然后，需要去除掉http:，那就要用分组这个方法，http:(\/\/.+\.jpg) 括号就是分组，括号里面的内容是$1，把http:，排除在外面。
图形工具中所示：

用$1去替换http:(\/\/.+\.jpg)就能满足要求。

https://img.host.com/images/swwswssw.jpg
//img.host.com/images/rrtyyee.jpg
https://img.host.com/images/kkgfggh.jpg
https://img.host.com/images/hjjjgff.jpg
https://img.host.com/images/qwarrr.jpg
//img.host.com/images/rgdgegg.jpg
https://img.host.com/images/ffghhgd.jpg

日期替换

2006/02/03
test/07/sd
2016/05/10
1998-03-07
12345/23/45678
1234/23/45678
12345/23/45

首先，先找出符合日期格式的条目，正则表达式为\d{4}[/-]\d{2}[/-]\d{2}，图形工具中所示：

上面的正则，除了test/07/sd所有的都能匹配到。比如，12345/23/45678中的2345/23/45也满足要求。接下来，要区分下满足条件的数字。只能从头开始匹配4个字母，结尾部分匹配，正则表达式为^\d{4}[/-]\d{2}[/-]\d{2}$，图形工具中所示：

最后，捕获一下匹配的年月日，(\d{4})[/-](\d{2})[/-](\d{2}),格式替换成$1-$2-$3。2006/02/03会被替换成2006-02-03。

认识正则表达式

JavaScript通过内置对象RegExp支持正则表达式。有俩种方法实例化RegExp对象，字面量和构造函数。例如，把字符串中的小写is替换成大写IS。

字面量

var reg = /\bis\b/g
'she is a happy girl. where is she?'.replace(reg,'IS') //"she IS a happy girl. where IS she?"

构造函数

var reg = new RegExp('\\bis\\b','g')
'she is a happy girl. where is she?'.replace(reg,'IS') //"she IS a happy girl. where IS she?"

修饰符

g：global 全文搜索，不添加，搜索到第一个匹配停止。
i：ignore case 忽略大小写，默认大小写敏感

'she is a happy girl. where Is she?'.replace(/\bis\b/g,'0') // "she 0 a happy girl. where Is she?"
'she is a happy girl. where Is she?'.replace(/\bis\b/gi,'0') // "she 0 a happy girl. where 0 she?"

m: multiple lines 多行搜索

元字符

正则表达式由俩钟基本字符类型组成：原义文本字符和元字符
元字符是在正则表达式中有特殊含义的非字母字符，例如\b,意思不是字母b，而是单词边界。特殊字符有* + ? $ ^ . | \ ( ) { } [ ]

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

字符类

一般情况下正则表达式一个字符对应字符串一个字符
表达是ab\t的含义如下所示，和我们的正则表达式是一一对应的
匹配某类字符如何处理？
使用元字符[]来构建一个简单的类。所谓的类是指符合某些特性的对象，一个泛指，而不是特指某个字符。表达式[abc]把字符a或b或c归为一类，表达式可以匹配这类的字符。

'a1b2c3d4'.replace(/[abc]/g,'X') // "X1X2X3d4"

字符类取反使用元字符^创建，反向类/负向类。反向类的意思是不属于某类的内容，例如，表达式[^abc]表示不是字符a或b或c的内容。

'a1b2c3d4'.replace(/[^abc]/g,'X') // "aXbXcXXX"

范围类

正则表达式提供了范围类，可以使用[a-z]来链接俩个字符，表示从a到z的任意字符。注意[a-z]是个闭区间，包含a和z本身。

'a1b2d3x4z9'.replace(/[a-z]/g,'Q') //"Q1Q2Q3Q4Q9"

在[]组成的类内部是可以连写的，比如匹配大小写 [a-zA-Z]。

'a1b2d3x4z9DGHJKLL'.replace(/[a-z]/g,'Q') //"Q1Q2Q3Q4Q9DGHJKLL"
'a1b2d3x4z9DGHJKLL'.replace(/[a-zA-Z]/g,'Q') //"Q1Q2Q3Q4Q9QQQQQQQ"

匹配数字

'2020-05-07'.replace(/[0-9]/g, 'A') //"AAAA-AA-AA"

如果日期中的-线也想匹配，如下所示，第一个-表示范围，第二个 -表示字符原本的意思。

'2020-05-07'.replace(/[0-9-]/g, 'A') //"AAAAAAAAAA"

预定义类及边界

字符	等价类	含义
.	[^\r\n]	除回车符和换行符之外的所有字符
\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[0-9][^\r\n]

用预定义类表达更加简便ab\d.

正则表达式还提供了一个常用的边界匹配字符

字符	含义
^	以xxx开始
$	以xxx结束
\b	单词边界
\B	非单词边界

\b和\B

'This is a boy'.replace(/is/g, '0') // "Th0 0 a boy"
'This is a boy'.replace(/\bis\b/g, '0') //"This 0 a boy"
'This is a boy'.replace(/\Bis\b/g, '0') // "Th0 is a boy"

^和$

'@123@abc@'.replace(/@./g,'Q')  // "Q23Qbc@"
'@123@abc@'.replace(/^@./g,'Q')  // "Q23@abc@"
'@123@abc@'.replace(/.@/g,'Q')  // "@12QabQ"
'@123@abc@'.replace(/.@$/g,'Q') // "@123@abQ"

多行匹配m，g只能匹配单行的所有字符，多行需要m。

量词

我们希望匹配一个连续出现20次数字的字符串，如果这样写\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d，会非常麻烦。如果匹配100次呢？显然这样处理不合理。
那么用量词表示应该为\d{20}

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

JS正则贪婪模式与非贪婪模式

贪婪模式
如下所示，应该匹配3次还是6次，还是中间的4或者5次？其实是6次，尽可能多的匹配。

'12345678'.replace(/\d{3,6}/g, 'X') // "X78"

非贪婪模式
让正则表达式尽可能少的匹配，也就是说一旦成功匹配不再继续尝试。在{}后面加个?就是非贪婪模式{}?。

'12345678'.replace(/\d{3,6}?/g, 'X') // "XX78"
'123456789'.match(/\d{3,5}?/g) // ["123", "456", "789"]

分组

使用()可以达到分组的功能，使量词作用于分组。
例如，匹配字符串Byron连续出现3次的场景 (Byron){3}。

// 没有替换成功，这个意思是匹配连续出现3个数字，然后进行替换
'a1b2c3d4'.replace(/[a-z]\d{3}/g, 'X') // "a1b2c3d4"

// 应该进行分组
'a1b2c3d4'.replace(/([a-z]\d){3}/g, 'X') // "Xd4"

或
使用|可以达到或的效果。例如，Byron|Casper，俩个分支都可以。

如果只是把中间on和Ca或以下，这样表示Byr(on|Ca)sper。

'ByronCasper'.replace(/Byron|Casper/g, 'X') // "XX"
'ByronsperByrCasper'.replace(/Byr(on|Ca)sper/g, 'X') // "XX"

反向引用
题目：2015-12-25 => 12/25/2015

// \d{4}-\d{2}-\d{2} 可以匹配到2015-12-25，但是要获取到具体对像。
// 加上括号，进行分组，就可以捕获到对象。
'2015-12-25'.replace(/(\d{4})-(\d{2})-(\d{2})/g, '$2/$3/$1') // "12/25/2015"

忽略分组不希望捕获某些分组，只需要在分组内加上?:就可以。例如(?:Byron).(ok)，ok为group1，前面Byron分组被忽略了。

前瞻

正则表达式从文本头部向尾部开始解析，文本尾部方向称为前
前瞻就是在正则表达式匹配到规则的时候，向前检查是否符合断言，后顾/后瞻方向相反。
JavaScript不支持后顾
符合和不符合特定断言称为肯定/正向匹配和否定/负向匹配

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

正向前瞻，例如\w(?=\d)，表示前面任意一个单词，找到后，判断下后面一个是不是数字。

'a2*3'.replace(/\w(?=\d)/g, 'X') // "X2*3"
'a2*34v8'.replace(/\w(?=\d)/g, 'X') // "X2*X4X8"
'a2*34vv'.replace(/\w(?=\d)/g, 'X') // "X2*X4vv"
'a2*34vv'.replace(/\w(?!\d)/g, 'X') // "aX*3XXX"

JS对象属性

g：global 全文搜索，不添加，搜索到第一个匹配停止。默认false。
i：ignore case 忽略大小写，默认大小写敏感。默认false。
m: multiple lines 多行搜索，默认false。
lastIndex: 是当前表达是匹配内容的最后一个字符的下一个位置
source: 正则表达式的文本字符串

var reg1 = /\w/;
var reg2 = /\w/gim ;
reg1.global // false
reg1.ignoreCase // false
reg1.multiline // false
reg2.global // true
reg2.ignoreCase // true
reg2.multiline // true
reg1.source // "\w"
reg2.source // "\w"

test和exec方法

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

reg1.test('a') // true
reg1.test('$') // false

RegExp.prototype.exec(str)使用正则表达式模式对字符串执行搜索，并将更新全局RegExp对象的属性以反映匹配结果。如果没有匹配的文本则返回null，否则返回一个结果数组。

- index 声明匹配文本的第一个字符的位置
- input 存放被检索的字符串 string

非全局调用
调用非全局的RegExp对象的exec()时，返回数组。第一个元素是与正则表达式相匹配的文本。第二个元素是与RegExpObject的第一个子表达式相匹配的文本（如果有的话）。第三个元素是与RegExp对象的第二个子表达式相匹配的文本（如果有的话），一次类推。

字符串对象方法

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

'a1b2c3d1'.search('1') // 1
'a1b2c3d1'.search('10') // -1
'a1b2c3d1'.search(1) // 1
'a1b2c3d1'.search(/1/) // 1
'a1b2c3d1'.search(/1/g) // 1

String.prototype.match(str) match()方法将检索字符串，以找到一个或多个与regexp匹配的文本。regexp是否具有标志g对结果影响很大。
非全局调用：如果regexp没有标志g，那么match()方法就只能在字符串中执行一次。如果没有找到任何匹配的文本，返回null。否则将返回一个数组，其中存放了与它找到的匹配的文本有关的信息。
返回的数组的第一个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本。
除了常规的数组元素之外，返回的数组还包含有2个对象属性。

index 声明匹配文本的起始字符在字符串的位置
input 声明对stringObject的引用

全局调用：如果regexp具有标志g则match()方法将执行全局检索，找到字符串中的所有匹配子字符串。如果没有找到任何匹配的文本，返回null。如果找到了一个或多个匹配字符串，则返回一个数组。
数组元素中存放的是字符传中所有的匹配子串，而且也没有index属性或input属性。

String.prototype.split(str) 我们经常使用split方法把字符串分割为字符数组。

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

在一些复杂的分割情况下我们可以使用正则表达式解决。

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

String.prototype.replace(str)

String.prototype.replace(str, replaceStr)
String.prototype.replace(reg, replaceStr)
String.prototype.replace(reg, function)

function参数含义：function会在每次匹配替换的时候调用，有四个参数：匹配字符串；正则表达是分组内容，没有分组则没有该参数；匹配想在字符串中的index；原字符串。

'a1b2c3d4'.replace(/\d/g, fucntion(match,index,origin){
    console.log(match,index,origin);
    return pasreInt(match)+1;
})

'a1b2c3d4e5'.replace(/(\d)(\w)(\d)/g, function(match,group1,group2,group3,index,origin){
    console.log(match,group1,group2,group3,index,origin);
    return group1 + group3;
})

JS正则表达式简介及工具使用

序章