正则表达式详解

之前对于正则表达式总是迷迷糊糊的，今天一文总结完正则表达式。

一、表示方式

在js中书写正则表达式存在两种形式，一种是使用RegExp对象，另一种是使用两个斜
杠表示。
var reg1 = /abc/
var reg2 = new RegExp("abc", "i")
但是两者相比第一种的效率更高，所以第一种斜杠的使用频率比较高。

二、RegExp对象上的属性方法
2.1、属性

RegExp.prototype.ignoreCase:返回布尔值，表示正则表达式是否忽略大小写。
RegExp.prototype.global:返回布尔值，表示正则表达式是否进行全局搜索。
RegExp.prototype.multiline:返回布尔值，表示正则表达式是否进行多行匹配

var reg1 = /acb/i
console.log(reg1.ignoreCase)   //true
var reg2 = /acb/g
console.log(reg2.global)       //true
var reg3 = /acb/m
console.log(reg3.multiline)    //true
这里的i,g,m仅仅是去首字母，并且可以多个属性一起使用
var reg4 = /acb/ig
console.log(reg4.ignoreCase)  //true
console.log(reg4.global)      //true

还有两个属性比较特殊和上面所述的修饰符无关.lastIndex和source
RegExp.prototype.lastIndex:返回的是下标值，表示从什么位置开始匹配。
RegExp.prototype.source:返回正则表达式字符串。
var reg = /abc/g
console.log(reg.source)     //abc
console.log(reg.lastIndex)  //0

2.1、实例方法
RegExp.prototype.test()

RegExp.prototype.test():该方法用来判断字符串中是否存在可以匹配该正则表
达式的子串，如果存在则返回true,不存在则返回false。

var str = "acbsa"
var reg = /a/
console.log(reg.lastIndex)   //0
console.log(reg.test(str))   //true
console.log(reg.lastIndex)   //0
console.log(reg.test(str))   //true
上面如果没有在正则表达式中加上g，则表示判断是否存在即可。
如果加上g，则表示进行全局匹配。
var str = "acbsa"
var reg = /a/g
console.log(reg.lastIndex)   //0
console.log(reg.test(str))   //true
console.log(reg.lastIndex)   //1
console.log(reg.test(str))   //true
当进行全局匹配的时候，lastIndex每一次都会移动到当前匹配字符的下一位。

lastIndex可以改写，然后再进行执行test方法
var str = "acsaac"
var reg = /a/g
reg.lastIndex = 3 
console.log(reg.test(str))    //true
console.log(reg.lastIndex)    //4

空的正则表达式可以匹配任何字符。
var reg = new RegExp("")
console.log(reg.test("acns"))  //true

（1）
var count = 0
while(/a/.test("abcbaacba")) {
  count++
  console.log(count)
}
console.log(count)
上面的while循环是一个无限循环，原因是当每一次循环的时候/a/都是一个新的正则表达式，此时/a/.test("abaca")会一直存在并且为第一个a。

（2）
var count = 0
var reg = /a/
while(reg.test("abcbaacba")) {
  count++
  console.log(count)
}
此时任然是一个无限循环，因为每一次只是匹配第一个。

（3）
var count = 0
var reg = /a/g
while(reg.test("abcbaacba")) {
  count++
  console.log(count)
}
此时进行全局匹配，才能跳出while循环。

RegExp.prototype.exec()

RegExp.prototype.exec()返回的是一个包含匹配字符串的数组。
var str = "acasac"
var reg = /a./
console.log(reg.exec(str))
console.log(reg.exec(str))
console.log(reg.exec(str))
//结果
//[ 'ac', index: 0, input: 'acasac', groups: undefined ]
//[ 'ac', index: 0, input: 'acasac', groups: undefined ]
//[ 'ac', index: 0, input: 'acasac', groups: undefined ]
可以看出exec()方法执行位置总是不变的，也就是不能进行全局匹配。
此时设置全局可以匹配
var str = "acasac"
var reg = /a./g
console.log(reg.exec(str))
console.log(reg.exec(str))
console.log(reg.exec(str))
//结果
//[ 'ac', index: 0, input: 'acasac', groups: undefined ]
//[ 'as', index: 2, input: 'acasac', groups: undefined ]
//[ 'ac', index: 4, input: 'acasac', groups: undefined ]

