Js 正则表达式常用梳理

一. 正则声明

1. 构造函数方式

var  reg = new RegExp('\d', 'gi');

• 通过 new 构造正则表达式对象， 第一个参数为正则内容， 第二个参数为修饰符。 这的参数匀为字符串
• 修饰符的作用是对匹配进行限定
• 修饰符有三种：** i, g, m, ** 可以同时出现， 没有顺序(在正则解析上 gi == ig)
  (1) i : 忽略大小写匹配
  (2) g: 全局匹配，匹配一个后继续匹配，直到结束
  (3) m: 多行匹配， 遇到换行后不停止匹配，直到结束

找找感觉

• [a-z] ： 表示包含a和z 及之间的任意小写字母
• + ： 表示至少出现1次
• \n ： 在js中表示换行
• ** ¹ ** ： 表示任意小写字母开头的行

'aBcd  efg'.match(/[a-z]+/)   // ["a"]
'aBcd efg'.match(/[a-z]+/i);  // ["aBcd"]
'aBcd efg'.match(/[a-z]+/g); // ["a","cd", "efg"]
'aBcd efg'.match(/[a-z]+/gi); // ["aBcd", "efg"]
'aB\ncd\n efg'.match(/^[a-z]+/m);  // ["a"]
'aB\ncd\n efg'.match(/^[a-z]+/g);  // ["a"]
'aB\ncd\n efg'.match(/^[a-z]+/gm);  // ["a", "cd"]

2.字面量方式

相比上一种方式， 字面量方式使用的更为常见，简洁。

var reg = /\d/gi

双斜杠内为正则内容， 后面跟修饰符。缺点是正则内容不能拼接，对于大多数场景基本够用了。

二. 正则相关符号

1. 方括号 []

用于查找方括号内的任意字符：

表达式	说明	示例	返回结果
[abc]	匹配方括号内的任意字符	‘adobe’.match(/[abc]/g)	[“a”,“b”]
[^abc]	匹配不在方括号内的任意字符	‘adobe’.match(/[^abc]/g)	[“d”,“0”,“e”]
[0-9]	匹配任何从0到9的数字	‘2020adobe’.match(/[abc]/g)	[“2”,“0”,“2”,“0”]
[a-z]	匹配任何从写a至z的字符	‘adobe 2020’.match(/[a-z]/g)	[“a”,“d”,“o”,“b”, “e”]
[A-Z]	匹配任何从大写A到Z的字符	‘adobe PS 2020’.match(/[A-Z]/g)	[“P”,“S”]

注： ^ 在 [ ] 内开始位置及正则双斜杠开始位置有特殊含义， 其它位置标示 ^ 字符吧本身

• 正则开头位置标示以某某开头的字符串

// 如下表示以大写或小写字母开头的且连续为字母的字符串
'adobe 2016'.match(/^[a-zA-Z]+/);   // ["adobe"]

• 正则 或 匹配中（即 | 匹配）， 表示或者以某某字符串开始的字符串。

'adobe2016ps'.match(/d+|^[a-z]+/g);  // ["adobe", "2016"]

• 在 [] 内开始位置时， 表示不匹配 [] 内除 ^ 以外的所有字符：

'adobe'.match(/[^abc]/g);  // ["d", "o", "e"]

注： $ 与 ^ 的前两个用法相似， 只不过匹配的是以某某字符结尾的字符串

'adobe 2016'.match(/d+|[a-z]+$/g);   // ["2016"]
'adobe'.match(/\d+|[a-z]+$/g);  // ["adobe"]

• 连字符左侧的字符对应ASCII值一定要小于或者等于右侧的字符，否则会报语法错

// Uncaught SyntaxError: Invalid regular expression: /[z-a]/: Range out of order in character class...
‘adobe’.match(/[z-a]/); 

• 如果希望对连字符 - 本身进行匹配， 需要用反斜线转义

"adobe-2016".match(/[a-g\-]/g);  // ["a", "d", "b", "e", "-"]

• 查看ASCII 表就会发现， 大写字母的ASCII值是小写字母的， 因此下面用法会报语法错误

