正则表达式（正则表达式括号的作用）

正则表达式之前学习的时候，因为很久没怎么用，或者用的时候直接找网上现成的，所以都基本忘的差不多了。所以这篇文章即是笔记，也让自己再重新学习一遍正则表达式。
其实平时在操作一些字符串的时候，用正则的机会还是挺多的，之前没怎么重视正则，这是一个错误。写完这篇文章后，发觉工作中很多地方都可以用到正则，而且用起来其实还是挺爽的。

正则表达式作用

正则表达式，又称规则表达式，它可以通过一些设定的规则来匹配一些字符串，是一个强大的字符串匹配工具。

正则表达式方法

基本语法，正则声明

js中，正则的声明有两种方式

直接量语法：

1

var reg = /d+/g/
创建RegExp对象的语法

1

var reg = new RegExp("\\d+", "g");

这两种声明方式其实还是有区别的，平时的话我比较喜欢第一种，方便一点，如果需要给正则表达式传递参数的话，那么只能用第二种创建RegExp的形式
格式：var pattern = new RegExp('regexp','modifier');
regexp：匹配的模式，也就是上文指的正则规则。
modifier: 正则实例的修饰符,可选值有：
i : 表示区分大小写字母匹配。
m ：表示多行匹配。
g : 表示全局匹配。

传参的形式如下：
我们用构造函数来生成正则表达式

1	var re = new RegExp("^\\d+$","gim");

这里需要注意，反斜杠需要转义，所以，直接声明量中的语法为\d，这里需要为 \\d
那么，给它加变量，就和我们前面写的给字符串加变量一样了。

1 2	var v = "bl"; var re =new RegExp("^\\d+" + v + "$","gim"); // re为/^\d+bl$/gim

支持正则的STRING对象方法

search 方法
作用：该方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的字符串
基本语法： stringObject.search(regexp);
返回值：该字符串中第一个与regexp对象相匹配的子串的起始位置。如果没有找到任何匹配的子串，则返回-1；
注意点： search()方法不执行全局匹配，它将忽略标志g，

var str = "hello world,hello world";
// 返回匹配到的第一个位置(使用的regexp对象检索)
console.log(str.search(/hello/)); // 0
// 没有全局的概念 总是返回匹配到的第一个位置
console.log(str.search(/hello/g)); //0
 
console.log(str.search(/world/)); // 6
 
// 如果没有检索到的话，则返回-1
console.log(str.search(/longen/)); // -1
 
// 我们检索的时候 可以忽略大小写来检索
var str2 = "Hello";
console.log(str2.search(/hello/i)); // 0

match()方法
作用：该方法用于在字符串内检索指定的值，或找到一个或者多个正则表达式的匹配。类似于indexOf()或者lastIndexOf();
基本语法： stringObject.match(searchValue) 或者stringObject.match(regexp)
返回值：
存放匹配成功的数组; 它可以全局匹配模式，全局匹配的话，它返回的是一个数组。如果没有找到任何的一个匹配，那么它将返回的是null；
返回的数组内有三个元素，第一个元素的存放的是匹配的文本，还有二个对象属性
index属性表明的是匹配文本的起始字符在stringObject中的位置，input属性声明的是对stringObject对象的引用

var str = "hello world";
console.log(str.match("hello")); // ["hello", index: 0, input: "hello world"]
console.log(str.match("Helloy")); // null
console.log(str.match(/hello/)); // ["hello", index: 0, input: "hello world"]
// 全局匹配
var str2="1 plus 2 equal 3"
console.log(str2.match(/\d+/g)); //["1", "2", "3"]

replace()方法
作用：该方法用于在字符串中使用一些字符替换另一些字符，或者替换一个与正则表达式匹配的子字符串；
基本用法： stringObject.replace(regexp/substr,replacement);
返回值：返回替换后的新字符串
注意：字符串的stringObject的replace()方法执行的是查找和替换操作，替换的模式有2种，既可以是字符串，也可以是正则匹配模式，如果是正则匹配模式的话，那么它可以加修饰符g,代表全局替换，否则的话，它只替换第一个匹配的字符串；