利用全局匹配的特点，此时我们可以使用while循环来匹配全部的内容。
var str = "acasac"
var reg = /a./g
while(true) {
  var match = reg.exec(str)
  if(!match) {
    break
  } 
  console.log(match.index + "::" + match[0])
}
//结果
//0::ac
//2::as
//4::ac

如果exec在匹配中存在()，则如何返回值。
var str = "acccasac"
var reg = /a(c+)/g
console.log(reg.exec(str))
console.log(reg.exec(str))
//[ 'accc', 'ccc', index: 0, input: 'acccasac', groups: undefined ]
//[ 'ac', 'c', index: 6, input: 'acccasac', groups: undefined ]
可以看出每一个数组中第一个值为匹配到的字符串，第二个值为括号中匹配到的字符串。

三、字符串的方法
String.prototype.match()

字符串match方法用来对字符串进行匹配，返回一个数值。
var str = "acacxacd"
var reg = /ac/
console.log(str.match(reg))
//结果
//[ 'ac', index: 0, input: 'acacxacd', groups: undefined ]
//此时我们会发现match方法和exec方法差不多。

var str = "acacxacd"
var reg = /ac/g
console.log(str.match(reg)) //[ 'ac', 'ac', 'ac' ]
如果使用g来进行匹配，则返回的是一个数组，这时match和exec就不一样了。

在match函数中，对于正则表达式中的lastIndex属性是没有效果的，其值永远是0.

String.prototype.search()方法

字符串的search方法是用来查看是否存在可以匹配的字符串的，如果存在则返回第一
个匹配的下标，如果不匹配则返回-1。

var str = "ssacacxacd"
var reg = /a./
console.log(str.search(reg))   //2

String.prototype.replace()

字符串replace方法接收两个参数，第一个参数是匹配的字符，第二个参数是替换的字符。
其中第一个参数可以是字符串也可以是正则表达式。
（1）正则表达式
var str = "aaaa"
var reg = /a/
console.log(str.replace(reg, "b"))   //baaa
（2）字符串
var str = "aaaa"
var reg = "a"
console.log(str.replace(reg, "b"))   //baaa
（3）全局匹配
var str = "aaaa"
var reg = /a/g
console.log(str.replace(reg, "b"))   //bbbb

这是一个使用replace 和 g来解决前后空格问题。
var str = '  #id div.class  ';
console.log(str)
console.log(str.replace(/^\s+|\s$/, ""))
//   #id div.class  
// #id div.class

replace第二个参数可以使用$来表示。
$&:匹配子字符串。
$`:匹配结果前面的字符串
$':匹配结果后面的字符串
$n:匹配第n组内容，n从1开始
$$:匹配美式$符

$&使用：
var str = "acacabcddd"
console.log(str.replace("bc", '$&'+"ssss")) //acacabcssssddd

$`使用:
var str = "asssscacabcd"
console.log(str.replace("bc", '$`'))  //asssscacaasssscacad

$'使用：
var str = "acacabcddd"
console.log(str.replace("bc","$'"))   //acacadddddd

$n使用：
var reg = /(\w+)\s+(\w+)/
var str = "world hello"
console.log(str.replace(reg,'$2 $1')) //Hello world

$$的使用：
var reg = /\s/
var str = "world hello"
console.log(str.replace(reg,'$$')) //world$hello

replace的第二个参数也可以是一个函数，将函数的返回值，返回并填充在原来的位置。
(1)
var str = "3 and 5 equel 8"
let newStr = str.replace(/[0-9]+/g, function(value) {
  return value * 2
})
console.log(newStr)//6 and 10 equel 16

(2)
var str = "How do you came to school?"
var newStr = str.replace(/you|to/g, function(value) {
  return value.toUpperCase()
})
console.log(newStr)

