前端js正则使用，正则你今天学会了吗

前言

几周没有更新，前期回顾了一下正则，正则在js中的使用，话说自从学前端以来听到过多次这样的“笑话”，程序员分为会正则的和不会正则的。

正则基础

特殊字符

+ 一次或者以上
* 0次或者以上
{n} n次
{n,n} 多少次到多少次
. 非回车以外
? 转换非贪婪,匹配前面的一次或者零次
^ 开始的位置
[^] 非
() 组
| 或

常用 （通常小写匹配大写非）

\d 匹配数字[0-9]
\W 非数字
\r 回车符
\n 换行符
\s 匹配 \r\n\f等空白符
\S 非这些空白符
\w 数字字符下划线等价于 [a-zA-Z_]
\W 非数字字符下划线 [^a-zA-Z_]
\b 单词边界
\B 非单词边界
...

其他前瞻后顾等

(?:) 不会在我们等正则内存中，提高性能
A(?=B) 前瞻等于 相当于 A 的前面参数等于B 的会被匹配
A(?!B) 前瞻非 相当于 A 的前面参数等于B 的会被匹配
(?<=B)A 后顾 相当于A 的后面的等于B 的会被匹配
(?<!B)A 后顾非 相当于 A的后面的不等于B 会被匹配

正则的使用（js）

String 方法

在我们js 使用正则匹配的地方
	replace 进行替换操作
	split 按什么进行分割数组
	match 搜索当前的值，并返回当前的搜索到的值
	search	相当于indexOf

search 使用
	'ab12'.search(/\d/) // 2
	'ab12'.search(/3/)  //-1
    返回值和indexof 一样

split 使用
	'a1a1a1a1a1'.split(/\d/) // ["a", "a", "a", "a", "a", ""]

replace 使用
	'a1a1a1a1a1'.replace(/(a)/g, '$1$1') // aa1aa1aa1aa1aa1
    $1 相当于匹配的第一个组，匹配后的第二个参数也可以是一个 function 第一个参数是当前的匹配值，第二个是当前的 匹配到的组的$1 - $99 

match 搜索并返回
	// 没有g返回值和 regexObj.exec() 相同
	'a1a1a1a1a1'.match(/1/)
   	返回一个数组 数组里面有当前的 [1] 匹配到的值 还有 index 当前的匹配的下标， input 当前进行匹配的值，
    	groups 一个捕获组数组或者 undefined（如果没有定义命名捕获组）。groups不知道用处，知道的大佬可以教教我，不甚感激
    
    'a1a1a1a1a1'.match(/1/g) // ["1","1","1","1","1"]
    如果当前的 正则有是 /1/g 则返回当前所有匹配的值

RegExp 方法 // 在 RegExp 构造函数内 转译 ‘/’ 变为 ‘//’

test 检索当前的字符串是否有，返回 Boolean
	const reg = new RegExp('test')
    reg.test(/test/) // true

exec 检索字符串中指定的值。返回找到的值，并确定其位置。
	var reg = new RegExp('test','g')
    var val = reg.exec('test')
    // 返回值 是一个数组 里面多了几个静态变量 index 匹配下标 input 匹配的字符串 length匹配到的长度 和String.match 的g模式一样
    {
    	0: "test",
        groups: undefined,
        index: 0,
        input: "test",
        length: 1,
    }
    // 要主要的是 当前的 RegExp 的 $1 会被保存下来
    new RegExp('(?:test)','g') 加上 ?: 则不会被记录
    
    // reg.lastIndex 注意这个属性在有g的情况 会增量到当前对比的下标，下次进行对比的时候就总这个开始对比了

toString
	var reg = new RegExp('\\s(12)\\1test','g')
    reg.toString() // "/\s(12)\1test/g"

前瞻后顾使用 ? 的使用，RegExp 属性使用

前瞻
    let str = "aaabbbcccbbb"
    获取 当前前瞻为ccc的bbb
    str.match(/b+(?=c{3})/)
    
后顾
	let str = "aaabbbcccbbb"
    获取 当前后顾为aaa 的bbb
    str.match(/(?<=a+)b+/)
    
?的使用 ？表示当前0或者1次，或者当前值的一个非贪婪  
	let str = "aaabcccbbb"
    str.search(/a+b?c+/) // >-1
    
    非贪婪 有这么个需求把 width: 12px 换成其他的
    let html = '<img style="width: 12px" src="" />'
    html.replace(/(\<img.*style\=\").*(\".*)/g, "$1hright:12px$2")
    // "<img style="hright:12px" />" 转换成这个导致 src="" 不见了
    这个时候我们把
    html.replace(/(\<img.*style\=\").*?(\".*)/g, "$1hright:12px$2") 加了一个? (值匹配当前的一次或者0次)
    // "<img style="hright:12px" src="" />" 结果就正常了
    
RegExp    
	lastIndex 可以用来制定下次匹配开始的地方
    
    let str = 'abababababababab'
    let reg = /a/g
    reg.exec(str)
    console.log(reg.lastIndex) // 1
    reg.exec(str)
    console.log(reg.lastIndex) // 3
    reg.exec(str)
    console.log(reg.lastIndex) // 5
    
    由此我们可以知道当前每次进行匹配 lastIndex都会进行到最后的位置
    尝试
    let str = 'abababababababab'
    let reg = /a/g
    reg.exec(str)
    console.log(reg.lastIndex) // 1
    reg.lastIndex = 0
    reg.exec(str)
    console.log(reg.lastIndex) // 1
   	reg.lastIndex = 0
    reg.exec(str)
    console.log(reg.lastIndex) // 1
    由此我们可以得出 lastIndex 可以让我们从哪个位置进行匹配

常见正则

/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/ // 手机号

/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/ // 身份证

/^[1-9]\d{5}(?!\d)$/ // 邮编

... 太多不写了百度就行 =。=