replacement 既可以是字符串，也可以是函数，如果它是字符串的话，那么匹配的将与字符串替换，replacement中的$有具体的含义，如下：
$1,$2,$3….$99 含义是：与regexp中的第1到第99个子表达式相匹配的文本。可以看下面的例子
$& 的含义是：与RegExp相匹配的子字符串。
lastMatch或RegExp[“$_”]的含义是：返回任何正则表达式搜索过程中的最后匹配的字符。
lastParen或 RegExp[“$+”]的含义是：返回任何正则表达式查找过程中最后括号的子匹配。
leftContext或RegExp[“$`”]的含义是：返回被查找的字符串从字符串开始的位置到最后匹配之前的位置之间的字符。
rightContext或RegExp[“$’”]的含义是：返回被搜索的字符串中从最后一个匹配位置开始到字符串结尾之间的字符。

var str = "hello world";
// 替换字符串
var s1 = str.replace("hello","a");
console.log(s1);// a world
// 使用正则替换字符串
var s2 = str.replace(/hello/,"b");
console.log(s2); // b world
 
// 使用正则全局替换 字符串
var s3 = str.replace(/l/g,'');
console.log(s3); // heo word
 
// $1,$2 代表的是第一个和第二个子表达式相匹配的文本
// 子表达式需要使用小括号括起来,代表的含义是分组
var name = "longen,yunxi";
var s4 = name.replace(/(\w+)\s*,\s*(\w+)/,"$2 $1");
console.log(s4); // "yunxi,longen"
 
var str = '123-mm';
var strReg = str.replace(/(\d+)-([A-Za-z]+)/g,'$2');
console.log(strReg)//mm  上面那段$2这个就是表示正则第二组个匹配到的内容,也就是说$1,$2.. 表示的是第几个括号匹配到的内容
 
// $& 是与RegExp相匹配的子字符串
var name = "hello I am a chinese people";
var regexp = /am/g;
if(regexp.test(name)) {
  //返回正则表达式匹配项的字符串
  console.log(RegExp['$&']);  // am
 
  //返回被搜索的字符串中从最后一个匹配位置开始到字符串结尾之间的字符。
  console.log(RegExp["$'"]); // a chinese people
 
  //返回被查找的字符串从字符串开始的位置到最后匹配之前的位置之间的字符。
  console.log(RegExp['$`']);  // hello I
 
  // 返回任何正则表达式查找过程中最后括号的子匹配。
  console.log(RegExp['$+']); // 空字符串
 
  //返回任何正则表达式搜索过程中的最后匹配的字符。
  console.log(RegExp['$_']);  // hello I am a chinese people
}
 
// replace 第二个参数也可以是一个function 函数
var name2 = "123sdasadsr44565dffghg987gff33234";
name2.replace(/\d+/g,function(v){
  console.log(v);
   // 第一次打印123
   // 第二次打印44565
   // 第三次打印987
   // 第四次打印 33234
});

REGEXP对象方法

test()方法
作用：该方法用于检测一个字符串是否匹配某个模式；
基本语法： RegExpObject.test(str);
返回：返回true，否则返回false；

var str = "longen and yunxi";
console.log(/longen/.test(str)); // true
console.log(/longlong/.test(str)); //false
 
// 或者创建RegExp对象模式
var regexp = new RegExp("longen");
console.log(regexp.test(str)); // true

exec()方法
作用：该方法用于检索字符串中的正则表达式的匹配
基本语法： RegExpObject.exec(string)
返回值：返回一个数组，存放匹配的结果，如果未找到匹配，则返回值为null；
注意点：该返回的数组的第一个元素是与正则表达式相匹配的文本
该方法还返回2个属性，index属性声明的是匹配文本的第一个字符的位置；input属性则存放的是被检索的字符串string；该方法如果不是全局的话，返回的数组与match()方法返回的数组是相同的。

var str = "longen and yunxi";
console.log(/longen/.exec(str));
// 打印 ["longen", index: 0, input: "longen and yunxi"]
 
// 假如没有找到的话，则返回null
console.log(/wo/.exec(str)); // null

正则表达式类型

元字符

用于构建正则表达式的符号，常用的有

