JavaScript正则表达式全解

正则表达式

reg.test(str)

var reg = /abc/

var str = 'abcd'

// 判断str里是否有reg表达式规定的片段，返回boolean
// reg.test(str) 

// true
console.log(reg.test(str))

模式 i

// 在正则表达式后面加i，表示忽略大小写
var reg = /abc/i

var str = 'abCd'

// true
console.log(reg.test(str))

使用构造函数创建正则表达式

// 第一个参数是匹配字段 第二个参数是匹配模式
var reg = new RegExp('abc', 'i')

var str = 'abCd'

// true
console.log(reg.test(str))

// 第一个参数还可以添加已知的正则表达式
var reg = /abcd/i

// 这样创建的reg1类似于深克隆
var reg1 = new RegExp(reg)

// 这样创建的reg2类似于浅克隆
var reg2 = RegExp(reg)

模式 g

g 表示全局匹配

str.match(reg)

// 不加模式 g
var reg = /ab/

var str = 'ababbababaab'

// str.match(reg) 可以把str里符合reg匹配的片段挑出来然后返回这个片段数组

// ['ab']
console.log(str.match(reg))

// ----------------------------------------

// 加模式 g

var reg = /ab/g

var str = 'ababbababaab'

// str.match(reg) 可以把str里符合reg匹配的片段挑出来然后返回这个片段数组

// 因为这个reg加了模式g，所以会找到所有的匹配片段

// ['ab', 'ab', 'ab', 'ab', 'ab']
console.log(str.match(reg))

模式 m

多行匹配模式，如果你不知道，看下面的代码示例吧

var reg = /a/g

var str = 'abcdea'

// ['a', 'a']
console.log(str.match(reg))

// 以a开头的a
var reg1 = /^a/g 

// ['a']
console.log(str.match(reg1))

// 如果str换个行呢
var str1 = 'abcde\na'

// ['a']  --- 因为还不具备多行匹配的功能
console.log(str1.match(reg1))

// 现在我们来添加多行匹配的功能

var reg2 = /^a/mg

// 现在就可以匹配到了 
// ['a', 'a']
console.log(str1.match(reg2))

表达式 []

一个[]表示一位，这个里面可以指定范围

逐个指定

var str = '2sfsf1233jajfsj3'

// 要求：正则表达式需要去匹配str中有没有3个数字连在一起的情况
var reg = /[1234567890][1234567890][1234567890]/g

// ['123', '987']
console.log(str.match(reg))

// 也可以这样玩
var reg1 = /[ef][sj]/g

// ['fs', 'fs']
console.log(str.match(reg1))

范围指定

var str = '2sfsf1233ja98765jfsj3'

// 要求：正则需要去匹配str中有没有3个数字连在一起的情况
var reg = /[0-9][0-9][0-9]/g

// ['123', '987']
console.log(str.match(reg))

var reg1 = /[0-9a-z][3]/g

// ['23', 'j3']
console.log(str.match(reg1))

var reg2 = /[0-9A-z][0-9A-z][j]/g

// [ '33j', '65j', 'fsj' ]
console.log(str.match(reg2))

特殊字符 ^

^放到[]里面表示的是非，和放到[]外面意义不一样

var str = 'ab1cd'

var reg = /[^a][^b]/g

// ['b1', 'cd']
console.log(str.match(reg)) 

特殊字符()和|

// 表示匹配abc或者bcd
var reg = /(abc|bcd)/g

// ['abc']
console.log('abcd'.match(reg))

// ['bcd']
console.log('bcdedf'.match(reg))

// ['bcd0']
console.log('bcd0df'.match(reg))

特殊字符^和$

^n 表示以n开头，m$ 表示以m结尾

var reg = /^ab/g

var str = 'abc'

// [ 'ab' ]
console.log(str.match(reg))

var reg1 = /bc$/g

// ['bc']
console.log(str.match(reg1))

// 注意下面这种情况 它的意思是以a开头，以b结尾，中间有一个b
// var reg = /^abc$/g

// var str = 'abcabc'

// // null
// console.log(str.match(reg))

元字符

\w

表示word字符，可以认为\w === [0-9A-z_]

\W

是\w的补集，可以认为\W === ^0-9A-z

var str = 'sdf'

var reg = /\w/g

var reg1 = /\W/g

// ['s', 'd', 'f']
console.log(str.match(reg))