// Uncaught SyntaxError: Invalid regular expression: /[a-Z]/: Range out of order in character ...
'adobe-2016'.match(/[a-Z]/g);

2. 特殊含义字符

• . 匹配任意单个字符， 除换行和结束符

'1+0.2*2=1.4'.match(/.{2}/g);   // ["1+", "0.", "2*", "2=", "1."]

• \w 匹配任意单词字符(数字，字母，下划线)， 等价于[A-Za-z0-9]

''ad34~!@$ps'.match(/\w/g);  // ["a", "d", "3", "4", "p", "s"]

• \W 匹配任意单词字符， 于\w 相反， 等价于 [^A-Za-z0-9]

'ad34~!@$ps'.match(/\W/g);  // ["~", "!", "@", "$"]

• \d 匹配数字， 等价于 [0-9]

'ps6'.match(/\d/g);  // ["6"]

• \D 匹配非数字， 等价于[0-9]

'ps6'.match(/\D/g);   // ["p", "s"]

• \s 匹配空白字符， 主要有 （\n, \f, \r, \t, \v）, 注意 ‘a\sb’ 中的 \s 依然是字符 s, 所以 ‘a\sb’.match(/\s/g) 返回 null

'children ps'.match(/\s/g);  //  [" "]

• \S 匹配非空白字符， 与\s 相反

‘adobe ps’.match(/\S/g);  // ["a", "d", "o", "b", "e", "p", "s"]

• \b 匹配单词边界， 注意连续的数字， 字母或下划线组成的字符串会认为一个单词

'adobe(2016) ps6.4'.match(/\b(\w+)/g);   // ["adobe", "2016", "ps6", "4"]

• \B 匹配非单词边界

'adobe(2016) ps6.4'.match(/\B(\w+)/g);  // ["dobe", "016", "s6"]

• \0 匹配NUL 字符

‘\0’.match(/\0/);   // ["NUL"]

• \n 匹配换行符 (\f 换页符， \r 回车符， \t 制表符-键盘tab对应的字符， \v 垂直制表符)

'adobe\nps'.match(/\n/).index;   // 5

注：

window系统回车换行符为\r\n，linux系统下没有\r，linux系统通过vi编辑器打开window系统的文本文件时候，经常在行尾出现^M符号，也就是\r的原因，解析文本的时候需要注意相关判断。

3. 量词说明

• n+ 匹配包含至少一个n的字符串

'adobe paas'.match(/a+\w+/g);  // ["adobe", "aas"]

• ** n* ** 匹配包含零个或多个n的字符串

'ab3 aa12bb'.match(/a*\d+/g);  // ["3", "aa12"]

• **n? ** 匹配包含零个或一个n的字符串

'ab3 aa12bb'.match(/a?\d+/g);  // ["3", "a12"]

• n{x} 匹配包含连续x个n的字符串 (n{x,y}： 匹配连续最少x个且最多y个的字符串； n{x, }： 匹配包含至少连续x个n的字符串)

'ab3 aa12bb aaa34'.match(/a{2}\d+/g);  // ["aa12", "aa34"]

等价表达式对比

表达式1	表达式2
n+	n{1, }
n*	n{0, }
n?	n{0,1}

4. 符号说明

• a | b 匹配包含a或b的字符串

'adobe ps13'.match(/([a-g]+l\d+)/g);  // ["ad", "be", "13"]

• ** / ** 字面量方式申明正则时的界定符

'adobe'.match(/\w+/);  // ["adobe"]

• ** 普通反斜线字符

'a\\dobe'.match(/\\/);   // ["\"]

5. 小括号 ()

正则在非全局(g) 模式下，通过match方式，返回的数组第一个值整体匹配的字符串， 其他值为通过括号分组匹配到

1. 捕获用法

• 表示对匹配的字符串进行分组

'adobe cs9cs10, adobe cs11'.match(/([a-z]+\d+)+/);  // ["cs9cs10", "cs10"]

• 与 | 一起使用表示选择性

"he is 12. she is 13. it's box".match(/(it|she|he)\s+is/g);   // ["he is", "she is"]

• 表示对匹配的字符串捕获