符号	描述
.	查找任意的单个字符，除换行符外
\w	任意一个字母或数字或下划线，A_Za_Z09,中任意一个
\W	查找非单词的字符，等价于[^A_Za_z09
\d	匹配一个数字字符，等价于[0-9]
\D	匹配一个非数字字符，等价于[^0-9]
\s	匹配任何空白字符，包括空格，制表符，换行符等等。等价于[\f\n\r\t\v]
\S	匹配任何非空白字符，等价于[^\f\n\r\t\v]
\b	匹配一个单词边界，也就是指单词和空格间的位置，比如’er\b’可以匹配”never”中的”er”,但是不能匹配”verb”中的”er”
\B	匹配非单词边界,’er\B’能匹配’verb’中的’er’,但不能匹配’never’中的’er’
\0	匹配非单词边界,’er\查找NUL字符。
\n	匹配一个换行符
\f	匹配一个换页符
\r	匹配一个回车符
\t	匹配一个制表符
\v	匹配一个垂直制表符
\xxx	查找一个以八进制数xxx规定的字符
\xdd	查找以16进制数dd规定的字符
\uxxxx	查找以16进制数的xxxx规定的Unicode字符。

其实常用的几个可以简单记为下面的几个意思:
\s : 空格
\S : 非空格
\d : 数字
\D : 非数字
\w : 字符 ( 字母，数字，下划线_ )
\W : 非字符例子：是否有不是数字的字符

量词

用于限定子模式出现在正则表达式的次数。

符号	描述
+	匹配一次或多次，相当于{1,}
*	匹配零次或多次，相当于{0,}
?	匹配零次或一次，相当于{0,1}
{n}	匹配n次
{n,m}	匹配至少n个，最多m个某某的字符串
{n,}	匹配至少n个某字符串

位置符号

符号	描述
$	结束符号，例子：n$，匹配以n结尾的字符串
^	起始符号,例如^n,匹配以n开头的字符串
?=	肯定正向环视,例：?=n,匹配其后紧接指定的n字符串
?!	否定正向环视,例如：?!n,匹配其后没有紧接指定的n字符串
?:	表示不匹配

注意点：
刚开始学习正则的时候，是比较容易混淆 ^ : 放在正则的最开始位置，就代表起始的意思,放在中括号里，表示排除的意思。也就是说，/[^a]/和/^[a]/是不一样的，前者是排除的意思，后者是代表首位
$:正则的最后位置,就代表结束的意思.

分组

符号	描述
竖线	选择(不是他就是她)
(…)	分组

字符类

符号	描述
[0-9]	匹配 0 到 9 间的字符
[a-zA-Z]	匹配任意字母
[^0-9]	不等于0到9的其它字符

()分组符号可以理解为，数学运算中的括号，用于计算的分组使用。[]可以理解为，只要满足括号里面其中的某种条件即可。比如[abc],意思是满足abc中的某一个，这样比较好记。

贪婪模式和非贪婪模式

其实可以简单的理解，贪婪模式就是尽可能多的匹配，非贪婪模式就是尽可能少的匹配.
贪婪模式量词： {x,y} , {x,} , ? , * , 和 +
非贪婪模式量词： {x,y}?，{x,}?，??，*?，和 +?,所以非贪婪模式就是在贪婪模式后面加了一个问号

我们用代码来理解一下贪婪模式和非贪婪模式的区别

var str = "<p>这是第一段文本</p>text1<p>这是第二段文本</p>text2<p>xxx</p>text2again<p>end</p>";
// 非贪婪模式1
console.log(str.match(/<p>.*?<\/p>text2/)[0]); // <p>这是第一段文本</p>text1<p>这是第二段文本</p>text2
 
// 贪婪模式
console.log(str.match(/<p>.*<\/p>text2/)[0]); // <p>这是第一段文本</p>text1<p>这是第二段文本</p>text2<p>xxx</p>text2

从上面的代码中，我们可以看到，非贪婪模式，当它匹配到它需要的第一个满足条件之后，他就会停止了。而贪婪模式则会继续向右边进行匹配下去。
注意点：?号在一些量词后面才是指非贪婪模式，如果直接在一些字符串的后面，表示的是匹配0次或1次。如下所示

1
2
3

var str = 'abced';
console.log(str.match(/ce?/g)); // ["ce"]
console.log(reg.match(/cf?/g)); // ["c"]

零宽正向断言和负向断言

(?=)零宽正向断言: 括号内表示某个位置右边必须和=右边匹配上

(?!)负向断言: 括号内表示某个位置右边不和!后的字符匹配。
概念很抽象，直接看代码：

var pattern=/str(?=ings)ing/;
// 表示匹配 r 后面必须有ings的 string字符
console.log("strings.a".match(pattern)); //["string", index: 0, input: "strings.a"]
 
// 同理，匹配string后面必须有s的 string 字符串
console.log("strings.a".match(/string(?=s)/)); //["string", index: 0, input: "strings.a"]
console.log("string_x".match(pattern)); // null
console.log("string_x".match(/string(?=s)/)); // null

如果理解了(?=),那么(?!)就很好理解了

1
2
3

var pattern=/string(?!s)/; // 匹配string后面不带s的string字符串
console.log("strings".match(pattern)); //null
console.log("string.".match(pattern)); //["string", index: 0, input: "string."]

正则表达式实战练习

上面讲的基本都是理论，下面我们来实战一番，以此来巩固我们正则表达式的学习，学习的过程以demo的形式，对我们的知识点进行巩固。
下面的实例是参考这篇文章，有兴趣可以看原文,不过我整理了一下，个人觉得，把下面的例子都实践一遍，那么就基本掌握正则的使用了，满足平时的工作基本够了。

demo1:
要求：匹配结尾的数字，例如：取出字符串最后一组数字，如：30CACDVB0040 取出40
分析：匹配数组字符为\d,匹配1次或多次为 +，以什么结尾为 $,全局匹配为 g
结果：

1	console.log('30CACDVB0040'.match(/\d+$/g)); // ["0040"]

如果我们只想要最后结尾的最后两个数字，则可以使用量词 {n,m},所以结果为：

1	console.log('30CACDVB0040'.match(/\d{1,2}$/g)); // ["40"]

demo2:
要求:统一空格个数,例如：字符串内字符键有空格，但是空格的数量可能不一致，通过正则将空格的个数统一变为一个。
分析：匹配空格的字符为 \s
结果：

1 2	var str ='学习正则'; console.log(str.replace(/\s+/g,' ')); // 学习正则

demo3:
要求：判断字符串是不是由数字组成
分析：我们可以这样匹配，以数字 \d 开头^,以数字结尾 $,匹配零次或多次 *
结果：

1
2
3

var str ='学 习  正    则';
console.log(/^\d*$/g.test('123789'));  // true
console.log(/^\d*$/g.test('12378b9')); // false

demo4:
要求：验证是否为手机号
分析：现在手机开头的范围比较多，第一位是【1】开头，第二位则则有【3,4,5,7,8】，第三位则是【0-9】并且匹配9个数字。
结果：

1
2
3

var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
console.log(reg.test(15984591578)); //true
console.log(reg.test(11984591578)); //false

demo5:
要求：删除字符串两端的空格
分析：跟demo2类似，匹配空格 ^\s开头，空格结尾 \s$
结果：

1 2	var str = ' 学习正则 '; console.log(str.replace(/^\s+\|\s+$/,'')); // 学习正则

demo6:
要求：只能输入数字和小数点
分析：开头需要匹配为数字，结尾也应为数字，然后再加个点,点必须转义，匹配0次或一次
结果：

1
2
3

var reg =/^\d*\.?\d{0,2}$/;
console.log(reg.test('125.1')); // true
console.log(reg.test('125a')); // false

demo7:
要求：只能输入小写的英文字母和小数点，和冒号，正反斜杠(：./)
分析：这几个要求组成一个分组，把他们放在一个分组里,点，正反斜杠，冒号需要转义
结果：

1 2	var reg = /[a-z\.\/\\:]+/; console.log('79abncdc.ab123'.match(reg)); // ["abncdc.ab", index: 2, input: "79abncdc.ab123"]

demo8:
要求：去掉所有的html标签
分析：html标签的形式为

,所以我们可以匹配<开始，然后一些内容，再加上结束符 >
结果：

1
2
3

var reg = /<[^>]+>/gi;
var str = '<ul><li>hello world</li></ul>';
console.log(str.replace(reg,'')); // hello world

demo9:
要求：绝对路径变相对路径
分析：比如: <img src="http://m.163.com/images/163.gif" /> 替换成 <img src="/images/163.gif" />.
我们要替换http:// 和后面的域名，第一个 / 为止，
结果：

1
2
3

var reg = /http:\/\/[^\/]+/g;
var str = 'http://m.163.com/images/163.gif';
console.log(str.replace(reg,'')); // /images/163.gif

demo10:
要求：用于用户名注册，户名只能用中文、英文、数字、下划线、4-16个字符。
分析：匹配中文的正则为 /[\u4E00-\u9FA5\uf900-\ufa2d]/,英文，数字的元字符为 \w,量词 {4,16}
结果：

var reg = /^/[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/;
var str1 = 'hellow_1230';
var str2 = 'hellow_1230*';
var str3 = 'hellow_12304549764654657456465756';
console.log(reg.test(str1)); // true
console.log(reg.test(str2)); //false
console.log(reg.test(str3)); // false

demo11 :
要求：匹配身份证号
分析：身份证为15为或者18位，最后一位为数字或者x
结果：

1
2
3

var reg = /^(\d{14}|\d{17})(\d|[xX])$/;
var str = '44162119920547892X';
console.log(reg.test(str));  // true

demo12:
要求：验证邮箱
分析：邮箱的形式可能为 234564@qq.com; fasdfja@163.com，可以看到，前面为字母或者数字，然后加@,@后面可能是数字或者是其他，然后再加 . 再然后是一些com或者其他字符，我们用()来进行分组；
结果：

var reg = /^([\w_-])+@([\w_-])+([\.\w_-])+/;
var str1 = 'test@hotmail.com';
var str2 = 'test@sima.vip.com';
var str3 = 'te-st@qq.com.cn';  
var str4 = 'te_st@sima.vip.com';
var str5 = 'te.._st@sima.vip.com';
console.log(reg.test(str1)); // true
console.log(reg.test(str2)); // true
console.log(reg.test(str3)); // true
console.log(reg.test(str4)); // true
console.log(reg.test(str5)); // false

demo13:
要求：匹配源代码中的链接
分析：a标签中有href，也可能有class ,id等其他属性，而且不确定a标签后面是否有空格，所以要考虑的东西比较多。
结果：

1
2
3

var reg = /<a\s(\s*\w*?\s*=\s*".+?")*(\s*href\s*=\s*".+?")(\s*\w*?\s*=\s*".+?")*\s*>[\s\S]*?<\/a>/g;
var str = '<p>测试链接：<a id = "test" href="http://bbs.blueidea.com" title="无敌">经典论坛</a></p>';
console.log(str.match(reg));  // ["<a id = "test" href="http://bbs.blueidea.com" title="无敌">经典论坛</a>"]

demo14:
要求：匹配a标签里面的内容
分析：上面的demo中，我们匹配到了a标签，这里的话我们匹配a标签里面的内容，这里要学习一个符号?:表示不匹配，所以我们在前面的括号中加上?:去掉a标签的匹配，然后再a标签内容里加个括号，表示分组。
结果：

1
2
3

var reg =/<a\s(?:\s*\w*?\s*=\s*".+?")*(?:\s*href\s*=\s*".+?")(?:\s*\w*?\s*=\s*".+?")*\s*>([\s\S]*?)<\/a>/;;
var str = '<a id = "test" href="http://bbs.blueidea.com" title="无敌">经典论坛</a>';
console.log(str.replace(reg,'$1'));  // 经典论坛    $1 表示的是括号里面的分组，由于前面的括号都是不获取，所以获取的第一个括号的内容就是a标签里面的内容

demo15：
要求：获取url的指定参数的值
分析： url带参数类似为这样：http://www.baicu.com?type=1&value=789; 所以，要获取的参数要么是在?或者&开头，到下一个&或者直接后面什么都不跟为止。这里我们用new RegExp的形式，因为这样可以传参。
结果：

// 获取url中的value值
var url = 'http://www.baicu.com?type=1&value=789';
var reg = new RegExp("(^|&|\\?)value=([^&]*)(&|$)");
console.log(url.match(reg)); //["&value=789", "&", "789", "", index: 27, input: "http://www.baicu.com?type=1&value=789"]
}

稍微改编一下，我们就可以弄一个获取指定参数值的函数了

function getUrlParam(name) {
  var reg = new RegExp("(^|&|\\?)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return decodeURIComponent(r[2]);
  return null;
}

demo16:
要求：将数字 15476465转变为15,476,465
分析：我们可以这样，匹配一个数字，然后它的后面紧跟着三个数字，并且结尾也是要有三个数字，比如 12345689我们找到 12 345 689,符合条件的是数字2和5，因为它后面紧跟着三个数字，并且这样结尾也是三个数字。然后我们在2和5的后面加个,,就达到了我们的目的12,345,689;
知识补充：这里我们需要介绍正则的一个知识点，断言?=,它只匹配一个位置。假如匹配一个“人”字，但是你只想匹配中国人的人字，不想匹配法国人的人(?=中国)人;
结果：

1
2
3

var str = '15476465';
var reg =/(\d)(?=(\d{3})+$)/g;
console.log(str.replace(reg,'$1,')); //15,476,465

进一步讲解：/(\d)(?=(\d{3})+$)/匹配的是一个数字，即(\d),
它后面的字符串必须是三的倍数，这个表达就是(?=(\d{3})+$),且最后一次匹配以 3 个数字结尾
$1,表示在第一个分组表达式匹配的字符后面加,，这里其实只有一个(\d)，问号后面的可以看成它的定语。/(\d)(?=(\d{3})+$)/g
这个表达式通俗来说是：要找到所有的单个字符，这些字符的后面跟随的字符的个数必须是3的倍数，并在符合条件的单个字符后面添加,

demo17：
要求：将阿拉伯数字替换为中文大写形式
分析：我们可以用replace来弄这个，replace中的function可以获取到匹配的每一个内容，比如返回匹配数字188，那么就会依次返回1,8,8
结果：

var reg = /\d/g;
var arr=new Array("零","壹","贰","叁","肆","伍","陆","柒","捌","玖");
var str = '189454';
console.log(str.replace(reg,function(m) {
  return arr[m];  //壹捌玖肆伍肆
}));

1. 分组和分支结构

这二者是括号最直觉的作用。

1.1 分组

我们知道/a+/匹配连续出现的“a”，而要匹配连续出现的“ab”时，需要使用/(ab)+/。

其中括号是提供分组功能，使量词“+”作用于“ab”这个整体，测试如下：

var regex = /(ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) ); // ["abab", "ab", "ababab"]

1.2 分支结构

而在多选分支结构(p1|p2)中，此处括号的作用也是不言而喻的，提供了子表达式的所有可能。

比如，要匹配如下的字符串：

I love JavaScript

I love Regular Expression

可以使用正则：

var regex = /^I love (JavaScript|Regular Expression)$/;
console.log( regex.test("I love JavaScript") ); // true
console.log( regex.test("I love Regular Expression") ); // true

如果去掉正则中的括号，即/^I love JavaScript|Regular Expression$/，匹配字符串是"I love JavaScript"和"Regular Expression"，当然这不是我们想要的。

2. 分组引用

这是括号一个重要的作用，有了它，我们就可以进行数据提取，以及更强大的替换操作。

而要使用它带来的好处，必须配合使用实现环境的API。

以日期为例。假设格式是yyyy-mm-dd的，我们可以先写一个简单的正则：

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

然后再修改成括号版的：

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

为什么要使用这个正则呢？

2.1 提取数据

比如提取出年、月、日，可以这么做：

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"]

match返回的一个数组，第一个元素是整体匹配结果，然后是各个分组（括号里）匹配的内容，然后是匹配下标，最后是输入的文本。（注意：如果正则是否有修饰符g，match返回的数组格式是不一样的）。

另外也可以使用正则对象的exec方法：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log( regex.exec(string) ); 
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

同时，也可以使用构造函数的全局属性$1至$9来获取：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";

regex.test(string); // 正则操作即可，例如
//regex.exec(string);
//string.match(regex);

console.log(RegExp.$1); // "2017"
console.log(RegExp.$2); // "06"
console.log(RegExp.$3); // "12"

2.2 替换

比如，想把yyyy-mm-dd格式，替换成mm/dd/yyyy怎么做？

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); // "06/12/2017"