// null
console.log(str.match(reg1))

\d

表示数字字符，可以认为\d === [0-9]

\D

是\d的补集，可以认为\D === [^0-9]

var str = '123'

var reg = /\d\d\d/g

// ['123']
console.log(str.match(reg))

// [] 里面也可以写元字符
var reg1 = /[\w\d]/g

// ['1', '2', '3']
console.log(str.match(reg1))

\s

表示空白字符，包含空格符、制表符、回车符、换行符等，可以认为\s === [\t\n\r\v\f(还有空格)]

\S

表示[^\s]

\b

表示单词边界

\B

表示非单词边界

var reg = /\bcde/g

// 这里有6个单词边界
var str = 'abc cde fgh'

// ['cde']
console.log(str.match(reg))

var reg1 = /\bcde\b/g

// ['cde']
console.log(str.match(reg1))

str = 'abc cdefgh'

// null
console.log(str.match(reg1))

var reg2 = /\bcde\B/g

// ['cde']
console.log(str.match(reg2))

\n

表示换行符

\t

表示制表符

var str = '1321\nad'

var reg = /\na/g

// ['\na']
console.log(str.match(reg))

\uxxxx

unicode编码

var reg = /\u524d\u7aef/g

var str = '前端工程师'

// ['前端']
console.log(str.match(reg))

.

. === [^\r\n]，匹配除了\r，\n外的所有的字符

量词

n+

表示n可以出现一次到多次

n*

表示n可以出现0次到多次

var reg = /\w+/g

var str = 'abc'

// ['abc']
console.log(str.match(reg))

var reg1 = /\w*/g

// ['abc', ''] 注意这里会多一个空字符
console.log(str.match(reg1))

// 这样会出现4个空字符 *会在逻辑上，也就是光标后再多匹配一位空字符
var reg2 = /\d*/g

// ['', '', '', '']
console.log(str.match(reg2)) 

贪婪匹配原则--能匹配多就不匹配少

var reg = /\w+/g

var str = 'aaaaaaaaaaaaa'

// ['aaaaaaaaaaaaa']
console.log(str.match(reg))

n?

匹配前面一个表达式 0 次或者 1 次。等价于 {0,1}。

var reg = /\w?/g

var str = 'aaa'

// [ 'a', 'a', 'a', '' ]
console.log(str.match(reg))

n{x}

表示n只能出现x次

n{x,y}

表示可以出现x次到y次

n{x,}

表示可以出现x次到多次

var reg = /\w{3}/g

var str = 'abc'

// [ 'abc' ]
console.log(str.match(reg))

var reg1 = /\w{1,}/g

// ['abc']
console.log(str.match(reg1))

做做题

1.检验一个字符串首或尾是否含有数字

var str = '1fsdljf1231'

var reg = /^\d|\d$/

// true
console.log(reg.test(str))

2.检验一个字符串首尾是否同时含有数字

var str = '1dfasfasdf2'

var reg = /(^\d)[\d\D]*(\d$)/

// true
console.log(reg.test(str))

正则表达式的属性

var reg = /flinn/gi

// true
console.log(reg.global)

// true
console.log(reg.ignoreCase)

// false
console.log(reg.multiline)

// 'flinn'
console.log(reg.source)

正则表达式的方法

test

exec & 属性lastIndex

var str = 'abababab'

var reg = /ab/g

// 0
console.log( reg.lastIndex )
// [ 'ab', index: 0, input: 'abababab']
console.log( reg.exec(str) )

// 2
console.log( reg.lastIndex )
// [ 'ab', index: 2, input: 'abababab']
console.log( reg.exec(str) )

// 4
console.log( reg.lastIndex )
// [ 'ab', index: 4, input: 'abababab']
console.log( reg.exec(str) )

// 6
console.log( reg.lastIndex )
// [ 'ab', index: 6, input: 'abababab']
console.log( reg.exec(str) )

// 8
console.log( reg.lastIndex )
// null
console.log( reg.exec(str) )

// 0
console.log( reg.lastIndex )
// [ 'ab', index: 0, input: 'abababab']
console.log( reg.exec(str) )

手动修改lastIndex，会产生作用

var str = 'abababab'

var reg = /ab/g

// 0
console.log( reg.lastIndex )
// [ 'ab', index: 0, input: 'abababab']
console.log( reg.exec(str) )

reg.lastIndex = 0

