正则表达式

2019-11-04

正则表达式

#目录

1. 正则表达式是什么,有什么用,什么时候用(应用场景)
2. 如何创建正则表达式
3. 正则表达式匹配规则
4. 正则表达式和字符串

#一、 正则表达式是什么?有什么用?

• 也叫规则表达式,符合规则放行,不符合规则的拒绝
• 表单验证
• 在登录或注册或者有表单,需要验证的时候使用

#二、创建正则表达式对象

1. 字面量方式

   var reg = /js/; // 此正则用来匹配一个字符串是否包含'js'
   var str = "aaaaaajsaaaaaa";
   reg.test(str); // 用来test来验证str是否符合规则
   
   

2. new 关键字

   var reg = new RegExp("js", "i"); // i-不区分大小写,g-全局匹配,m-多行匹配
   var str = "aajsaa";
   var str2 = "aaJSaa";
   console.log(reg.test(str)); // true
   console.log(reg.test(str2)); // true
   
   

3. 字符串全局替换

   // 字符串全局替换的方法
   str = "我们是程序员,程序员是个奇怪的存在";
   var newStr = str.replace(/程序员/g, "程序猿");
   console.log(newStr);
   
   

#(三) 常用匹配规则

#(1)、元字符

1. 字母,数字都属于元字符

2. ^ 匹配字符串的开始

3. $ 匹配字符串的结束

4. 任意字符,换行符除外 .

5. \w 字母、数字、下划线

6. \s 任意空白字符

7. \d 匹配数字，等同于[0-9]

8. \D 匹配非数字，等同于[^0-9]

9. | 或匹配，如 /x|y/ 正则可匹配 x 或 y 两个字符

   /^1(3|4|5|6|7|8|9)\d\d\d\d\d\d\d\d\d$/
   /13|14/
   
   

10. [abc] 表示 包含里面的任意一个 一个[]表示一个字符,a,b,c 任意一个都符合要求

```
/^1[3456789]\d\d\d\d\d\d\d\d\d/;

```

#(2)、反义字符

1. [^x] 匹配除“x”之外的所有字符，其中“x”可以为任意字符

2. [^xyz] 同上，匹配除“x、y、z”之外的任意字符

#(3)、重复匹配

1. ？重复出现零次或一次

   /^(\+86)?1[3456789]\d\d\d\d\d\d\d\d\d$/;
   
   

2. • 重复出现一次或多次

   /^\d+$/   // 可以是1个数字或者多个数字
   
   

3. • 重复出现零次或多次

   /^abc\d*$/    // abc后面可以跟0个或多个数字
   
   

4. {n} 重复出现 n 次

   /^1[3-9]\d{9}$/   // 后面必须有9个数字
   
   

5. {n,} 至少重复出现 n 次

6. {m,n} 重复重现 m 到 n 次，其中，m

#(四) 分组

每个分组将产生分组号，从第一个括号开始，可以使用\n 的形式在正则中使用分组号， 如匹配成对出现的 HTML 标签，可以写成：

/<(\w+)><\/\1>/;

在字符串替换中使用分组

var str = "15013795539";
var newStr = str.replace(/(\d{3}\d{4})(\d{4})/, "*******$2");
console.log(newStr);

#(五) 惰性匹配

非惰性匹配: 能匹配多长就匹配多长

惰性匹配: 能少匹配就少匹配

// 非惰性匹配
var str = "我们是web前端开发工程师";
var reg = /web.*/;
str.match(reg);

// 惰性匹配
var reg = /web.*?/;
str.match(reg);

#(六) 字符串方法和正则

replace,match 等字符串方法都可以使用正则

1. 将下文所有 '程序员' 替换成 '程序猿'

   var str = `程序员（英文Programmer）是从事程序开发、程序维护的专业人员。一般将程序员分为程序设计人员和程序编码人员，但两者的界限并不非常清楚，特别是在中国。软件从业人员分为初级程序员、中级程序员、高级程序员（现为软件设计师）、系统分析员，系统架构师，测试工程师六大类。`;
   var newStr = str.replace(/程序员/g, "程序猿");
   console.log(newStr);
   
   

2. 使用 match 把网页中的图片筛选出来,match 方法会把匹配到的数据放入一个数组 数据所在地方: https://m.sdyxmall.com/v1/#/product/66430440

   str = `{"status":0,"data":{"desc":"\u003cp\u003e\u003cimg style=\"width: 750px; height: 704px;\" src=\"https://mall.s.maizuo.com/59ca0d6cf12cc2b99d194a8b68e429f2.png\"\u003e\u003cimg style=\"width: 750px; height: 704px;\" src=\"https://mall.s.maizuo.com/9d55aee4e237a85a0575f3212bfb524c.png\"\u003e\u003cimg style=\"width: 750px; height: 704px;\" src=\"https://mall.s.maizuo.com/9fdd641080def07710b19e04ff52fe79.png\"\u003e\u003cimg style=\"width: 750px; height: 704px;\" src=\"https://mall.s.maizuo.com/affb985cf659ec7a4785b12f1cf28f91.png\"\u003e\u003cimg style=\"width: 750px; height: 704px;\" src=\"https://mall.s.maizuo.com/9bea53b649aea37249d573f7cfe63a0b.png\"\u003e\u003cimg style=\"width: 750px; height: 704px;\" src=\"https://mall.s.maizuo.com/1c6fc6f5857ca053c0631c6ddc4f9521.png\"\u003e\u003cimg style=\"width: 750px; height: 704px;\" src=\"https://mall.s.maizuo.com/5b63fd9ac53d86de6f201c5f80f132d4.png\"\u003e\u003cimg style=\"width: 750px; height: 704px;\" src=\"https://mall.s.maizuo.com/7f9704314415289987a7a249573f21fb.png\"\u003e\u003cimg style=\"width: 750px; height: 708px;\" src=\"https://mall.s.maizuo.com/09ab4a8cf8cbceb373d6ef7fe7c9b875.png\"\u003e\u003cimg style=\"width: 750px; height: 481px;\" src=\"https://mall.s.maizuo.com/9c69475947f48a13be89d24189c7360b.png\"\u003e\u003cimg style=\"width: 750px; height: 219px;\" src=\"https://mall.s.maizuo.com/41dba4b3392994c28189b33ab4981d14.png\"\u003e\u003cbr\u003e\u003c/p\u003e"},"msg":"success"}`;
   str.match(/https.*?(jpg|png)/g);
   
   

#(七) 解读以下正则表达式

// 1\. 日期
/^[1-2][0-9][0-9][0-9]-[0-1]{0,1}[0-9]-[0-3]{0,1}[0-9]$/

// 2\. 手机号码
/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/

// 3\. 身份证
/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/

// 4\. 网址
/^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i

// 5\. email
/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/

// 6\. 邮编
/^[1-9]\d{5}(?!\d)$/