其中replace中的，第二个参数里用$1、$2、$3指代相应的分组。等价于如下的形式：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, function() {
	return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1;
});
console.log(result); // "06/12/2017"

也等价于：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, function(match, year, month, day) {
	return month + "/" + day + "/" + year;
});
console.log(result); // "06/12/2017"

3. 反向引用

除了使用相应API引用分组，也可以在正则里引用分组。但只能引用之前出现的分组，即反向引用。

还是以日期为例。

比如要写一个正则支持匹配如下三种格式：

2016-06-12

2016/06/12

2016.06.12

最先可能想到的正则是:

var regex = /\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // true

其中/和.需要转义。虽然匹配了要求的情况，但也匹配"2016-06/12"这样的数据。

假设我们想要求分割符前后一致怎么办？此时需要使用反向引用：

var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // false

注意里面的\1，表示的引用之前的那个分组(-|\/|\.)。不管它匹配到什么（比如-），\1都匹配那个同样的具体某个字符。

我们知道了\1的含义后，那么\2和\3的概念也就理解了，即分别指代第二个和第三个分组。

看到这里，此时，恐怕你会有两个问题。

括号嵌套怎么办？

以左括号（开括号）为准。比如：

var regex = /^((\d)(\d(\d)))\1\2\3\4$/;
var string = "1231231233";
console.log( regex.test(string) ); // true
console.log( RegExp.$1 ); // 123
console.log( RegExp.$2 ); // 1
console.log( RegExp.$3 ); // 23
console.log( RegExp.$4 ); // 3

