读这篇文章之前你须要控制基础的JavaScript学问，而且有平静温馨的环境与裕如的时刻，文章有点长，你能够挑选备好coffee或茶来逐步进修。
文章题目有点强调了，这是一篇正则表达式的入门文章。若有毛病，迎接斧正。
观点和语法
REGEXP对象
JavaScript 经由过程内置对象RegExp支撑正则表达式，有两种要领实例化RegExp对象
1.字面量 2.组织函数
字面量
var reg = /\bis\b /g //婚配单词is g是global 举行全文搜刮婚配
没有g：
var reg = /\bis\b/;
//只替代第一项
'He is a boy. This is a dog. Where is she?'.replace(reg,'IS');
"He IS a boy. This is a dog. Where is she?"
有g：
var reg = /\bis\b/g;
//替代了一切的
'He is a boy. This is a dog. Where is she?'.replace(reg,'IS');
"He IS a boy. This IS a dog. Where IS she?"组织函数
var reg = new RegExp( '\\bis\\b' , 'g'); //一样，假如不加g 则只替代第一项
修饰符
g：global 全文搜刮，不增加，搜刮到第一个婚配住手
i：ignore case 疏忽大小写，默许大小写敏感
m：multiplelines 多行搜刮
//未疏忽大小写
'He is a boy. Is he?'.replace(/\bis\b/g, '0');
"He 0 a boy. Is he?"
//疏忽大小写
'He is a boy. Is he?'.replace(/\bis\b/gi, '0');
"He 0 a boy. 0 he?"元字符
·正则表达式由两种基础字符范例构成：
原义文本字符
元字符
·元字符是在正则表达式中有特别寄义的非字母字符
`· * + ? $ ^ . / \ () {} []`
字符类
我们能够应用元字符 [] 来构建一个简朴的类
所谓类是指相符某些特征的对象，一个泛指，而不是特指某个字符
表达式[abc] 把字符a或b或c归为一类，表达式能够婚配这类的字符（one of）
'a1b2c3d4'.replace(/[abc]/g,'X')
"X1X2X3d4"字符类取反
应用元字符^建立 反向类/负向类
'a1b2c3d4'.replace(/[^abc]/g,'X')
"aXbXcXXX"局限类
正则表达式还供应了 局限类
所以我们能够应用 [a-z] 来衔接两个字符示意 从a到z的恣意字符
这是个闭区间，也就是包括a和z自身
'a1b2d3x4z9'.replace(/[a-z]/g,'Q')
"Q1Q2Q3Q4Q9"在[]构成的类内部是能够连写的[a-zA-Z] (one of)
'a1b2d3x4z9AJHGK'.replace(/[a-zA-Z]/g,'Q')
"Q1Q2Q3Q4Q9QQQQQ"中划线：假如是在里面 如[a-z]，就示意局限的意义，假如想婚配中划线，在背面加
'2016-09-12'.replace(/[0-9-]/g,'A')
"AAAAAAAAAA"预定义类
正则表达式供应 预定义类 来婚配罕见的字符类
字符 . 等价类
[^\r\n]除了回车符和换行符以外的一切字符\d [0-9] 数字字符 \D [^0-9] 非数字字符 \s 空白符 \S非空白符 \w 单词字符（字母、数字下划线） \W 非单词字符 ab\d. //ab+数字+恣意字符
边境
正则表达式还供应了几个常常使用的边境婚配字符
^ 以xxx最先
$ 以xxx完毕
\b 单词边境
\B 非单词边境
'@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"量词
我们愿望婚配一个一连涌现20次数字的字符串
+ 涌现一次或屡次（最少涌现一次）
* 涌现零次或屡次（恣意次）
{n} 涌现n次
{n,m}涌现n到m次
{n,}最少涌现n次
贪欲形式
d{3,6} 12345678
//尽量多的婚配
'12345678'.replace(/\d{3,6}/g,'X')
"X78"非贪欲形式
让正则表达式尽量少的婚配，也就是说一旦胜利婚配不再继承尝试就黑白贪欲形式
//在量词后加上？即可 以下面的为3个一组
'12345678'.replace(/\d{3,6}?/g,'X')
"XX78"分组
婚配字符串Byron一连涌现3次的场景Byron{3} 只是将n反复三次
应用()能够到达分组的功用，使量词作用于分组(Byron){3} 是将Byron反复三次
//毛病的
'a1b2c3d4'.replace(/[a-z]\d{3}/g,'X')
"a1b2c3d4"
//准确的
'a1b2c3d4'.replace(/([a-z]\d){3}/g,'X')
"Xd4"或
应用 | 能够到达或的效果
//示例一
'ByronCasper'.replace(/Byron|Casper/g,'X')
"XX"
//示例二(分组和或合营应用)
'ByronsperByrCasper'.replace(/Byr(on|Ca)sper/g,'X')
"XX"反向援用
2016-08-12 => 08/12/2016
//分组捕捉
'2016-08-12'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$1')
"2016"
'2016-08-12'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2/$3/$1')
"08/12/2016"疏忽分组
不愿望捕捉某些分组，只须要在分组内加上？：就可以够(?:Byron).(ok)
前瞻
正则表达式从文本头部向尾部最先剖析，文本尾部方向，称为“前”
前瞻就是在正则表达式婚配到划定规矩的时刻，向前搜检是不是相符断言，
后顾/后瞻方向相反
正向前瞻 exp(?=assert)
负向前瞻 exp(?!assert)
//单词背面是数字
'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')
"aX*3XXX"对象属性
对象属性是只读的
global：是不是全文搜刮，默许false
ignore case：是不是大小写敏感，默许是false
multiline：多行搜刮，默许值是false
lastIndex：是当前表达式婚配内容的末了一个字符的下一个位置
source：正则表达式的文本字符串
test和exec要领
RegExp.prototype.test(str)
用于测试字符串参数中是不是存在婚配正则表达式形式的字符串
假如存在则返回true，不然返回false
var reg1 = /\w/;
reg1.test('a')
true
reg1.test('$')
false
然则假如如许：
var reg2 = /\w/g;
//第一次
reg1.test('ab')
true
//第二次
reg1.test('ab')
true
//第三次
reg1.test('ab')
false这是lastIndex在作祟！
第一次婚配的时刻当前婚配内容为a，末了一个字符也是a自身，下一个位置为b前面；
第二次婚配的时刻当前婚配内容为b，末了一个字符也是b自身，下一个位置为b背面；
第三次婚配的时刻当前婚配内容为空，末了一个字符也是空自身，下一个位置重置为a前面。
处理要领：
①每次都实例化一个新对象
(/\w/g).test('ab') 如许就可以每次都是true，然则会发生内存开支，不采纳！②假如想用test本意的话，不必加g，只需检测有无就可以够了。
RegExp.prototype.exec(str)
应用正则表达式形式对字符串实行搜刮，并将更新全局RegExp对象的属性以反应婚配效果
假如没有婚配的文本则返回null，不然返回一个效果数组：
– index 声明婚配文本的第一个字符的位置
– input 寄存被检索的字符串 string
非全局挪用
挪用非全局的RegExp对象的exec()时，返回数组
第一个元素是与正则表达式相婚配的文本
第二个元素是与RegExpObject的第一个子表达式相婚配的文本（假如有的话）
第三个元素是与RegExp对象的第二个子表达式相婚配的文本（假如有的话），以此类推
var reg3 = /\d(\w)(\w)\d/;
var reg4 = /\d(\w)(\w)\d/g;
var ts = '$1az2bb3cy4dd5ee';
var ret = reg3.exec(ts);
//在非全局下 lastIndex失效
console.log(reg3.lastIndex + '\t' + ret.index + '\t' + ret.toString());
console.log(reg3.lastIndex + '\t' + ret.index + '\t' + ret.toString());
while(ret = reg4.exec(ts)){
console.log(reg4.lastIndex + '\t' + ret.index + '\t' + ret.toString());
}
//效果：
"0 1 1az2,a,z"
"0 1 1az2,a,z"
"5 1 1az2,a,z"
"11 7 3cy4,c,y"字符串对象要领
Stringl.protatype.search(reg)
search()要领用于检索字符串中指定的子字符串，或检索与正则表达式相婚配的子字符串
要领返回第一个婚配效果index，查找不到返回 -1
search()要领不实行全局婚配，它将疏忽标志g，而且老是从字符串的最先举行检索
String.prototype.match(reg)
match()要领将检索字符串，以找到一个或多个与regexp婚配的文本
regexp是不是具有标志g对效果影响很大
非全局挪用
假如regexp没有标志g，那末match()要领就只能在字符串中实行一次婚配
假如没有找到任何婚配的文本，将返回null
不然它将返回一个数组，个中寄存了与它找到的婚配文本有关的信息
返回数组的第一个元素寄存的是婚配文本，而其他的元素寄存的是与正则表达式的子表达式婚配的文本
除了通例的数组元素以外，返回的数组还含有2个对象属性
index 声明婚配文本的肇端字符在字符串的位置
input 声明对stringObject的援用
var reg3 = /\d(\w)\d/;
var reg4 = /\d(\w)\d/g;
var ts = '$1a2b3c4d5e';
var ret = ts.match(reg3);
console.log(ret);
console.log(ret.index + '\t' + reg3.lastIndex);
//效果
["1a2", "a"]
"1 0"全局挪用
假如regexp具有标志g则match()要领将实行全局检索，找到字符串中的一切婚配字符串
没有找到任何婚配的子串，则返回null
假如找到了一个或多个婚配子串，则返回一个数组
数组元素中寄存的是字符串中一切的婚配子串，而且也没有index属性或input属性
ret = ts.match(reg4);
console.log(ret);
console.log(ret.index + '\t' + reg3.lastIndex);
//效果
["1a2", "3c4"]
"undefined 0"String.prototype.split(reg)
我们常常应用split要领把字符串支解为字符数组'a,b,c,d'.split(','); //["a","b","c","d"]
在一些庞杂的支解情况下我们能够应用正则表达式处理'a1b2c3d'.split(/\d/); //["a","b","c","d"]
String.prototype.replace
String.prototype.replace(str,replaceStr)
String.prototype.replace(reg,replaceStr)
String.prototype.replace(reg,function)
function参数寄义
function会在每次婚配替代的时刻挪用，有四个参数
①婚配字符串
②正则表达式分组内容，没有分组则没有该参数
③婚配项在字符串中的index
④原字符串
'a1b2c3d4e5'.replace(/\d/g, function(match,index,origin){
console.log(index);
return parseInt(match) + 1;
});
//效果
1
3
5
7
9
"a2b3c4d5e6"
'a1b2c3d4e5'.replace(/(\d)(\w)(\d)/g, function(match,group1,group2,group3,index,origin){
console.log(match);
return group1 + group3;
});
//效果
"1b2"
"3d4"
"a12c34e5"愿望能对你有所协助，更好的应用正则来处理问题！
附：
1.正则表达式检测网站：(https://regexper.com/)
2.JSBin：(http://jsbin.com/?js,console)
博客地址：(http://fehey.com/2016/08/12/r… )
迎接前端小伙伴交换~