replace函数可以不止一个参数。
var prices = {
  'p1': '$1.99',
  'p2': '$9.99',
  'p3': '$5.00'
};

var template = '<span id="p1"></span>' +
  '<span id="p2"></span>' +
  '<span id="p3"></span>';

var newStr = template.replace(/(<span id=")(.*?)(">)(<\/span>)/g, function (match, $1, $2, $3, $4) {
  return $1 + $2 + $3 + prices[$2] + $4
})
console.log(newStr)  //<span id="p1">$1.99</span><span id="p2">$9.99</span><span id="p3">$5.00</span>

String.prototype.split()

字符串split函数将字符串按照指定的字符串或者正则表达式进行切割，第二个参数是返回数组的长度。

1、正则分割
var str = 'a,  b,c, d'
console.log(str.split(","))  //[ 'a', '  b', 'c', ' d' ]

2、正则分割
var str = 'a,  b,c, d'
console.log(str.split(/,\s*/))  //[ 'a', 'b', 'c', 'd' ]

3、第二个参数
var str = 'a,  b,c, d'
console.log(str.split(/,\s*/, 2))  //[ 'a', 'b']

4、*表示匹配0个或者多个。
console.log('aaa*a*'.split(/a*/))  //["","*","*"]

5、
console.log('aaa**a*'.split(/a*/))  //["","*","*","*"]

6、如果正则表达式中存在小括号，则表示匹配的字符串也进行返回。
console.log('aaa**a*'.split(/(a*)/))  //["","aaa","*","","*","a","*"]

四、匹配规则
4.1、字面量字符

字面量字符就是字面含义，比如说/a/匹配a,/ac/匹配ac.
例如：
/cat/.test("dog and cat")   //true

4.2、点字符

点字符（.）匹配除回车,换行，行分隔符，段分隔符以外的其他字符。注意对于码点大于0xFFFF的unicode字符，点字符不能正确匹配，会认为是两个字符。
例如：
/c.t/可以匹配c-t,cat,...，但是不能匹配coot

4.3、位置字符

位置字符主要有两个，一个是^另一个是$,其中^表示以什么字符开始吗，$表示以什
么字符结束。
(1)
var str = "body1345"
console.log(/^body/.test(str))  //true

(2)
var str = "body1345"
console.log(/5$/.test(str))  //true

(3)
var str = "body and dog"
console.log(/^body.*?dog$/.test(str))  //true

4.4、选择符 ( | )

| 在正则表达式中表示选择的关系（或者）
（1）
var str = "bodyand"
var reg = /body|dog/
console.log(reg.test(str))  //true
这里的表示body或者dog，并不是y或者d

4.5、转义字符( / )

如果需要在正则表达式中表示元字符，需要使用/来进行转义。
例如：
var str = "2+23=123"
console.log(/\+/.test(str))  //true
这里因为+为元字符，如果需要匹配加号字符串的话，必须使用\+来进行匹配。

需要转义的字符一共有十二个：
^,.,[,$,(,),|,*,+,?,{,\\
上面代码中，如果在RegExp构造函数中，需要进行两次转义。
例如：
var reg = /\+/
var reg2 = new RegExp("\\+")
var str = "12+123"
console.log(reg.test(str))  //true
console.log(reg2.test(str)) //true

4.6、特殊字符

正则表达式对一些不能打印的特殊字符，提供了表达方法。
1、\cX 表示Ctrl-[X]，其中的X是A-Z之中任一个英文字母，用来匹配控制字符。
2、[\b] 匹配退格键(U+0008)，不要与\b混淆
3、\n匹配换行键
4、\r匹配回车键
5、\t 匹配制表符 tab（U+0009）
6、\v 匹配垂直制表符（U+000B）。
7、\f 匹配换页符（U+000C）。
8、\0 匹配null字符（U+0000）。
9、\xhh 匹配一个以两位十六进制数（\x00-\xFF）表示的字符。
10、\uhhhh 匹配一个以四位十六进制数（\u0000-\uFFFF）表示的 Unicode 字符。