我们可以看看这个正则匹配模式：

第一个字符是数字，比如说1，

第二个字符是数字，比如说2，

第三个字符是数字，比如说3，

接下来的是\1，是第一个分组内容，那么看第一个开括号对应的分组是什么，是123，

接下来的是\2，找到第2个开括号，对应的分组，匹配的内容是1，

接下来的是\3，找到第3个开括号，对应的分组，匹配的内容是23，

最后的是\4，找到第3个开括号，对应的分组，匹配的内容是3。

这个问题，估计仔细看一下，就该明白了。

另外一个疑问可能是，即\10是表示第10个分组，还是\1和0呢？答案是前者，虽然一个正则里出现\10比较罕见。测试如下：

var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;
var string = "123456789# ######"
console.log( regex.test(string) );

4. 非捕获分组

如果只想要分组的功能，但不会引用它，即，既不在API里引用分组，也不在正则里反向引用。此时可以使用非捕获分组(?:p)，例如本文第一个例子可以修改为：

var regex = /(?:ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) ); // ["abab", "ab", "ababab"]

5. 相关案例

至此括号的作用已经讲完了，总结一句话，就是提供了可供我们使用的分组，如何用就看我们的。

5.1 字符串trim方法模拟

trim方法是去掉字符串的开头和结尾的空白符。有两种思路去做。

