学习笔记——正则匹配校验方法

玖月晴空
15,753 阅读8分钟

前言

正则在js中是一类比较特殊的对象，它可以匹配各个场景需要的格式验证，例如邮箱、手机号、用户登录名、密码等等，似乎无处不在，在常见的字符串检索或替换中，我们需要提供一种模式表示检索或替换的规则，来匹配一系列符合某个句法规则的字符串。

以下是正则的较为官方的解释：

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、replace、search 和 split 方法。

言归正传，上代码！

1. 创建正则表达式（以下有两种方式来参考）：

(1)使用正则表达式的构造函数（new 的方式来创建）

let regex = new RegExp("a")

let regex = new RegExp("^[a-zA-Z]",'g') ;    //当使用引号时不必再加反斜杠’／’

let regex = new RegExp(/^[a-zA-Z]/,'gi');      //当有斜杠时就 不用再加引号

(2)创建字面量（由两个斜杠’／／'包裹需要匹配的内容）

let regex = /ab/ ;

let regex=/^[a-zA-Z]/ ;

这两种方式都可以来创建一个正则表达式，但是相对来说第二种方式更加常用一些。

2.正则表达式的参数，写在//后面，可混合使用

字符 匹配规则 举例
global(简写：g) 全局匹配（修饰符，混合） /./g.test("asdsd") //true
ignoreCase(简写：i) 匹配全部大小写（修饰符，混合） /a/i.test("A") //true
multiline(简写：m) 多行匹配（修饰符，混合） /good/m.test("an\n good boy") //true
s 与m相反，单行匹配（修饰符，混合） /\abc\s/.test("sdf\nabc") //false
  • g 全局匹配;找到所有匹配，而不是在第一个匹配后停止
  • i 匹配全部大小写
  • m 多行; 将开始和结束字符（^和$）视为在多行上工作（也就是，分别匹配每一行的开始和结束（由 \n 或 \r 分割），而不只是只匹配整个输入字符串的最开始和最末尾处。
  • s 与m相反，单行匹配
let regex=/^[a-zA-Z]/gim ;

3. 正则中常用方法以及字符串中与正则相关的方法

（1）test()方法检索字符串中的值是否匹配给出的正则规则,返回布尔值 true或false。

检索"ab"是否匹配前面的正则表达式 /../，正确返回true，不匹配返回false

/../.test("ab");        // true。

（2）exec()方法检索字符串中的指定值，如果找到匹配的文本，则返回一个结果的数组，反之返回null。

检索正则表达式/abc/是否有在字符串中defaabc有匹配到，返回匹配到内容，索引值，以及检索的字符串

/abc/.exec("defaabc")       //  ["abc", index: 4, input: "defaabc"]

检索/qqq/是否在abcdefaabc中匹配到，返回 null

/qqq/.exec("abcdefaabc")     // null

（3）compile()方法用于改变正则匹配内容

将/abc/的匹配内容改成后面的字符串的内容

