本文深入解析了正则表达式的构造方法、修饰符作用、特殊符号含义及其在JavaScript中的应用。从构造函数到字面量方式，从量词说明到小括号功能，再到正则相关方法的使用，全面覆盖了正则表达式的基础与进阶知识点。
一. 正则声明
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中表示换行
- ** 1 ** ： 表示任意小写字母开头的行
'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方式，返回的数组第一个值整体匹配的字符串， 其他值为通过括号分组匹配到
- 捕获用法
- 表示对匹配的字符串进行分组
'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"]
- 非捕获用法 ，已（?）形式出现
- (?: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"
a-z ↩︎
扫一扫
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