第一种，匹配到开头和结尾的空白符，然后替换成空字符。如：

function trim(str) {
	return str.replace(/^\s+|\s+$/g, '');
}
console.log( trim("  foobar   ") ); // "foobar"

第二种，匹配整个字符串，然后用引用来提取出相应的数据：

function trim(str) {
	return str.replace(/^\s+(.*?)\s+$/g, "$1");
}
console.log( trim("  foobar   ") ); // "foobar"

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

当然，前者效率高。

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

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"

思路是找到每个单词的首字母，当然这里不使用非捕获匹配也是可以的。

5.3 驼峰化

function camelize(str) {
	return str.replace(/[-_\s]+(.)?/g, function(match, c) {
		return c ? c.toUpperCase() : '';
	});
}
console.log( camelize('-moz-transform') ); // MozTransform

首字母不会转化为大写的。其中分组(.)表示首字母，单词的界定，前面的字符可以是多个连字符、下划线以及空白符。正则后面的?的目的，是为了应对str尾部的字符可能不是单词字符，比如str是'-moz-transform '。

5.4 中划线化

function dasherize(str) {
	return str.replace(/([A-Z])/g, '-$1').replace(/[-_\s]+/g, '-').toLowerCase();
}
console.log( dasherize('MozTransform') ); // -moz-transform

驼峰化的逆过程。

5.5 html转义和反转义

// 将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('<div>Blah blah blah</div>') );
// => &lt;div&gt;Blah blah blah&lt;/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('&lt;div&gt;Blah blah blah&lt;/div&gt;') );
// => <div>Blah blah blah</div>

通过key获取相应的分组引用，然后作为对象的键。

5.6 匹配成对标签

要求匹配：

<title>regular expression</title>

<p>laoyao bye bye</p>

不匹配：

<title>wrong!</p>

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

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

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

var regex = /<([^>]+)>[\d\D]*<\/\1>/;
var string1 = "<title>regular expression</title>";
var string2 = "<p>laoyao bye bye</p>";
var string3 = "<title>wrong!</p>";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // false

其中开标签<[^>]+>改成<([^>]+)>，使用括号的目的是为了后面使用反向引用，而提供分组。闭标签使用了反向引用，<\/\1>。

另外[\d\D]的意思是，这个字符是数字或者不是数字，因此，也就是匹配任意字符的意思。

后记

正则中使用括号的例子那可是太多了，不一而足。

posted @ 2017-06-14 00:27 最骚的就是你阅读(23870) 评论(0) 编辑收藏举报

刷新页面返回顶部

最骚的就是你