/abc/.compile('def’)    //  /def/

（4）split()将字符串分割成字符串数组，返回数组

将字符串abcd以/b/中的b分割成字符串数组

"abcd".split(/b/);       // ["a", "cd"]

（5）replace()方法用于在字符串中用一些字符替换另一些字符或者替换一个与正则表达式匹配的字符串，返回字符串

用正则内容/\d\d\d/去匹配字符串12345abcde，将匹配的内容替换成*，并返回替换完成的字符串

'12345abcde'.replace(/\d\d\d/g,'*');     //  "*45abcde"

去掉字符串的引号，全局检索'，替换成''空

'12345abcde'.replace(/'/g,'');     //12345abcde

去掉左侧空格：

'   12666'.replace( /^\s*/, '');   //12666

去掉右侧空格：

'12666  '.replace(/(\s*$)/g, "")   //12666

去掉两头空格：

'   12666  '.replace(/^\s+|\s+$/g,"")  //  12666

同样除了正则，js也有去除两头空格的方法：

'   22  33   '.trim()    //22  33

去掉字符串中所有的空格，tab,换页符，换行符

' 12 345ab cd    e '.replace(/\s/g,'');     // "12345abcde"

(6) search() 用于检索字符串中指定的字符串或与正则表达式相匹配的字符串，返回匹配的字符串的起始位置的索引，反之返回-1，返回位置

'abcdedfasdfs'.search(/d/);      // 3

即使是全局匹配，也只会匹配到第一个的位置

'abcdedfasdfs'.search(/d/g);     // 3

如果没有匹配到，返回-1

'abcdedfasdfs'.search(/o/g);     // -1

（7）match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，返回数组

检索指定的值，并返回,b+指多个

"aabbbbccbbaab".match(/b+/g);     //  ["bbbb", "bb", "b"]

4.正则规则（常用)

参考： developer.mozilla.org/zh-CN/docs/…

（1）直接量字符

字符 匹配规则 举例
\o NUL字符（\u0000）
\t 制表符（\u0009） /\t/.test(' ') //true
\n 换行，后者使光标下移一格（\u000A）
\v 垂直制表符（\u000B）
\f 换页符（\u000C）
\r 回车，前者使光标到行首（\u000D）

上述使用频率较高的为：\n、\t、\r,用来匹配已知的具体空白符。

（2）字符类

字符类 匹配规则 举例
. 除换行符和其他Unicode行终止符之外的任意字符 /..../.test('1a@L') //true
\d 等价于数字[0-9] /\d\d\d/.test('123') //true
\D 非\d外，等价于[^0-9] /\D\D\D/.test("aK#") //true
\w 数字0-9,字母a-z以及A-Z或者下划线,等价于[a-zA-Z0-9_] /\w\w\w/.test("0aZ_") //true
\W 非\w 除以上的特殊符号,等价于[^a-zA-Z0-9_] /\W\W\W/.test("!@#$%^&*()") //true
\s 任何Unicode空白符，包括空格符、Tab、换页符、换行符 /\s\s\s/.test(' ') //true
\S 任何非Unicode空白符 /\S\S\S\S\S/.test('s4*&^') //true
\ 转义字符 /^abc/.test('^abc') //true
[\b] 退格直接量

注意：\w 和 \S 不同

如果亲感觉示例代码并没有解除你的疑惑，那么接下来就来分条解释上面的每个字符的用法^0^：

（1） . 任意字符

关于这个（.）可能是匹配最多内容的字符了，它的匹配规则是除去换行(\n)和回车(/r)之外的任意字符，下面我们就来用几个示例来演示。

测试字母：

/.../.test("abc");          // true

测试数字：

/.../.test(123);            // true

特殊符号：

/………../.test("!@#$%^&*()_+")     // true

（2）\d 匹配数字0～9

测试字母：

/\d/.test("a");          // false

测试数字：

/\d/.test(5)             //true

特殊符号:

/\d\d\d\d\d\d\d\d\d\d\d\d\d/.test("!@#$%^&*()_+")    // false

（3）\D 匹配除数字0～9的所有字符（非\d）

测试字母：

/\D/.test("a");          // true

测试数字：

/\D/.test(5)             // false

特殊符号：

/\D\D/.test("!@")        // true

（4）\w 匹配数字0～9，字母a~z,A~Z,下划线

测试字母：

/\w/.test("a");          // true

测试数字：

/\w/.test(5)             // true

特殊符号：

/\w\w/.test("!@")        // false

（5）\W 匹配非\w,的特殊符号

测试字母：

/\W/.test("a");           // false

测试数字：

/\W/.test(5)              // false

特殊符号：

/\W\W/.test("!@")         // true

（6）\s 匹配空格Tab 换页 换行符

测试字母：

/\s/.test("a");          // false

测试数字：

/\s/.test(5)              // false

特殊符号：

/\s/.test("@")            // false

空格Tab：

/\s\s/.test("     ")       //true

（7）\S 匹配非\s的内容

测试字母：

/\S/.test("a");           // true

测试数字：

/\S/.test(5)              // true

特殊符号：

/\S/.test("@")           // true

空格Tab：

/\S\S/.test("     ")      // false

（3）范围符号

范围符合 匹配规则 举例
[...] 匹配字符范围之内的 /[a-z]/.test("asdfge") //true
[^...] 匹配字符范围以外的 /[^a-z]/.test("15432") //true
^ 匹配以此开头的 /^abcd/.test("abcd") //true
$ 匹配以此结尾的 /abd$/.test("abd") //true
\b 匹配零宽单词边界（前后是否有空格） /is\b/.test("this is an apple") //true
\B 非\b，即非单次边界（前后是否无空格） "eabcdef abcde".replace(/abc\B/,"*") //"e*def abcde"

（1）[...]： 匹配字符范围之内的任意一个值在其范围

/[a-z]/.test("asdfge")  // true 匹配任意一个值在`[a-z]`的范围

/[0-9]/.test("sdd55588")  // true 匹配任意一个值在`[0-9]`的范围

/a[abc]a/.test('aaa')  //  true  匹配任意一个值在`[abc]`的范围

/a[abc]a/.test('aba')  //  true  匹配任意一个值在`[abc]`的范围

/a[abc]a/.test('aca')  //  true  匹配任意一个值在`[abc]`的范围

（2）[^...]： 匹配字符范围以外的

/[^a-z]/.test("15432")   // true

（3）^ ：匹配以此开头的

/^abcd/.test("abcd")  // true

（4）$：匹配以此结尾的

/abd$/.test("abd")   // true

（5）\b：匹配单次边界

检测is两侧是否有空格的，有空格的即可匹配，并且单次匹配

/is\b/.test("this is an apple")  // true

"th is is an apple".replace(/\bis\b/,"*")  // "th * is an apple"

"th isis an apple".replace(/\bis\b/,"*")

（6）\B：非\b，即非单次边界 检测abc两侧是否都没有空格，单次匹配

"eabcdef abcde".replace(/abc\B/,"*")     //"e*def abcde"

"e abc def abc de".replace(/abc\B/,"*")  //"e abc def abc de"

"eabcdefabcde".replace(/abc\B/,"*")      // "e*defabcde"

（4）分组匹配

分组 匹配规则 举例
（x） 分组并记录匹配到的字符串 "boyboyfrinedboy".replace(/(boy){2}frined/,"*") //"* boy"
\x \x匹配第x个分组(x)重复1次 /(abc)(def)\2/.test("abcdefdef") //true
(?:x) 仅分组，此时的\x并不会指向此 /(?:abc)(?:def)(eee)\1/.test("abcdefeeeeee") //true

（1）（x）：分组并记录匹配到的字符串

"boyboyfrinedboy".replace(/(boy){2}frined/,"*")  //"* boy"

（2） \x ： \x匹配第x个分组(x)重复1次

/(abc)(def)\2/.test("abcdefdef")  // true

（3） (?:x)： 仅分组，此时的\x并不会指向此

/(?:abc)(?:def)(eee)\1/.test("abcdefeeeeee")  // ture

（5）重复匹配

重复 匹配规则 举例
x* 匹配x并匹配重复次数>=0的x（贪婪算法） abc*匹配ab,abc，abcc,abccc
x+ 匹配x并匹配重复次数>0的x（贪婪算法） abc*匹配abc，abcc,abccc,不匹配ab
x*? 只匹配x（不包含最后字符）（非贪婪算法） abc*?只匹配ab,其他不匹配
x+? 只匹配x,其他不匹配（非贪婪算法） abc+?只匹配abc,其他不匹配
x{n} 匹配x重复>=n次的内容（非贪婪算法） (abc){2}匹配abcabc,abcabcabcabc
x{n,m} 匹配x重复次数>=n,<=m（非贪婪算法） (abc){1,2}匹配abc,abcabc,不匹配abcabcabc

（1） x* ：匹配x并匹配重复次数>=0的x（贪婪算法）

abc*匹配ab,abc，abcc,abccc

（2） x+ ：匹配x并匹配重复次数>0的x,最少1个，最多不限（贪婪算法）

abc*匹配abc，abcc,abccc,不匹配ab

（3） x*? ：只匹配x（不包含最后字符）（非贪婪算法）

abc*?只匹配ab,其他不匹配

（4） x+? ：只匹配x,其他不匹配（非贪婪算法）

abc+?只匹配abc,其他不匹配

（5）x{n} ：匹配x重复>=n次的内容,最少n个，最多不限（非贪婪算法） ?等同{0,1}

(abc){2}匹配abcabc,abcabcabcabc

（6） x{n,m} ：匹配x重复次数>=n,<=m，最少n个，最多m个（非贪婪算法）

(abc){1,2}匹配abc,abcabc,不匹配abcabcabc

5.常用的正则匹配

（1）手机号

  • 移动号段： 134 135 136 137 138 139 147 148 150 151 152 157 158 159 172 178 182 183 184 187 188 198

  • 联通号段： 130 131 132 145 146 155 156 166 171 175 176 185 186

  • 电信号段： 133 149 153 173 174 177 180 181 189 199

  • 虚拟运营商: 170

匹配13*的手机号:

/^(1)3(\d){9}$/.test(13131121111)

匹配14*的手机号:

/^(1)4[5-9](\d){8}$/.test(14531121989)

匹配15*的手机号：

/^(1)5[^4]{9}$/.test(15531121989)

匹配16*的手机号：

/^(1)66(\d){8}$/.test(16631121989)

匹配17*的手机号：

/^(1)7[0-8](\d){8}$/.test(17199121989)

匹配18*的手机号：

/^(1)8(\d){9}$/.test(18131121989)

匹配19*的手机号：

/^(1)9[8-9](\d){8}$/.test(19831121989)

匹配所有手机号：

/^((1)3(\d){9}$)|(^(1)4[5-9](\d){8}$)|(^(1)5[^4]{9}$)|(^(1)66(\d){8}$)|(^(1)7[0-8](\d){8}$)|(^(1)8(\d){9}$)|(^(1)9[8-9](\d){8}$)/.test(16961121989)

（2）邮箱

  • 126规则：6~18个字符，可使用字母、数字、下划线，需以字母开头

  • 163规则：6~18个字符，可使用字母、数字、下划线，需以字母开头 允许手机号

  • qq邮箱：数字5-10个数字

  • 新浪邮箱规则：4-16个字符，可使用英文小写，数字，下划线，下划线不可在首位

  • 搜狐邮箱规则：4-16位，英文、数字、下划线，小写字母开头

匹配126邮箱：

 /((^([a-zA-Z]))(\w){5,17})@126.com$/.test("AA3333333333333333@126.com")

匹配163邮箱：

/((^([a-zA-Z]))(\w){5,17}$)|(^(1)(3(\d){9}$)|(4[5-9](\d){8}$)|(5[^4]{9})|(66(\d){8})|(7[0-8](\d){8})|(8(\d){9}$)|(9[8-9](\d){8}$))@163.com$/.test("15132221989@163.com")

匹配qq邮箱：

/(^[1-9]){5,10}@qq.com$/.test("115511@qq.com")

匹配新浪邮箱：

/^[a-z0-9]([a-z0-9_]{3,15})@sina.(com)|(cn)$/.test('223dddddddaddw22@sina.com')

匹配搜孤邮箱：

/(^[a-z])(\w){3,15}@sohu.com$/.test("dddddddfw@sohu.com")

（2）中文

/^[\u4e00-\u9fa5]$/g.test("我")

（3）国内邮政编码

/^[0-9]{6}$/.test(100000)

（4）用户名： 中文、A-Z a-z 0-9 _

/^[\w\u4e00-\u9fa5]{6,32}$/.test("晴天de_Wo")

（5）密码： A-Z a-z 0-9 _

/^\w{6,32}$/.test('2223336')

6. 最后推荐一个关于常用正则的网站 any-rule

里面有我们较常用的正则示例，随手拈来即可，使用vscode的同学可以在应用商店中搜索any-rule

下面随意给大家列几个场景验证：

  1. 必须带端口号的网址(或ip)
/^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/
  1. 股票代码(A股)
/^(s[hz]|S[HZ])(000[\d]{3}|002[\d]{3}|300[\d]{3}|600[\d]{3}|60[\d]{4})$/
  1. 中文姓名
/^(?:[\u4e00-\u9fa5·]{2,16})$/
  1. 车牌号(非新能源)
/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/

关于更多的正则验证，参考下面的地址哦👇

链接地址

。。。。。未完待续

    作者：晴天de雨滴    
    出处：https://juejin.cn/post/6844903614377361422
    版权所有，欢迎保留原文链接进行转载：希望看到我的最新文章的可以添加下关注哦！)
avatar
文章
阅读
粉丝

友情链接：