JavaScript基础（二）正则表达式初级

JavaScript正则表达式基本使用

定义正则表达式：var reg=/java/; var reg2=new RegExp('java')

第一部分、javaScript中正则有关的几个函数

String.prototype.search

找出字符串中某个字符串首次出现的位置

'i love javaScript'.search(/love/); //2

'i love javaScript'.search(/like/);//-1

String.prototype.replace(regexp|substr,newSubStr|function)

形参：regexp为正则对象或者正则字面量，全局的时候需要g，sub为要被替换的字符串，newSubStr为用于替换的新字符串，其中可以插入一些特殊变量名，function改函数的返回值将替换掉第一个参数的匹配结果。
替换正则匹配的子字符串,返回替换后的新字符串，原先的不变

'i love javaScript'.replace(/love/,'like') //i like javaScript

使用字符串作为参数，替换字符串可以插入如下变量名

字符	替换文本
2	与正则中的第1到99个子表达式想匹配的文本
$&	与正则相匹配的字串
$`	匹配子串左侧文本
$'	匹配字串右侧文本
$$	美元符号$

replace的第二个参数可以为函数，函数的参数是匹配到的串儿

String.prototype.split(separator,limit)
- 形参：separator为字符串或者正则，limit需要的数组的长度
- 返回值：分割字符串，以数组的形式反回
- 注意：
  - 如果分隔符是包含捕获括号的正则表达式，则每次分隔符匹配时，捕获括号的结果会被拼接到数组中，并不是浏览器都支持
```
'love'.split('',3)
//['l','o','v']

'i love javascript i like node js'.split(/l[oi][vk]e/)
// ["i ", " javascript i ", " node js"]

'i love javascript i like node js'.split(/(l[oi][vk]e)/)
// ["i ", "love", " javascript i ", "like", " node js"]

''.split(';')
// ['']

''.split('')
// []

'love'.split('')
// ['l','o','v','e']
```

String.prototype.match

捕获字符串的子字符串到一个数组中，默认只匹配一个

'i love java javaScript'.match(/java/)
// ["java", index: 7, input: "i love java javaScript"]

'i love java javaScript'.match(/java/g)
//["java", "java"]

RegExp.prototype.test
- 用来测试字符串中是否含有子字符串
```
/javaScript/.test('i love javaScript') //true
```

RegExp.prototype.exec

exec方法一次只能匹配一个子字符串,即使含有g

var reg = /script/g;
var str = 'i love javascript and typescript Javascript'

reg.exec(str)
// ["script", index: 11, input: "i love javascript and typescript Javascript"]
reg.lastIndex //17

reg.exec(str)
//["script", index: 26, input: "i love javascript and typescript Javascript"]
reg.lastIndex //32

reg.exec(str)
// ["script", index: 37, input: "i love javascript and typescript Javascript"]
reg.lastIndex //43

reg.exec(str)
// null
reg.lastIndex // 0

reg.exec(str)
// ["script", index: 11, input: "i love javascript and typescript Javascript"]

reg.lastIndex //17

第二部分、正则表达式基础

更多详细教程请参考：菜鸟教程链接

元字符

字符	匹配规则
\d	匹配数字，大写取反
.	除换行符以外的任意字符
\w	匹配字母数字下划线，大写取反
\s	匹配空白符号，大写取反
\b	匹配单词边界
^$	开始结束
\num	对所获取的匹配的引用 '(.)\1' 匹配两个连续的相同字符

数量有关

字符	规则
{n}	匹配n次
{n,}	至少比n次
{n,m}	匹配n-m次
*	等价于{0,}
+	等价于{1,}
?	等价于{0,1}

贪婪与懒惰：正则表达式匹配尽量多的字符，例如/test\d*//.match('test123')返回test123。在标识符后添加?可以使其匹配尽量少的字符。

字符范围

字符	匹配规则
[a-z]	匹配a-z任意字符
[\u4E00-\u9FA5]	找出Unicode编码范围是\u4e00到\u9FA5的字符，判断是否有汉子

分组

()：匹配并获取匹配

replacer函数中，JavaScript可以用9获取对应内容

'i love javaScript'.replace(/(love)/,'$1 $1')
//'i love love javaScript'

match函数：表达式有全局属性时，捕获所有符合的表达式，没有全局属性时，匹配第一个结果，将匹配到的字符串放入结果数组

'i love java javaScript'.match(/(java)/)

//["java", "java", index: 7, input: "i love java javaScript"]

'i love java javaScript'.match(/(java\w*\b)/g)
//  ["java", "javaScript"]

'i love java javaScript'.match(/(java\w*) (java\w*)/)
//  ["java javaScript", "java", "javaScript", index: 7, input: "i love java javaScript"]

exec函数：忽略全局属性，只返回一个结果和分组结果

/(java) (javaScript)/g.exec('i love java javaScript java javaScript')

// ["java javaScript", "java", "javaScript", index: 7, input: "i love java javaScript java javaScript"]

分支条件：'|'分支条件影响两边所有内容

'javaScript typeScript'.match(/(java|type)Script/g)
// ["javaScript", "typeScript"]
    
'javaScript typeScript'.match(/java|typeScript/g)
// ["java", "typeScript"]

断言
- (?=exp):用来捕获正则表达式的后面，捕获括号内前面的内容，不分配组号
```
'i love javaScript'.match(/l\w+\s+(?=java\w*)/)

