前端常用正则表达式
正则表达式有两种创建方式,分别是和。// 字面量创建方式let reg1 = /\d+/// \d 表示匹配 0~9的某一个数字, + 表示匹配一到多个// 构造函数创建方式let reg2 = new RegExp('\\d+') // 放在字符串中, \ 需要进行转义和。test 方法可用于匹配某个字符串是否符合所设置的正则表达式规则,匹配的话返回 true,不匹配返回 false;而 exe
正则表达式有两种创建方式,分别是 字面量创建方式 和 构造函数创建方式。
// 字面量创建方式
let reg1 = /\d+/ // \d 表示匹配 0~9的某一个数字, + 表示匹配一到多个
// 构造函数创建方式
let reg2 = new RegExp('\\d+') // 放在字符串中, \ 需要进行转义
正则表达式对外暴露两个方法:test 和 exec。test 方法可用于匹配某个字符串是否符合所设置的正则表达式规则,匹配的话返回 true,不匹配返回 false;而 exec 方法则更为强大,它可以用于捕获我们在字符串中所匹配到的部分。
let str = "Hello RegExp!";
// 验证是否包含数字
let reg = /\d+/;
reg.test(str); // false
str = "2021-06-30";
reg.exec(str); // ["2021", index: 0, input: "2021-06-30", groups: undefined]
量词元字符
量词元字符 用来设置某些字符出现的次数,主要有以下几种:
量词 | |
---|---|
* | 出现 0 到 多次 |
+ | 出现 1 到 多次 |
? | 出现 0 次或 1 次 |
{ n } | 出现 n 次,等同于 { n, n } |
{ n, } | 出现 n 到 多次 |
{ n, m } | 出现 n 到 m 次 |
使用方式如下:
let reg1 = /\d{3}/ // 匹配三个数字连在一起出现的情况
let reg2 = /\d+/ // 匹配至少有一个数字出现的情况
let reg3 = /\d{2,4}/ // 匹配二到四个数字连在一起出现的情况
let str1 = 'AAA12BB'
console.log(reg1.test(str1)) // false
console.log(reg2.test(str1)) // true
console.log(reg3.test(str1)) // true
let str2 = 'AAA12BB567CC'
console.log(reg1.test(str2)) // true
console.log(reg2.test(str2)) // true
console.log(reg3.test(str2)) // true
特殊元字符
特殊元字符 需要记忆的语法就稍微多一点,它们由单个特殊字符或者多个特殊字符组合在一起来表示特殊的含义,常用的特殊元字符如下表:
位置 |
|
^ |
匹配开头的位置 |
$ |
匹配结尾的位置 |
\b |
匹配单词边界,即,\w 与 \W、^ 与 \w、\w 与 $ 之间的位置 |
\B |
匹配非单词边界,即,\w 与 \w、\W 与 \W、^ 与 \W,\W 与 $ 之间的位置 |
(?=abc) |
正向预查,匹配 "abc" 前面的位置,即此位置后面匹配 "abc" |
(?!abc) |
负向预查,匹配非 "abc" 前面的位置,即此位置后面不匹配 "abc" |
注意:在正则表达式中单词的意思是指数字、字母和下划线,相当于 \w。
字符组 |
|
[abc] |
匹配 "a"、"b"、"c" 其中任何一个字符 |
[a-d1-4] |
匹配 "a"、"b"、"c"、"d"、"1"、"2"、"3"、"4" 其中任何一个字符 |
[^abc] |
匹配除了 "a"、"b"、"c" 之外的任何一个字符 (注意不要把这里的 ^ 和匹配开头位置的 ^ 混淆了) |
[^a-d1-4] |
匹配除了 "a"、"b"、"c"、"d"、"1"、"2"、"3"、"4" 之外的任何一个字符 |
x|y |
匹配 x 或 y 其中的一个字符 |
. |
匹配除了换行符(\n)之外的任意字符 |
\ |
转义符,将有特殊含义的字符转为普通字符,也可将某些普通字符转为特殊字符 |
\d |
匹配数字,等价于 [0-9] |
\D |
匹配非数字,等价于 [^0-9] |
\w |
匹配单词字符,等价于 [a-zA-Z0-9_] |
\W |
匹配非单词字符,等价于 [^a-zA-Z0-9_] |
\s |
匹配空白符 |
\S |
匹配非空白符 |
\n |
匹配换行符 |
元字符 ^ 和 $
^ 用于匹配字符串开头位置的字符,$ 用于匹配字符串结尾位置的字符,我们用 \d 来对数字字符进行匹配:
匹配字符串是否以数字开头:
let reg = /^\d/ // 匹配字符串是否以数字开头
console.log(reg.test('RegExp')) // false
console.log(reg.test('2021RegExp')) // true
console.log(reg.test('RegExp2021')) // false
匹配字符串是否以数字结尾:
let reg = /\d$/ // 匹配字符串是否以数字开头
console.log(reg.test('RegExp')) // false
console.log(reg.test('2021RegExp')) // false
console.log(reg.test('RegExp2021')) // true
如果 ^ 和 $ 符号两个都不加,则只要字符串中包含符合规则的字符即可:
let reg = /\d/ // 匹配字符串是否包含数字
console.log(reg.test('Reg2021Exp')) // true
但如果 ^ 和 $ 两个符号都加上了,字符串必须完全匹配其中的规则:
let reg = /^\d$/ // 匹配单个数字
console.log(reg.test('Reg2021Exp')) // false
console.log(reg.test('2021RegExp')) // false
console.log(reg.test('RegExp2021')) // false
console.log(reg.test('2021RegExp2021')) // false
console.log(reg.test('2021')) // false
console.log(reg.test('2')) // true
这里你是不是觉得,最后面三条应该都为 true,但倒数两条都为 false 呢?这是因为在这里的正则表达式没有加上量词修饰符,这里就默认只能匹配一位 /d 格式的字符,相当于 /^\d{1}$/ 。
如果是希望可以同时匹配多位数字的规则,可以给正则表达式加上 + 符号:
let reg = /^\d+$/ // 匹配单位或多位数字
console.log(reg.test('2021RegExp2021')) // false
console.log(reg.test('2021')) // true
console.log(reg.test('2')) // true
console.log(reg.test('1')) // true
但这里表示的是必须为连续的数字,且开头和结尾都是数字。那如果想要匹配上图中的第一条呢?可以将正则修改如下:
let reg = /^\d+.*\d+$/ // 匹配以数字开头和以数字结尾的字符串
console.log(reg.test('2021RegExp2021')) // true
console.log(reg.test('2021')) // true
console.log(reg.test('2')) // false
所以上图的第一条和第二条就都匹配上了,可最后一条却不匹配了。因为我们开头和结尾都用 + 表示前后至少都有一位数字,加起来字符串最少也需要两位才能符合:
let reg = /^\d+.*\d+$/ // 匹配以数字开头和以数字结尾的字符串
console.log(reg.test('2021RegExp2021')) // true
console.log(reg.test('2021')) // true
console.log(reg.test('2')) // false
console.log(reg.test('20')) // true
那假如我们即希望可以匹配开头和结尾都是数字的字符串、且同时允许字符串只是一位数字的情况,该怎么写呢?这个时候我们就可以用到 管道符 | 了。
一、校验数字的表达式
-
数字:^[0-9]*$
-
n位的数字:^\d{n}$
-
至少n位的数字:^\d{n,}$
-
m-n位的数字:^\d{m,n}$
-
零和非零开头的数字:^(0|[1-9][0-9]*)$
-
非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$
-
带1-2位小数的正数或负数:^(-)?\d+(.\d{1,2})?$
-
正数、负数、和小数:^(-|+)?\d+(.\d+)?$
-
有两位小数的正实数:^[0-9]+(.[0-9]{2})?$
-
有1~3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$
-
非零的正整数:^[1-9]\d 或 ^+?[1-9][0-9]$
-
非零的负整数:^-[1-9][]0-9"*
-
非负整数:^\d+
-
非正整数:^-[1-9]\d*|0
-
非负浮点数:^\d+(.\d+)?
-
非正浮点数:^((-\d+(.\d+)?)|(0+(.0+)?))
-
正浮点数:^[1-9]\d.\d|0.\d[1-9]\d
-
负浮点数:^-([1-9]\d.\d|0.\d[1-9]\d)
-
浮点数:^(-?\d+)(.\d+)?
二、校验字符的表达式
-
汉字:^[\u4e00-\u9fa5]{0,}$
-
英文和数字:^[A-Za-z0-9]+
-
长度为3-20的所有字符:^.{3,20}$
-
由26个英文字母组成的字符串:^[A-Za-z]+$
-
由26个大写英文字母组成的字符串:^[A-Z]+$
-
由26个小写英文字母组成的字符串:^[a-z]+$
-
由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$
-
由数字、26个英文字母或者下划线组成的字符串:^\w+
-
中文、英文、数字包括下划线:^[\u4E00-\u9FA5A-Za-z0-9_]+$
-
中文、英文、数字但不包括下划线等符号:^[\u4E00-\u9FA5A-Za-z0-9]+
-
可以输入含有^%&',;=?\x22]+ 12 禁止输入含有的字符:[^\x22]+
更多推荐
所有评论(0)