＜ JavaScript技巧：如何优雅的使用 【正则】校验 ＞

---

🏳‍🌈 大家新年好啊！ 新年第一篇文章，主要想跟大家分享一下在Javascript中正则的使用方法，以及一些常用的正则表达式，希望这篇文章能够帮助到你。

下面我们开始今天的内容吧 ！ ！！

👉 一、正则表达式的概念

正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、regexp或RE）。是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。

正则表达式是描述字符模式的对象，正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

有一点需要明确知道，正则表达式只能对字符串进行操作。

👉 二、常见使用正则表达式的方法

① RegExp 对象方法

RegExp对象，是原生JavaScript中表示正则表达式的对象；是正则表达式（regular expression）的简写。

1. 创建 RegExp 对象的语法

两种语法方式，一是新建RegExp对象，另一个直接创建。

// 语法一
var patt=new RegExp(pattern,attributes);

// 语法二
var patt=/pattern/attributes;

// 参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

/* 参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配
ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。*/

2. RegExp对象方法

方法	描述
compile	在 1.5 版本中已废弃。 编译正则表达式。
exec	检索字符串中指定的值。返回找到的值，并确定其位置。
test	检索字符串中指定的值。返回 true 或 false。
toString	返回正则表达式的字符串。

① compile(value)

compile() 可以重新指定正则实例的规则与修饰符。

var pattern = /e/i;
pattern.compile('a','g')

规则由大小写检查 e 变为全局搜索 a；

② exec(value)

检索字符串中的指定值，返回值是被找到的值。如果没有发现匹配，则返回 null 。

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

由于该字符串中存在字母 “e”，以上代码的输出将是：e

③ test(value)

检索字符串中的指定值，返回值是true或false。

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));

由于该字符串中存在字母 “e”，以上代码的输出将是：true；

③ reg.toString()

返回正则表达式的字符串值。

var patt = new RegExp("表达式", "g");
var res = patt.toString();
console.log(res); // “ /表达式/g ”

由于该字符串中存在字母 “e”，以上代码的输出将是：true；

② 支持正则表达式的 String 对象的方法

方法	描述
search	检索与正则表达式相匹配的值。
match	找到一个或多个正则表达式的匹配。
replace	替换与正则表达式匹配的子串。
split	把字符串分割为字符串数组。

1. search() 检索正则匹配字符串

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

根绝匹配规则pattern在字符串中检索指定的结果，如果检索到则返回该结果首字母在原字符中的索引，否则返回-1。其功能类似于indexOf, 只是indexOf并不支持正则匹配。

var str = "Mr. Blue has a blue house"
var n = str.search("blue");
var n1 = str.search("Mr");
console.log(n, n1); // --> 14, 0

2. match(pattern) 提取字符串中符合正则匹配的字符

match 在功能上与正则对象自带的方法exec很类似。

match 根据匹配规则pattern匹配指定的字符串str，如果匹配成功则返回一个数组格式的结果用于存放匹配文本有关的信息，如果没有匹配到则返回null。

var result = str.match(pattern);

result --> 当前的匹配结果。
result[0] --> 从数组中读取当前的匹配结果。
result[1]
.... ---> 指定分组中捕获的内容。
result[n+1]
result.index --> 当前匹配结果的首字母在给定字符串中的索引。
result.input --> 进行匹配操作的给定字符串。

如果match的匹配规则是一个正则，并且具有全局g属性，那么match返回的匹配结果，便是一个包含所有匹配结果的纯数组。

var str = 'abcdabcda';
var result = str.match(/a/g);
result --> [a,a,a]
result.input --> undefined
result.index --> undefined

3. replace() 根据正则进行字符替换

replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

var str = 'blue123blue'; 
var n=str.replace(/blue/gi,"red");
console.log(n); // red123red

4. split() 根据正则将字符串进行分隔

语法：str.split(pattern,length)

根据规则pattern将字符串拆分为数组，拆分后的数组并不包含作为拆分依据的那个参数。
默认情况下是空字符进行拆分，也就是每个任意的字符作为一个数组元素。

pattern参数，可以是正则表达式，也可以是单纯的字符或字符串。
length参数，用于设置拆分数组后数组最大的长度（即数组元素的个数）。缺省该项，表示将字符全部拆分为数组。

var str = 'hellow word!';
str.spilit(''); // --> ''空字符（并非空格字符）["h", "e", "l", "l", "o", "w", " ", "w", "o", "r", "l", "d", "!"]
str.split('',5) // --> ["h", "e", "l", "l", "o"]
str.split(/\o/g) // --> ["hell", "w w", "rld!"]

👉 三、正则修饰符

“修饰符” 其含义类似于正则实例的附加属性。用于说明正则规则适用匹配的范围。

• i : 表示区分大小写字母匹配。
• m ：表示多行匹配。
• g : 表示全局匹配。

在非全局的情况下，正则会根据指定的“规则”，从左至右 对字符串进行匹配，一旦规则匹配完，便会停止匹配操作，返回结果。

在全局的的情况下，正则会根据指定的“规则”， 从左至右 对字符串进行匹配，一旦规则匹配完，便会在当前字符串匹配位置，重新使用“规则”继续向下匹配，一直到字符串匹配完成。

注：i,g,m三个修饰符可以相互组合同时使用

👉 四、常用正则表达式（日常更新）

1. 匹配ASCII码范围

\x00 表示十进制0 ，\xff 表示十进制255，0-255 正好是ASCII码表可表示的范围。