// [ 'ab', index: 0, input: 'abababab']
console.log( reg.exec(str) )

注意

如果匹配模式不是g,那么lastIndex将永远是0，也就是exec永远从下标0开始匹配。

子表达式及其反向引用

需求：匹配xxxx型的字符串

var str = 'aaaa'

// (\w)表示一个子表达式 \1表示反向引用第`1`个子表达式的内容
var reg = /(\w)\1\1\1/g

// ['aaaa']
console.log(str.match(reg))

需求：匹配xxyy型的字符串

var str = 'aabb'

// (\w)表示一个子表达式 \1表示反向引用第1个子表达式的内容
// \2 表示反向引用第2个子表达式的内容
var reg = /(\w)\1(\w)\2/g

// ['aabb']
console.log(str.match(reg))

使用子表达式后再用exec方法

var str = 'aabb'

// (\w)表示一个子表达式 \1表示反向引用第1个子表达式的内容
// \2 表示反向引用第2个子表达式的内容
var reg = /(\w)\1(\w)\2/g

// 这里会多出两位：'a' 和 'b'
// [ 'aabb', 'a', 'b', index: 0, input: 'aabb']
console.log(reg.exec(str))

支持正则表达式的字符串方法

match(reg)

加g可以匹配多个片段，不加g匹配一个

var str = 'aabb'

// 不加g
var reg = /(\w)\1(\w)\2/

// [ 'aabb', 'a', 'b', index: 0, input: 'aabb']
console.log(str.match(reg))

// 加g
var reg1 = /(\w)\1(\w)\2/g

// [ 'aabb' ]
console.log(str.match(reg1))

search(reg)

返回匹配到的位置下标，加不加g都只匹配第一个满足条件的下标为止，没匹配到返回-1

var str = 'faabb'

var reg = /(\w)\1(\w)\2/
var reg1 = /(\w)\1(\w)\2/g

// 1
console.log(str.search(reg))
// 1
console.log(str.search(reg1))

split(reg)

按照reg匹配规则来打散字符串为一个数组

var str = 'faabb'

var reg = /aa/

// ['f', 'bb']
console.log(str.split(reg))

replace(reg, s)

var str = 'faabb'

// 不使用正则表达式，则没有访问全局的能力
// 'fbabb'
console.log(str.replace('a', 'b'))

需求：将xxyy转为yyxx

var str = 'aabb'

var reg = /(\w)\1(\w)\2/g

// 可以使用$，来引用子表达式
// 'bbaa'
console.log(str.replace(reg, '$2$2$1$1'))

// 另一种牛逼的形式，调用方法
// 在这里，result为'aabb'， $1、$2分别为第1和第2个子表达式的引用
// 'bbaa'
console.log(str.replace(reg, function (result, $1, $2) {
  return $2 + $2 + $1 + $1
}))

需求：将this-first-name这种类型的命名转为小驼峰命名形式

var str = 'the-first-name'

var reg = /-(\w)/g

// 'thisFirstName'
console.log(str.replace(reg, function (result, $1) {
  return $1.toUpperCase()
}))

正向预查

需求：在aabaaaa中找出后面跟的是b的那个a

var str = 'aabaaa'

// 表示a后面跟的是b，但是b不参与匹配，只参与限定
var reg = /a(?=b)/g

// ['a']
console.log(str.match(reg))

需求：在aabaaaa中找出后面不跟的是b的那个a

var str = 'aabaaa'

// 表示a后面跟的是b，但是b不参与匹配，只参与限定
var reg = /a(?!b)/g

// ['a', 'a', 'a', 'a']
console.log(str.match(reg))

非贪婪匹配

只需在量词后面加一个?，那么它将遵循能少就不多匹配的原则（至少会匹配一个）

var str = 'aaaa'

var reg = /a+?/g

// ['a', 'a', 'a', 'a']
console.log(str.match(reg))

var reg1 = /a??/g

// [ '', '', '', '', '' ]
console.log(str.match(reg1))

做做题

需求：将aaaabbbbbccc转为abc(字符串去重)

var str = 'aaaaabbbbbccc'

var reg = /(\w)\1*/g

// 'abc'
console.log(str.replace(reg, '$1'))

一道难题：将一个字符串每隔三位打个点

var str = '179023240000'

var reg = /(?=(\B)(\d{3})+$)/g

// 179.023.240.000
console.log(str.replace(reg, '.'))