// ["love ", index: 2, input: "i love javaScript"]
```
- (?!exp):用在正则表达式后面，捕获后面不是括号内的字符
- (?:exp)：会匹配分组中的内容，但是不再分配组号，在replace，match等函数中作用也会消失。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式
```
'i love javaScript'.match(/(java\w*)/)

//  ["javaScript", "javaScript", index: 7, input: "i love javaScript"]

'i love javaScript'.match(/(?:java\w*)/)

//["javaScript", index: 7, input: "i love javaScript"]
```

三个处理选项：

内容	标记	文字描述
i	ignoreCase	忽略大小写
g	globle	全局匹配
m	mutiple	多行匹配

第三部分、正则表达式高级

工作原理
，正则表达式在JavaScript中执行主要分为以下四个部分，编译=>设置开始位置=>正则匹配=>匹配结果这四部分

第四部分、ES6的正则扩展

构造函数：RegExp构造函数第一个参数是正则对象，第二个参数指定修饰符时会忽略原有正则的修饰符。
字符串对象的四个方法match、replace、search、split内部全部调用RegExp的实例方法，例如search调用RegExp.prototype[Symbol.search]
u修饰符：用来正确处理大于\uFFF的Unicode字符，可以正确处理4个字节的UTF-16编码
y修饰符(粘连sticky)：与g相似，g只要求剩余位置中存在匹配就可以，y需要确保匹配从剩余的第一个位置开始。设计本质是让头部匹配标志^在全局匹配中都有效
sticky属性，表示是否设置了y修饰符
flag属性：返回正则的修饰符
s修饰符：.可以匹配任意单个非终止符（终止符：换行符\n 回车符\r，行分隔符，段分隔符），引入/s修饰符，使得可以匹配任意单个字符，与之对应的dotAll表示是否处在doAll模式下。
V8 4.9已经支持后行断言
具名组匹配，为每个分组起一个名字
此部分参考ES6标准入门

第五部分、常用正则表达式

邮箱匹配：/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
正则表达式链接

第六部分、实例

// 将字符串中所有的标签替换为标签
textHTML.replace(/()/gi,
      match => match.replace(//, '$1')
// 校验URL
/^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\S+(?::\S*)?@)?(?:(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[0-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))|localhost)(?::\d{2,5})?(?:(/|\?|#)[^\s]*)?$/

参考资料：

正则表达式可视化：https://jex.im/regulex
MDN文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
es6标准入门：http://es6.ruanyifeng.com/#docs/regex
掘金文章（推荐）https://juejin.im/post/5965943ff265da6c30653879