正则： `/[\x00-\xff]/g` 
说明：同理， `/[^\x00-\xff]/g`   则表示匹配汉字或者是全角字符。

2. 匹配汉字

\u4e00 : 在Unicode码中汉字的开始编码，\u9fa5 : 在Unicode码中汉字的结束编码。

正则： `/^[\u4e00-\u9fa5]+$/` 

3. 邮政编码

邮政编码必须为数字，长度为6位且第一位不能为0，示例：224000

正则： `/[1-9]\d{5}/` 

4. 电子邮件

规则：以@为上下文表示，左侧只能是数字，字母及下划线组成。
而右侧又以.符号为上下文，左侧与上述一样，而右侧只能为字母结尾。

正则： `/^([\w\-\.]+)@([\w\-]+)\.([a-zA-Z]{2,4})$/` 

5. 验证是否含有^%&',;=?$"等违规字符

常用于名称和密码筛选特殊字符

正则： `/[^%&',;=?$\x22]+/`

6. 数值类型筛选

^[1-9]\d*$　 　 //匹配正整数
^-[1-9]\d*$ 　  //匹配负整数
^-?[1-9]\d*$　　//匹配整数
^[1-9]\d*|0$　  //匹配非负整数（正整数 + 0）
^-[1-9]\d*|0$　 //匹配非正整数（负整数 + 0）
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$　　 	//匹配正浮点数
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$　 //匹配负浮点数
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$　 //匹配浮点数
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$　　   //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$  //匹配非正浮点数（负浮点数 + 0）

7. 仅数字加英文

正则：/^[a-zA-Z0-9]+$/

8. 密码校验

6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种

/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,

9. 全正则校验登录

var reg1= /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/
if(!reg1.test(this.username)) {
	this.dialog = "用户名/手机号请输入中英文/数字/下划线";
	return false;
}

var reg2= /^.{1,50}$/
if(!reg2.test(this.username)) {
	this.dialog = "用户名/手机号长度在 1 到 50 个字符";
	return false;
}

var reg3= /^[a-zA-Z0-9_]*$/
if(!reg3.test(this.password)) {
	this.dialog = "密码请输入字母/数字/下划线";
	return false;
}

var reg4= /^.{6,24}$/
if(!reg4.test(this.password)) {
	this.dialog = "密码长度在 6 到 24 个字符";
	return false;
} 

10. 强密码正则

基础密码正则，以字母开头，长度在6~18之间，只能包含字母、数字和下划线

let isTrue =^[a-zA-Z]\w{5,17}$;

中等强度密码，必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间

let pwd = /^(?=.\d)(?=.[a-z])(?=.[A-Z]).{8,10}$/

高强度密码正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符

let isTrue = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

11. 身份证正则校验（加强型）

第一代身份证只有15位数，第二代身份证有18位数，各位按照需求来选择表达式。

//第二代身份证号码正则
 
let isTrue = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
 
//第一代身份证正则表达式(15位)
 
let isTrue=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;

12. 域名正则

let reg =[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?;  

13. 车牌号码正则

let isTrue = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;

14. 匹配特定字符

^[A-Za-z]+$　     　//匹配由26个英文字母组成的字符串
^[A-Z]+$　          //匹配由26个英文字母的大写组成的字符串
^[a-z]+$　　        //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$　　	//匹配由数字和26个英文字母组成的字符串
^\w+$　　           //匹配由数字、26个英文字母或者下划线组成的字符串 

👉 五、正则常用理论知识

1. 贪婪：+,*,?,{m,n}等，默认是贪婪匹配，即尽可能多匹配，也叫最大匹配
   如果后面加上?，就转化为非贪婪匹配，需要高版本支持；
2. 获取：默认用(x|y)是获取匹配，很多时候只是测试，不一定要求得到所匹配的数据，尤其在嵌套匹配或大数据中就要用非获取匹配 (?:x|y)，这样提高了效率，优化了程序。
3. 消耗：默认是消耗匹配，一般在预查中是非消耗匹配。
   举个例子： 2003-2-8要变为2003-02-08
   如果用 /-(\d)-/ 第二次匹配将从8开始，从而只替换第一个2，错误
   如果用 /-(\d)(?=-)/ 则第二次匹配从第二个-开始，即不消耗字符
4. 预查：js中分为正向预查和负向预查
   如上面的(?=pattern)是正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。还有(?!pattern)是负向预查，在任何不匹配 pattern 的字符串开始处匹配查找字符串。负向预查有时会用在对[^]的扩充，[^]只是一些字符，而?!可以使整个字符串。
5. 回调：一般用在替换上，即根据不用的匹配内容返回不用的替换值，从而简化了程序，需要高版本支持
6. 引用：\num 对所获取的第num个匹配的引用。
   例如，‘(.)\1\1’ 匹配AAA型。‘(.)(.)\2\1’ 匹配ABBA型。

📃 参考文献

• JavaScript RegExp 正则表达式基础详谈 - Jack_孟
• javascript中使用正则的方法有哪些
• 【VUE+Elemet 】最全正则验证 + 表单验证 + 注意事项

往期内容 💨

🔥 ＜ elementUI组件样式及功能补全： 实现点击steps组件跳转对应步骤 ＞

🔥 ＜ vueUse工具集：初识 vueUse 和 useIntersectionObserver 响应式监听目标元素的可见性，实现组件异步加载 ＞

🔥 ＜ elementUi 组件插件： el-table表格拖拽修改列宽及行高 及 使用注意事项 ＞

🔥 ＜ 今日小技巧：Axios封装，接口请求增加防抖功能 ＞