zl程序教程

您现在的位置是:首页 >  前端

当前栏目

正则表达式基本语法的详解

正则表达式 详解 基本 语法
2023-09-14 08:56:58 时间

正则表达式基本语法的详解

本文给给大家介绍正则表达式的基本语法,需要的朋友可以参考下

 正则表达式是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为“元字符”)。模式描述在搜索文本时要匹配的一个或多个字符串。

1.正则表达式基本语法

 

A.开头和结尾  ^ $

两个特殊的符号'^'和'$'。他们的作用是分别指出一个字符串的开始和结束。例子如下:

"^The":表示所有以"The"开始的字符串("There","The cat"等);
"of despair$":表示所以以"of despair"结尾的字符串;
"^abc$":表示开始和结尾都是"abc"的字符串——呵呵,只有"abc"自己了;
"notice":表示任何包含"notice"的字符串。

像最后那个例子,如果你不使用两个特殊字符,你就在表示要查找的串在被查找串的任意部分——你并不把它定位在某一个顶端。

 

B.重复字符 ? * +

其它还有'?' ,'*'和'+'这三个符号,表示一个或一序列字符重复出现的次数。
它们分别表示“没有或更多”、“没有或一次”、“一次或更多”。下面是几个例子:

"ab?":表示一个字符串有一个a后面跟着零个或者一个b          --("a", "ab");
"ab*":表示一个字符串有一个a后面跟着零个或若干个b           --("a", "ab", "abb", "abbb",……);
"ab+":表示一个字符串有一个a后面跟着至少一个b或者更多    --("ab", "abb", "abbb",……);
"a?b+$":表示在字符串的末尾($) 有零个或一个a, 跟着一个或几个b。

 

C.字符出现次数的范围 {}

你也可以使用范围,用大括号括起,用以表示重复次数的范围。

"ab{2}":表示一个字符串有一个a跟着2个b("abb");
"ab{2,}":表示一个字符串有一个a跟着至少2个b;    --( "abb", "abbb", "abbbb",……);
"ab{3,5}":表示一个字符串有一个a跟着3到5个b。   --( "abbb", "abbbb", "abbbbb")

请注意,你必须指定范围的下限(如:"{0,2}"而不是"{,2}")。
还有,你可能注意到了,'*','?'和'+' 相当于 "{0,}","{0,1}" 和 "{1,}" 。

 

D.或字符 |

还有一个'¦',表示“或”操作:

"hi¦hello":表示一个字符串里有"hi"或者"hello";
"(b¦cd)ef":表示"bef"或"cdef";
"(a¦b)*c":表示一串"a""b"混合的字符串后面跟一个"c"。

 

E.一个任意字符 点 .

'.'可以替代任何字符:

"a.[0-9]":表示一个字符串有一个"a"后面跟着一个任意字符和一个数字;
"^.{3}$":表示任意三个字符的字符串(长度为3个字符的所有字符串);
"^.{0,5}$":表示 0个到5个字符 的任意字符串;
".*?":表示任意不限长度字符串。

 

F.字符取值范围 []

方括号表示某些字符允许在一个字符串中的某一特定位置出现:
取值范围 限定在 方括号内的字符

"[ab]":表示一个字符串有一个"a"或"b"(相当于"a¦b");
"[a-d]":表示一个字符串包含小写的'a'到'd'中的一个(相当于"a¦b¦c¦d"或者"[abcd]");
"^[a-zA-Z]":表示一个以字母开头的字符串(大小写字母均可);
"[0-9]%":表示一个百分号前有一位的数字;
",[a-zA-Z0-9]$":表示一个字符串以一个逗号后面跟着一个字母或数字结束。

 

G.排除字符 [^XXX]

我们也可以在方括号里用'^'表示不希望出现的字符。 注意'^'应在方括号里的第一位
(如:"%[^a-zA-Z]%"表示两个百分号中不应该出现字母)

 

H.转义字符 \

