关键词: 正则 校验 字符串
本文所作的主要目的是为了要用到正则的时候，能尽快解决问题，对正则有个大致概念。
所以开篇内容类似《飞行手册》以案例和工具为主。
好用的正则工具
常用的正则
//Email地址
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g
//手机号码
/^1[3-9]\d{9}$/g
//固定电话
/^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$/
//身份证号码(15位、18位数字)
/^\d{15}|\d{18}$/
//中国邮政编码(中国邮政编码为6位数字)
/[1-9]\d{5}(?!\d)/
//URL
/^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/
//匹配HTML标签
/<(\w+)[^>]*>(.*?<\/\1>)?/
//html注释
/<!--[\s\S]*?-->/g
// 取闭合标签 match
/(<span class="blue">)([\S\s]*?)(\<\/span>)/g
// 替换标签
replace(/\<i\>(.*?)\<\/i\>/g,"<span>$1</span>")
//img src
/<img [^>]*src=['"]([^'"]+)[^>]*>/
//金额校验，精确到2位小数
/^[0-9]+(.[0-9]{2})?$/
// 1000->1,000 金额格式化
replace(/\B(?=(\d{3})+(?!\d))/g,',')
//输入数字或者小数
/^\d*\.?\d*$/g
概念定义
正则表达式本质是文本处理工具，是由普通字符和特殊字符组成的文字模板。
正则规则
匹配字符
| 字符 | 说明 |
|---|---|
| . | 匹配除换行符以外的任意字符 |
| \ | 转义符 |
| \d | 匹配数字, 等价于字符组[0-9] |
| \D | 匹配非数字的任意字符, 等价于[^0-9] |
| \w | 匹配字母, 数字, 下划线 |
| \W | 匹配除字母,数字,下划线之外的任意字符 |
| \s | 匹配任意的空白符(包括制表符,空格,换行等) |
| \S | 匹配非空白的任意字符 |
| [...] | 字符组 |
| [^...] | 排除性字符组 |
| {min,max} | 量词，至少出现 min 次，最多出现 max 次 |
| {min} | 量词，出现 min 次 |
| ? | 量词，出现0次或者1次，等价于{0,1} |
| + | 量词，至少出现1次,等价于{1,} |
| * | 量词，出现一次,等价于{0,} |
'abc abbc abbbc abbbbc abbbbbc abbbbbbc'.match(/ab{2,5}c/g)
// ['abbc', 'abbbc', 'abbbbc', 'abbbbbc']
'a0b a1b a2b a3b a4b'.match(/a[0-3]b/g)
// ['a0b', 'a1b', 'a2b', 'a3b']
贪婪 & 非贪婪
正则本身是贪婪的，默认会尽可能的多匹配符合模式的字符。
可以量词后面加一个?，就变成非贪婪。让正则表达式尽可能少的匹配，一旦成功就不再继续尝试。
| 贪婪量词 | 非贪婪量词 |
|---|---|
| {m,n} | {m,n}? |
| {m,} | {m,}? |
| ? | ?? |
| + | +? |
| * | *? |
const str = '123 1234 12345 123456'
// 贪婪
str.match(/\d{2,5}/g)
// 非贪婪
str.match(/\d{2,5}?/g)
// ['123', '1234', '12345', '12345']
// ['12', '12', '34', '12', '34', '12', '34', '56']
const nstr = "123456789"
nstr.replace(/\d{3,6}/,'换成这个')
nstr.replace(/\d{3,6}?/,'换成这个')
// 替换成这个789
// 替换成这个456789
多选分支
按照分支的顺序逐个匹配，当前面的分支满足要求了，则舍弃后面的分支。
ab|cd => 匹配'ab'或者'cd'字符子串。
'good idea, nice try.'.match(/good|nice/g)
// ['good', 'nice']
应用题
- 匹配id
- 匹配16进制的颜色值
- 匹配24小时制时间
- 匹配日期
匹配位置
| 字符 | 说明 |
|---|---|
| \b | 单词的边界，匹配单词开始或结束的位置 |
| \B | 非单词边界。例如在字符串中所有位置中，扣掉\b，剩下的都是\B 的。 |
| ^abc$ | 字符串开始、结束的位置 |
| (?=p) | 正向先行断言。符合p（子模式）前面的那个位置。 |
| (?!p) | 负向先行断言。(?=p)取反的意思 |
| (?<=p) | 符合p（子模式）后面的那个位置。 |
| (?<!p) | (?<=p)取反 |
// 单词边界
'[[show_me_code.html]]'.replace(/\b/g, '| ')
// 非单词边界
'[[show_me_code.html]]'.replace(/\B/g, '| ')
// '[[| show_me_code| .| html| ]]'
// '| [| [s| h| o| w| _| m| e| _| c| o| d| e.h| t| m| l]| ]| '
// 正向先行断言 在符合条件的地方前面
'show_me_code'.replace(/(?=show)/g, '| ')
// 负向先行断言 在符合条件的地方以外
'show_me_code'.replace(/(?!show)/g, '| ')
// '| show_me_code'
// s| h| o| w| _| m| e| _| c| o| d| e|
// 符合p（子模式）后面的位置
'show_me_code'.replace(/(?<=show)/g, '| ')
// (?<=p)匹配到的位置之外的位置
'show_me_code'.replace(/(?<!show)/g, '| ')
// 'show| _me_code'
// '| s| h| o| w_| m| e| _| c| o| d| e| '
应用题
- 数字的千分位分割法
- 手机号3-4-4分割
- 验证密码的合法性
分组
让量词作用于一个整体。分组中的分支结构则有点像 ||
// ab 是一个分组
'ababa abbb ababab'.match(/(ab)+/g)
console.log(string)
// ["abab", "ab", "ababab"]
/I love (JavaScript|Regular Expression)/.test('I love JavaScript') // true
/I love (JavaScript|Regular Expression)/.test('I love Regular Expression') // true
分组引用
常用来界定重复限定符的范围, 以及将字符分组. 如: (ab)+ 可以匹配abab..等, 其中 ab 便是一个分组。
// 提取年月日
const reg = /(\d{4})-(\d{2})-(\d{2})/
const str = '2023-03-06'
reg.test(str)
// 反向引用
console.log(RegExp.$1) // 2023
console.log(RegExp.$2) // 03
console.log(RegExp.$3) // 06
// 数据替换
// 2023-03-06 -> 03/06/2023
'2023-03-06'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$2/$3/$1')
'2023-03-06'.replace(/(\d{4})-(\d{2})-(\d{2})/, () => {
return RegExp.$2 + '/' + RegExp.$3 + '/' + RegExp.$1
})
'2023-03-06'.replace(/(\d{4})-(\d{2})-(\d{2})/, ($0, $1, $2, $3) => {
return $2 + '/' + $3 + '/' + $1
})
非捕获性括号
非捕获性分组, 匹配正则的位置, 但不捕获匹配结果。
也就是说不创建反向引用, 就好像没有括号一样.
"#808080".replace(/#(?:\d+)/,"$1"+"~~")
// $1~~
console.log(RegExp.$1); // ""
"#808080".replace(/#(\d+)/,"$1"+"~~")
// 808080~~
console.log(RegExp.$1); // "808080"
应用题
- trim 方法模拟
- 将每个单词的首字母大写 my name is => My Name Is
- 驼峰化 -moz-transform => MozTransform
- 中划线化 MozTransform => -moz-transform
- HTML转义和反转义
- 匹配成对的标签