'adobe cs9'.match(/[a-z]+\d+/);  //  ["cs9"]
'adobe cs9'.match(/[a-z]+(\d+)/); // ["cs9", "9"]

2. 非捕获用法 ，已（?）形式出现

• (?:n) 表示非捕获组

'adobe12ps15test'.match(/[a-z]+\d+[a-z]+/);   // ["adobe12ps"]

// 使用括号分组
'adobe12ps15test'.match(/[a-z]+(\d+)([a-z]+)/);   // ["adobe12ps", "12", "ps"]   规则：字母+数字+字母
'adobe12ps15test'.match(/[a-z]+(?:\d+)([a-z]+)/);  // ["adobe12ps", "ps"]  规则：字母+非数字+字母
// 不使用（?:）也可以得到相同结果
'adobe12ps15test'.match(/[a-z]+\d+([a-z]+)/);   // ["adobe12ps", "ps"]
// 注意，但需求希望匹配字母之间的规则复杂时，如希望匹配字母，且字母之间可以为1或3时，但不需要1和3
'adobe11ps15test'.match(/[a-z]+(1|3)+([a-z]+)/);   // ["adobe11ps", "1", "ps"]
// 返回中不希望包含数字怎么办，可以使用非捕获
'adobe11ps15test'.match(/[a-z]+(?:1|3)+([a-z]+)/);  // ["adobe11ps", "ps"]

• (?=n) 匹配任何其后紧跟字符 n 的字符串， 但返回中不包含n

'adobe12ps15test'.match(/[a-z]+(?=\d)/g);   // ["adobe", "ps"]

• （?!n）匹配任何其后没有紧跟字符n的字符串，返回中不包含n

'adobe12ps15test'.match(/[a-z]+(?!\d)/g);   // ["adob", "p", "test"]

• (?<=n) 匹配任何其前紧跟字符n的字符串， 返回中不包含n

   'adobe12ps15test'.match(/(?<=\d)[a-z]+/g);  // ["ps"，"test"]

• (?<!n) 匹配任何其前紧跟字符n的字符串， 返回中不包含n

'adobe12ps15test'.match(/(?<!\d)[a-z]+/g);   // ["adobe", "s", "est"]

注：
(1) 如果希望对上面特殊字符本身进行匹配，需要在其前面添加\进行转移

'11+2=13'.match(/\d+\+/g);  // ["11+"]
'(11+2)*2=26'.match(/\(\d+\+\d+\)/g);  // ["(11+2)"]

(2) 例子

// 注意下面两个表达式返回的结果
'path C:\Windows\System32'.match(/([a-zA-Z]:\\\w+)/g);  // null
'path C:\\Windows\\System32'.match(/([a-zA-Z]:\\\w+)/g);  // ["C:\Windows"]

6. 正则相关方法

(1) RegExp 对象相关方法

方法名	应用场景	返回值	实例
test	判断是否匹配	true/false	/\d/.test(‘2020y’)
exec	返回匹配的结果，与match类似	数组或null	/\d/.exec(‘2020y’)

(2) String 对象相关方法

方法名	使用场景	返回值	实例
match	返回匹配的结果，非全局条件下与exec返回结果一致，并拥有指向匹配字符串的信息，全局条件下一次性返回所有匹配的结果	数组或null	‘2020’.match(/d+/)
replace	字符串替换成另外的字符串或将正则的匹配字符串替换成其他子串	字符串	‘2020replace’.replace(/d+/, ‘2021’)
search	查找第一次匹配子串的位置，返回index值，否则返回-1	index	‘2020search’.search(/s/)
split	按 预定字符串或字符串规则拆分数组，接受一个字符串或正则	数组	‘20，20，a66’.split(/,/)

(3) Replace 高级用法
第二个参数可以使用function, 其中有三个参数， 分别为匹配的字符串， 当前匹配的字符串index值， 匹配的源字符串，最终结果根据每次匹配结果进行相应的替换

'adobe aacc bbaa'.replace(/a+/g, function(str, index, source){
     if(index > 0) {
        return str.toUpperCase();
     } else {
         return str;
     }
});

// "adobe AAcc bbAA"

---

1. a-z ↩︎