为了逐字原样表达,你必须在 ^ . $ ( ) ¦ *+? { \  这些字符前加上转移字符'\' (反斜杠)。

注意在方括号中,不需要转义字符(方括号内可以直接使用^.$()¦*+?{\  来代表数据而不是带操作功能的元字符)。

 
 

二、正则表达式的元字符

正则表达式由一些普通字符和一些元字符(metacharacters)组成。普通字符包括大小写的字母和数字,而元字符则具有特殊的含义,我们下面会给予解释。
 
元字符
描述
\
将下一个字符标记符、或一个向后引用、或一个八进制转义符。例如,“\\n”匹配\n。“\n”匹配换行符。序列“\\”匹配“\”而“\(”则匹配“(”。即相当于多种编程语言中都有的“转义字符”的概念。
^
匹配输入字行首。如果设置了RegExp对象的Multiline属性,^也匹配“\n”或“\r”之后的位置。
$
匹配输入行尾。如果设置了RegExp对象的Multiline属性,$也匹配“\n”或“\r”之前的位置。
*
匹配前面的子表达式任意次。例如,zo*能匹配“z”,也能匹配“zo”以及“zoo”。*等价于{0,}。
+
匹配前面的子表达式一次或多次(大于等于1次)。例如,“zo+”能匹配“zo”以及“zoo”,但不能匹配“z”。+等价于{1,}。
?
匹配前面的子表达式零次或一次。例如,“do(es)?”可以匹配“do”或“does”。?等价于{0,1}。
{n}
n是一个非负整数。匹配确定的n次。例如,“o{2}”不能匹配“Bob”中的“o”,但是能匹配“food”中的两个o。
{n,}
n是一个非负整数。至少匹配n次。例如,“o{2,}”不能匹配“Bob”中的“o”,但能匹配“foooood”中的所有o。“o{1,}”等价于“o+”。“o{0,}”则等价于“o*”。
{n,m}
mn均为非负整数,其中n<=m。最少匹配n次且最多匹配m次。例如,“o{1,3}”将匹配“fooooood”中的前三个o为一组,后三个o为一组。“o{0,1}”等价于“o?”。请注意在逗号和两个数之间不能有空格。
?
当该字符紧跟在任何一个其他限制符(*,+,?,{n},{n,},{n,m})后面时,匹配模式是非贪婪的。非贪婪模式尽可能少地匹配所搜索的字符串,而默认的贪婪模式则尽可能多地匹配所搜索的字符串。例如,对于字符串“oooo”,“o+”将尽可能多地匹配“o”,得到结果[“oooo”],而“o+?”将尽可能少地匹配“o”,得到结果 ['o', 'o', 'o', 'o']
.点
匹配除“\n”和"\r"之外的任何单个字符。要匹配包括“\n”和"\r"在内的任何字符,请使用像“[\s\S]”的模式。
(pattern)
匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到,在VBScript中使用SubMatches集合,在JScript中则使用$0…$9属性。要匹配圆括号字符,请使用“\(”或“\)”。
(?:pattern)
非获取匹配,匹配pattern但不获取匹配结果,不进行存储供以后使用。这在使用或字符“(|)”来组合一个模式的各个部分时很有用。例如“industr(?:y|ies)”就是一个比“industry|industries”更简略的表达式。
(?=pattern)
非获取匹配,正向肯定预查,在任何匹配pattern的字符串开始处匹配查找字符串,该匹配不需要获取供以后使用。例如,“Windows(?=95|98|NT|2000)”能匹配“Windows2000”中的“Windows”,但不能匹配“Windows3.1”中的“Windows”。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。
(?!pattern)
非获取匹配,正向否定预查,在任何不匹配pattern的字符串开始处匹配查找字符串,该匹配不需要获取供以后使用。例如“Windows(?!95|98|NT|2000)”能匹配“Windows3.1”中的“Windows”,但不能匹配“Windows2000”中的“Windows”。
(?<=pattern)
非获取匹配,反向肯定预查,与正向肯定预查类似,只是方向相反。例如,“(?<=95|98|NT|2000)Windows”能匹配“2000Windows”中的“Windows”,但不能匹配“3.1Windows”中的“Windows”。
*python的正则表达式没有完全按照正则表达式规范实现,所以一些高级特性建议使用其他语言如java、scala等
(?<!pattern)
非获取匹配,反向否定预查,与正向否定预查类似,只是方向相反。例如“(?<!95|98|NT|2000)Windows”能匹配“3.1Windows”中的“Windows”,但不能匹配“2000Windows”中的“Windows”。
*python的正则表达式没有完全按照正则表达式规范实现,所以一些高级特性建议使用其他语言如java、scala等
x|y
匹配x或y。例如,“z|food”能匹配“z”或“food”(此处请谨慎)。“[z|f]ood”则匹配“zood”或“food”。
[xyz]
字符集合。匹配所包含的任意一个字符。例如,“[abc]”可以匹配“plain”中的“a”。
[^xyz]
负值字符集合。匹配未包含的任意字符。例如,“[^abc]”可以匹配“plain”中的“plin”任一字符。
[a-z]
字符范围。匹配指定范围内的任意字符。例如,“[a-z]”可以匹配“a”到“z”范围内的任意小写字母字符。
注意:只有连字符在字符组内部时,并且出现在两个字符之间时,才能表示字符的范围; 如果出字符组的开头,则只能表示连字符本身.
[^a-z]
负值字符范围。匹配任何不在指定范围内的任意字符。例如,“[^a-z]”可以匹配任何不在“a”到“z”范围内的任意字符。
\b
匹配一个单词的边界,也就是指单词和空格间的位置(即正则表达式的“匹配”有两种概念,一种是匹配字符,一种是匹配位置,这里的\b就是匹配位置的)。例如,“er\b”可以匹配“never”中的“er”,但不能匹配“verb”中的“er”;“\b1_”可以匹配“1_23”中的“1_”,但不能匹配“21_3”中的“1_”。
\B
匹配非单词边界。“er\B”能匹配“verb”中的“er”,但不能匹配“never”中的“er”。
\cx
匹配由x指明的控制字符。例如,\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则,将c视为一个原义的“c”字符。
\d
匹配一个数字字符。等价于[0-9]。grep 要加上-P,perl正则支持
\D
匹配一个非数字字符。等价于[^0-9]。grep要加上-P,perl正则支持
\f
匹配一个换页符。等价于\x0c和\cL。
\n
匹配一个换行符。等价于\x0a和\cJ。
\r
匹配一个回车符。等价于\x0d和\cM。
\s
匹配任何不可见字符,包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。
\S
匹配任何可见字符。等价于[^ \f\n\r\t\v]。
\t
匹配一个制表符。等价于\x09和\cI。
\v
匹配一个垂直制表符。等价于\x0b和\cK。
\w
匹配包括下划线的任何单词字符。类似但不等价于“[A-Za-z0-9_]”,这里的"单词"字符使用Unicode字符集。
\W
匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。
\xn
匹配n,其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如,“\x41”匹配“A”。“\x041”则等价于“\x04&1”。正则表达式中可以使用ASCII编码。
\num
匹配num,其中num是一个正整数。对所获取的匹配的引用。例如,“(.)\1”匹配两个连续的相同字符。
\n
标识一个八进制转义值或一个向后引用。如果\n之前至少n个获取的子表达式,则n为向后引用。否则,如果n为八进制数字(0-7),则n为一个八进制转义值。
\nm
标识一个八进制转义值或一个向后引用。如果\nm之前至少有nm个获得子表达式,则nm为向后引用。如果\nm之前至少有n个获取,则n为一个后跟文字m的向后引用。如果前面的条件都不满足,若nm均为八进制数字(0-7),则\nm将匹配八进制转义值nm
\nml
如果n为八进制数字(0-7),且ml均为八进制数字(0-7),则匹配八进制转义值nml
\un
匹配n,其中n是一个用四个十六进制数字表示的Unicode字符。例如,\u00A9匹配版权符号(&copy;)。
\p{P}
小写 p 是 property 的意思,表示 Unicode 属性,用于 Unicode 正表达式的前缀。中括号内的“P”表示Unicode 字符集七个字符属性之一:标点字符。
其他六个属性:
L:字母;
M:标记符号(一般不会单独出现);
Z:分隔符(比如空格、换行等);
S:符号(比如数学符号、货币符号等);
N:数字(比如阿拉伯数字、罗马数字等);
C:其他字符。
*注:此语法部分语言不支持,例:javascript。
\<
\>
匹配词(word)的开始(\<)和结束(\>)。例如正则表达式\<the\>能够匹配字符串"for the wise"中的"the",但是不能匹配字符串"otherwise"中的"the"。注意:这个元字符不是所有的软件都支持的。
( )
将( 和 ) 之间的表达式定义为“组”(group),并且将匹配这个表达式的字符保存到一个临时区域(一个正则表达式中最多可以保存9个),它们可以用 \1 到\9 的符号来引用。
|
将两个匹配条件进行逻辑“或”(or)运算。例如正则表达式(him|her) 匹配"it belongs to him"和"it belongs to her",但是不能匹配"it belongs to them."。注意:这个元字符不是所有的软件都支持的。
最简单的元字符是点,它能够匹配任何单个字符(注意不包括换行符)。
 

 三、常用的正则表达式汇总

 3.1、手机号码的校验
phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
 
const phoneStr1 = '18886233487'
console.log(phoneReg.test(phoneStr1)) // true
 
const phoneStr2 = '17283017203897'
console.log(phoneReg.test(phoneStr2)) // false

 

2、身份证的校验
const sfzReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
 
sfzStr1 = '415106199801012130'  // true
sfzStr2 = '718381298381212183' // false

 

3、邮箱的校验
const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/

 

4、URL的校验
const urlReg = /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
 
const urlStr1 = 'https://haha.sunshine.com/xxx/xxx'
console.log(urlReg.test(urlStr1)) // true 
const urlStr2 = 'sss://haha.sunshine.com/xxx/xxx'
console.log(urlReg.test(urlStr2)) // false

 

5、IPv4的校验
const ipv4Reg = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
 
const ipv4Str1 = '122.12.56.65'
console.log(ipv4Reg.test(ipv4Str1)) // true
const ipv4Str2 = '122.12.56.655'
console.log(ipv4Reg.test(ipv4Str2)) // false

 

6、16进制颜色的校验
const color16Reg = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
 
const color16Str1 = '#fff'
console.log(color16Reg.test(color16Str1)) // true 
const color16Str2 = '#1234567'
console.log(color16Reg.test(color16Str2)) // false

 

7、日期 YYYY-MM-DD
const dateReg = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/
 
const dateStr1 = '2021-10-10'
console.log(dateReg.test(dateStr1)) // true
const dateStr2 = '2021-01-01 1'
console.log(dateReg.test(dateStr2)) // false

 

8、日期 YYYY-MM-DD hh:mm:ss
const dateReg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/
 
const dateStr1 = '2021-10-10 16:16:16'
console.log(dateReg.test(dateStr1)) // true 
const dateStr2 = '2021-10-10 16:'
console.log(dateReg.test(dateStr2)) // false
 
9、整数的校验
const intReg = /^[-+]?\d*$/
 
const intNum1 = 12345
console.log(intReg.test(intNum1)) // true
 const intNum2 = 12345.1
 console.log(intReg.test(intNum2)) // false
 
10、小数的校验
const floatReg = /^[-\+]?\d+(\.\d+)?$/
 
const floatNum = 1234.5
console.log(floatReg.test(floatNum)) // true
 
11、保留n位小数
function checkFloat(n) {
  return new RegExp(`^([1-9]+[\d]*(.[0-9]{1,${n}})?)$`)
}
// 保留2位小数
const floatReg = checkFloat(2)
const floatNum1 = 1234.5
console.log(floatReg.test(floatNum1)) // true
 const floatNum2 = 1234.55
 console.log(floatReg.test(floatNum2)) // true 
const floatNum3 = 1234.555
console.log(floatReg.test(floatNum3)) // false

 

12、邮政编号的校验
const postalNoReg = /^\d{6}$/
 
const postalNoStr1 = '522000'
console.log(postalNoReg.test(postalNoStr1)) // true
  const postalNoStr2 = '5220000'
  console.log(postalNoReg.test(postalNoStr2)) // false
 
13、QQ号的校验
说明:5-11位数字
const qqReg = /^[1-9][0-9]{4,10}$/
  
const qqStr1 = '1915801633'
console.log(qqReg.test(qqStr1)) // true
  const qqStr2 = '191580163333'
  console.log(qqReg.test(qqStr2)) // false
 
14、微信号的校验
说明:6至20位,以字母开头,字母,数字,减号,下划线
const wxReg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/
  
const wxStr1 = 'linsanxin885577'
console.log(wxReg.test(wxStr1)) // true
   const wxStr2 = '厉害了我的vx'
  console.log(wxReg.test(wxStr2)) // false
 
15、车牌号的校验
const carNoReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
  
const carNoStr1 = '粤A12345'
console.log(carNoReg.test(carNoStr1)) // true
   const carNoStr2 = '广东A12345'
  console.log(carNoReg.test(carNoStr2)) // false
 
16、只含字母的字符串
const letterReg = /^[a-zA-Z]+$/
  
const letterStr1 = 'sunshineLin'
console.log(letterReg.test(letterStr1)) // true
   const letterStr2 = 'sunshine_Lin'
  console.log(letterReg.test(letterStr2)) // false
 
17、包含中文的字符串
const cnReg = /[\u4E00-\u9FA5]/
 
const cnStr1 = '我是sunshine_Lin,林三心'
console.log(cnReg.test(cnStr1)) // true
   const cnStr2 = 'sunshine_Lin'
  console.log(cnReg.test(cnStr2)) // false
 
18、密码强度的校验
说明:密码中必须包含字母、数字、特称字符,至少8个字符,最多30个字符
const passwordReg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/
 
const password1 = 'sunshine_Lin12345..'
console.log(passwordReg.test(password1)) // true
   const password2 = 'sunshineLin12345'
  console.log(passwordReg.test(password2)) // false
 
19、字符串长度n的校验
function checkStrLength(n) {
  return new RegExp(`^.{${n}}$`)
} 
 
// 校验长度为3的字符串
const lengthReg = checkStrLength(3)
  const str1 = 'hhh'
  console.log(lengthReg.test(str1)) // true
const str2 = 'hhhhh'
console.log(lengthReg.test(str2)) // false

 

20、文件拓展名的校验
function checkFileName (arr) {
  arr = arr.map(name => `.${name}`).join('|')
  return new RegExp(`(${arr})$`)
}
 
const filenameReg = checkFileName(['jpg', 'png', 'txt']) 
const filename1 = 'sunshine.jpg'
console.log(filenameReg.test(filename1)) // true
const filename2 = 'sunshine.png'
console.log(filenameReg.test(filename2)) // true
const filename3 = 'sunshine.txt'
console.log(filenameReg.test(filename3)) // true
const filename4 = 'sunshine.md'
console.log(filenameReg.test(filename4)) // false

 

21、匹配img和src
const imgReg = /<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/ig
 
const htmlStr = '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />' 
console.log(imgReg.exec(htmlStr))
// [
//   '<img src="sunshine.png" />',
//   'sunshine.png',
//   index: 11,
//   input: '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />',
//   groups: undefined
// ]
console.log(imgReg.exec(htmlStr))
// [
//   '<img src="sunshine111.png" />',
//   'sunshine111.png',
//   index: 37,
//   input: '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />',
//   groups: undefined
// ]

 

22、匹配html中的注释
const noteReg = /<!--(.*?)-->/g
 
const htmlStr = '<!--一个div标签--> <div></div> <!--一个div标签--> <div></div>'
console.log(noteReg.exec(htmlStr))
// [
//   '<!--一个div标签-->',
//   '一个div标签',
//   index: 0,
//   input: '<!--一个div标签--> <div></div> <!--一个div标签--> <div></div>',
//   groups: undefined
// ]
console.log(noteReg.exec(htmlStr))
// [
//   '<!--一个div标签-->',
//   '一个div标签',
//   index: 27,
//   input: '<!--一个div标签--> <div></div> <!--一个div标签--> <div></div>',
//   groups: undefined
// ]

 

23、匹配html中的style
const styleReg = /([(\s+\w+=)|>])/g
const htmlStr = '<div><span></span></div>'
console.log(styleReg.exec(htmlStr))
// [
//   '>',
//   '>',
//   index: 5,
//   input: '<div><span></span></div>',
//   groups: undefined
// ]
console.log(styleReg.exec(htmlStr))
// [
//   '>',
//   '>',
//   index: 36,
//   input: '<div><span></span></div>',
//   groups: undefined
// ]

 

24、匹配html中的颜色
const colorReg = /#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/g
const htmlStr = '<div><span></span></div>'
console.log(colorReg.exec(htmlStr))
// [
//   '#000',
//   '000',
//   index: 23,
//   input: '<div><span></span></div>',
//   groups: undefined
// ]
console.log(colorReg.exec(htmlStr))
// [
//   '#fff',
//   'fff',
//   index: 49,
//   input: '<div><span></span></div>',
//   groups: undefined
// ]

 

25、匹配htmlTag(html标签)
const endReg = /<("[^"]*"|'[^']*'|[^'">])*>/g
const htmlStr = '<div><span></span></div><h1></h1>'
console.log(endReg.exec(htmlStr))
console.log(endReg.exec(htmlStr))
console.log(endReg.exec(htmlStr))
console.log(endReg.exec(htmlStr))
console.log(endReg.exec(htmlStr))
console.log(endReg.exec(htmlStr))

 

 
 

·

 

1、手机号码的校验


  1.  
    const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
  2.  
     
  3.  
     
  4.  
    const phoneStr1 = '18886233487'
  5.  
    console.log(phoneReg.test(phoneStr1)) // true
  6.  
     
  7.  
     
  8.  
    const phoneStr2 = '17283017203897'
  9.  
    console.log(phoneReg.test(phoneStr2)) // false

2、身份证的校验


  1.  
    const sfzReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  2.  
     
  3.  
     
  4.  
    const sfzStr1 = '415106199801012130'
  5.  
    console.log(sfzReg.test(sfzStr1)) // true
  6.  
     
  7.  
     
  8.  
    const sfzStr2 = '718381298381212183'
  9.  
    console.log(sfzReg.test(sfzStr2)) // false

3、邮箱的校验


  1.  
    const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
  2.  
     
  3.  
     
  4.  
    const emailStrWY = '956666@163.com' // 163邮箱
  5.  
    const emailStrQQ = '956666@qq.com' // qq邮箱
  6.  
    console.log(emailReg.test(emailStrWY)) // true
  7.  
    console.log(emailReg.test(emailStrQQ)) // true
  8.  
     
  9.  
     
  10.  
    const noEmail = '72873213.com'
  11.  
    console.log(emailReg.test(noEmail)) // false

4、URL的校验


  1.  
    const urlReg = /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
  2.  
     
  3.  
     
  4.  
    const urlStr1 = 'https://haha.sunshine.com/xxx/xxx'
  5.  
    console.log(urlReg.test(urlStr1)) // true
  6.  
     
  7.  
     
  8.  
    const urlStr2 = 'sss://haha.sunshine.com/xxx/xxx'
  9.  
    console.log(urlReg.test(urlStr2)) // false

5、IPv4的校验


  1.  
    const ipv4Reg = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
  2.  
     
  3.  
     
  4.  
    const ipv4Str1 = '122.12.56.65'
  5.  
    console.log(ipv4Reg.test(ipv4Str1)) // true
  6.  
     
  7.  
     
  8.  
    const ipv4Str2 = '122.12.56.655'
  9.  
    console.log(ipv4Reg.test(ipv4Str2)) // false

6、16进制颜色的校验


  1.  
    const color16Reg = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
  2.  
     
  3.  
     
  4.  
    const color16Str1 = '#fff'
  5.  
    console.log(color16Reg.test(color16Str1)) // true
  6.  
     
  7.  
     
  8.  
    const color16Str2 = '#1234567'
  9.  
    console.log(color16Reg.test(color16Str2)) // false

7、日期 YYYY-MM-DD


  1.  
    const dateReg = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/
  2.  
     
  3.  
     
  4.  
    const dateStr1 = '2021-10-10'
  5.  
    console.log(dateReg.test(dateStr1)) // true
  6.  
     
  7.  
     
  8.  
    const dateStr2 = '2021-01-01 1'
  9.  
    console.log(dateReg.test(dateStr2)) // false

8、日期 YYYY-MM-DD hh:mm:ss


  1.  
    const dateReg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/
  2.  
     
  3.  
     
  4.  
    const dateStr1 = '2021-10-10 16:16:16'
  5.  
    console.log(dateReg.test(dateStr1)) // true
  6.  
     
  7.  
     
  8.  
    const dateStr2 = '2021-10-10 16:'
  9.  
    console.log(dateReg.test(dateStr2)) // false

9、整数的校验


  1.  
    const intReg = /^[-+]?\d*$/
  2.  
     
  3.  
     
  4.  
    const intNum1 = 12345
  5.  
    console.log(intReg.test(intNum1)) // true
  6.  
     
  7.  
     
  8.  
    const intNum2 = 12345.1
  9.  
    console.log(intReg.test(intNum2)) // false

10、小数的校验


  1.  
    const floatReg = /^[-\+]?\d+(\.\d+)?$/
  2.  
     
  3.  
     
  4.  
    const floatNum = 1234.5
  5.  
    console.log(floatReg.test(floatNum)) // true

11、保留n位小数


  1.  
    function checkFloat(n) {
  2.  
    return new RegExp(`^([1-9]+[\d]*(.[0-9]{1,${n}})?)$`)
  3.  
    }
  4.  
    // 保留2位小数
  5.  
    const floatReg = checkFloat(2)
  6.  
     
  7.  
     
  8.  
    const floatNum1 = 1234.5
  9.  
    console.log(floatReg.test(floatNum1)) // true
  10.  
     
  11.  
     
  12.  
    const floatNum2 = 1234.55
  13.  
    console.log(floatReg.test(floatNum2)) // true
  14.  
     
  15.  
     
  16.  
    const floatNum3 = 1234.555
  17.  
    console.log(floatReg.test(floatNum3)) // false

12、邮政编号的校验


  1.  
    const postalNoReg = /^\d{6}$/
  2.  
     
  3.  
     
  4.  
    const postalNoStr1 = '522000'
  5.  
    console.log(postalNoReg.test(postalNoStr1)) // true
  6.  
     
  7.  
     
  8.  
    const postalNoStr2 = '5220000'
  9.  
    console.log(postalNoReg.test(postalNoStr2)) // false

13、QQ号的校验

说明:5-11位数字


  1.  
    const qqReg = /^[1-9][0-9]{4,10}$/
  2.  
     
  3.  
     
  4.  
    const qqStr1 = '1915801633'
  5.  
    console.log(qqReg.test(qqStr1)) // true
  6.  
     
  7.  
     
  8.  
    const qqStr2 = '191580163333'
  9.  
    console.log(qqReg.test(qqStr2)) // false

14、微信号的校验

说明:6至20位,以字母开头,字母,数字,减号,下划线


  1.  
    const wxReg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/
  2.  
     
  3.  
     
  4.  
    const wxStr1 = 'linsanxin885577'
  5.  
    console.log(wxReg.test(wxStr1)) // true
  6.  
     
  7.  
     
  8.  
    const wxStr2 = '厉害了我的vx'
  9.  
    console.log(wxReg.test(wxStr2)) // false

15、车牌号的校验


  1.  
    const carNoReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
  2.  
     
  3.  
     
  4.  
    const carNoStr1 = '粤A12345'
  5.  
    console.log(carNoReg.test(carNoStr1)) // true
  6.  
     
  7.  
     
  8.  
    const carNoStr2 = '广东A12345'
  9.  
    console.log(carNoReg.test(carNoStr2)) // false

16、只含字母的字符串


  1.  
    const letterReg = /^[a-zA-Z]+$/
  2.  
     
  3.  
     
  4.  
    const letterStr1 = 'sunshineLin'
  5.  
    console.log(letterReg.test(letterStr1)) // true
  6.  
     
  7.  
     
  8.  
    const letterStr2 = 'sunshine_Lin'
  9.  
    console.log(letterReg.test(letterStr2)) // false

17、包含中文的字符串


  1.  
    const cnReg = /[\u4E00-\u9FA5]/
  2.  
     
  3.  
     
  4.  
    const cnStr1 = '我是sunshine_Lin,林三心'
  5.  
    console.log(cnReg.test(cnStr1)) // true
  6.  
     
  7.  
     
  8.  
    const cnStr2 = 'sunshine_Lin'
  9.  
    console.log(cnReg.test(cnStr2)) // false

18、密码强度的校验

说明:密码中必须包含字母、数字、特称字符,至少8个字符,最多30个字符


  1.  
    const passwordReg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/
  2.  
     
  3.  
     
  4.  
    const password1 = 'sunshine_Lin12345..'
  5.  
    console.log(passwordReg.test(password1)) // true
  6.  
     
  7.  
     
  8.  
    const password2 = 'sunshineLin12345'
  9.  
    console.log(passwordReg.test(password2)) // false

19、字符串长度n的校验


  1.  
    function checkStrLength(n) {
  2.  
    return new RegExp(`^.{${n}}$`)
  3.  
    }
  4.  
     
  5.  
     
  6.  
    // 校验长度为3的字符串
  7.  
    const lengthReg = checkStrLength(3)
  8.  
     
  9.  
     
  10.  
    const str1 = 'hhh'
  11.  
    console.log(lengthReg.test(str1)) // true
  12.  
     
  13.  
     
  14.  
    const str2 = 'hhhhh'
  15.  
    console.log(lengthReg.test(str2)) // false

20、文件拓展名的校验


  1.  
    function checkFileName (arr) {
  2.  
    arr = arr.map(name => `.${name}`).join('|')
  3.  
    return new RegExp(`(${arr})$`)
  4.  
    }
  5.  
     
  6.  
     
  7.  
    const filenameReg = checkFileName(['jpg', 'png', 'txt'])
  8.  
     
  9.  
     
  10.  
    const filename1 = 'sunshine.jpg'
  11.  
    console.log(filenameReg.test(filename1)) // true
  12.  
    const filename2 = 'sunshine.png'
  13.  
    console.log(filenameReg.test(filename2)) // true
  14.  
    const filename3 = 'sunshine.txt'
  15.  
    console.log(filenameReg.test(filename3)) // true
  16.  
    const filename4 = 'sunshine.md'
  17.  
    console.log(filenameReg.test(filename4)) // false

21、匹配img和src


  1.  
    const imgReg = /<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/ig
  2.  
     
  3.  
     
  4.  
    const htmlStr = '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />'
  5.  
     
  6.  
     
  7.  
    console.log(imgReg.exec(htmlStr))
  8.  
    // [
  9.  
    // '<img src="sunshine.png" />',
  10.  
    // 'sunshine.png',
  11.  
    // index: 11,
  12.  
    // input: '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />',
  13.  
    // groups: undefined
  14.  
    // ]
  15.  
    console.log(imgReg.exec(htmlStr))
  16.  
    // [
  17.  
    // '<img src="sunshine111.png" />',
  18.  
    // 'sunshine111.png',
  19.  
    // index: 37,
  20.  
    // input: '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />',
  21.  
    // groups: undefined
  22.  
    // ]

22、匹配html中的注释


  1.  
    const noteReg = /<!--(.*?)-->/g
  2.  
     
  3.  
     
  4.  
    const htmlStr = '<!--一个div标签--> <div></div> <!--一个div标签--> <div></div>'
  5.  
     
  6.  
     
  7.  
    console.log(noteReg.exec(htmlStr))
  8.  
    // [
  9.  
    // '<!--一个div标签-->',
  10.  
    // '一个div标签',
  11.  
    // index: 0,
  12.  
    // input: '<!--一个div标签--> <div></div> <!--一个div标签--> <div></div>',
  13.  
    // groups: undefined
  14.  
    // ]
  15.  
    console.log(noteReg.exec(htmlStr))
  16.  
    // [
  17.  
    // '<!--一个div标签-->',
  18.  
    // '一个div标签',
  19.  
    // index: 27,
  20.  
    // input: '<!--一个div标签--> <div></div> <!--一个div标签--> <div></div>',
  21.  
    // groups: undefined
  22.  
    // ]

23、匹配html中的style


  1.  
    const styleReg = /([(\s+\w+=)|>])/g
  2.  
     
  3.  
     
  4.  
    const htmlStr = '<div><span></span></div>'
  5.  
     
  6.  
     
  7.  
    console.log(styleReg.exec(htmlStr))
  8.  
    // [
  9.  
    // '>',
  10.  
    // '>',
  11.  
    // index: 5,
  12.  
    // input: '<div><span></span></div>',
  13.  
    // groups: undefined
  14.  
    // ]
  15.  
    console.log(styleReg.exec(htmlStr))
  16.  
    // [
  17.  
    // '>',
  18.  
    // '>',
  19.  
    // index: 36,
  20.  
    // input: '<div><span></span></div>',
  21.  
    // groups: undefined
  22.  
    // ]

24、匹配html中的颜色


  1.  
    const colorReg = /#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/g
  2.  
     
  3.  
     
  4.  
    const htmlStr = '<div><span></span></div>'
  5.  
     
  6.  
     
  7.  
    console.log(colorReg.exec(htmlStr))
  8.  
    // [
  9.  
    // '#000',
  10.  
    // '000',
  11.  
    // index: 23,
  12.  
    // input: '<div><span></span></div>',
  13.  
    // groups: undefined
  14.  
    // ]
  15.  
    console.log(colorReg.exec(htmlStr))
  16.  
    // [
  17.  
    // '#fff',
  18.  
    // 'fff',
  19.  
    // index: 49,
  20.  
    // input: '<div><span></span></div>',
  21.  
    // groups: undefined
  22.  
    // ]

25、匹配htmlTag(html标签)


  1.  
    const endReg = /<("[^"]*"|'[^']*'|[^'">])*>/g
  2.  
     
  3.  
     
  4.  
    const htmlStr = '<div><span></span></div><h1></h1>'
  5.  
     
  6.  
     
  7.  
    console.log(endReg.exec(htmlStr))
  8.  
    console.log(endReg.exec(htmlStr))
  9.  
    console.log(endReg.exec(htmlStr))
  10.  
    console.log(endReg.exec(htmlStr))
  11.  
    console.log(endReg.exec(htmlStr))
  12.  
    console.log(endReg.exec(htmlStr))