第三十三节: JavaScript 正则表达式

正则表达式

1. 理解转义

转义即转换意义,改变意义

1. 转义符号 \
2. 转义字符 \字符( 把原有的字符转换意义)

var str = '你是很"牛逼"的一个人'
// 如果我就想包裹单引号
var str = '你是很'牛逼'的一个人''
// 直接只用发现牛逼会变成一个变量,变量和字符串这么拼接就是错的

var str = '你是很\'牛逼\'的一个人'' 
// \' 就是转义字符

// 同样的\ 代表转义,那么我就想在网页中显示\ 就可以用转义
var str = '你是很\\牛逼\\的一个人'' 

有一些规定好的转义字符

\n 换行 \t 制表符 \r 回车

2. 正则表达式

2.1 什么是正则表达式

正则表达式是字符串的一种匹配模式，专门为简化字符串操作而生

j简单点说就是为了检索字符串中特定字符的规则,

正则并不是单纯的字符串,而是一种逻辑公式

2.2. 创建正则表达式

创建正则的两种方式

1. 通过构造函数创建

   var reg = new RegExp();

2. 字面量的方式创建

   var reg = / /;

2.2.1 构造函数创建正则

js给我们提供了一个内置构造函数用来创建正则 RegExp

RegExp 其实是由两个单词构成的

regular expression 正规的表达式

正则表达式是一个通过内置的构造函数构造出来的对象

var reg = new RegExp('text');  // 实例化一个正则对象

构造函数参数

1. 第一参数是正则
2. 第二个参数是修饰符 i g m

例子

var reg = new RegExp('text');  // 实例化一个正则对象
var str = 'This is a text';
console.log(reg.test(str));   // true;
// test()方法就是以正则为规则检查字符串中是否包含正则内容

2.2.2 .字面量(直接量)创建正则

var reg = /text/;
var str = 'This is a text';
console.log(reg.test(str));   // true;
// test()方法就是以正则为规则检查字符串中是否包含正则内容

2.2.3 使用正则使用注意

这两种方式我们使用哪一种那,按照我们以往的经验,推荐使用字面量的方式

但是有的时候只能使用构造函数,比如变量

var v = 'text';
var reg = /v/;            // 这样写正则就匹配v了
var reg = new RegExp(v);  // 所以这种情况就只能用构造函数方法了

2.3. 正则表达式的方法

2.3.1 test

正则对象的一个方法，它表示该字符串（参数）是否匹配我们的正则规则。

使用方式

​ reg.test(str)

参数

​ str: 是需要查询(匹配)的字符串

返回值

​ 布尔值,匹配成功返回true,否则返回false

var reg = /wuwei/;
var str = 'hello wuwei';  
// 判断str字符串是否匹配我们reg规则
console.log(reg.test(str));

2.3.2 exec

提取匹配成功的子字符串

使用方式

​ reg.exec(str)

参数

​ str: 是需要查询(匹配)的字符串

返回值

​ 布尔值

var reg = /wuwei/g;
var str = 'hello wuwei wuwei aaa';
// 判断str字符串是否匹配我们reg规则
console.log(reg.exec(str));
// ["wuwei", index: 6, input: "hello wuwei wuwei aaa", groups: undefined]

字符串的match方法也能实现相同的功能

var reg = /wuwei/g;
var str = 'hello wuwei wuweiaaa';
// 判断str字符串是否匹配我们reg规则
console.log(str.match(reg));
// ["wuwei", "wuwei"]

2.3.3 可以使用正则的字符串方法

1. search 获取字符在字符串中的位置
2. split 字符串转化成数组
3. replace 字符串替换

2.4. 修饰符

1. i 表示不区分大小写 ignoreCase
2. g 表示全局匹配 global
3. m 表示换行匹配 multiline

2.4.1 不区分大小写

字符串片段,大小写默认敏感,默认区分大小写

// 不区分大小写
var reg = new RegExp('Text');  // 实例化一个正则对象
var str = 'This is a text';
console.log(reg.test(str));   // false;

//  区分大小写
var reg = new RegExp('Text','i');  // 实例化一个正则对象
var str = 'This is a text';
console.log(reg.test(str));   // true;

2.4.2全局匹配

默认值匹配一个

// 不加全局匹配
var reg = new RegExp('text');  // 实例化一个正则对象
var str = 'This is a text and text and text';
console.log(str.match(reg));
// ["text", index: 10, input: "This is a text and text and text", groups: undefined]

// 加全局匹配修饰符
var reg = new RegExp('text','g');  // 实例化一个正则对象
var str = 'This is a text and text and text';
console.log(str.match(reg));
// ["text", "text", "text"]

2.4.3 多行匹配

var reg = new RegExp('^Text');  // 实例化一个正则对象
var str = 'This is a \nText and';
console.log(str.match(reg));  // null

// 多行匹配
var reg = new RegExp('^Text','m');  // 实例化一个正则对象
var str = 'This is a \nText and';
console.log(str.match(reg));// ["Text", index: 11, input: "This is a ↵Text and", groups: undefined]

3. 正则表达式的特殊语法

3.1. 特殊字符

正则表达式由普通字符和特殊字符（元字符）组成。

普通字符包括：字母（abcABC），数字（123），_等等

特殊字符：() [] {} ^ $ * ? \ | + .

普通字符我们可以直接拿来用，但是，特殊字符是一定要转义。因为特殊字符在正则中有特殊的意义

// 匹配 ^a
var reg = /\^a/
console.log(reg.test('bb^acc'))

// 匹配\m
var reg = /\\m/;    // 特殊字符要转义
console.log(reg.test('asdf\\msadfasd'));    // 字符串中反斜杠要转义

3.2. 预定义的特殊字符

\t /\t/ 制表符

\n /\n/ 回车符

\f /\f/ 换页符

\b /\b/ 与回退字符

// 匹配制表符
var str = 'a  b';
var reg = /\t/;
console.log(reg.test(str));

// 匹配回车符
var str2 = `a\nb`;
var reg2 = /\n/;
console.log(str2)
console.log(reg2.test(str2));

2.3. 字符集

Javascript的正则表达式中有四类字符集

2.3.1 简单类

它是有一一对应的字符组成的集合，通过[]包裹住，来表示这几个字母组成的一个集合

如： [abDF45]表示由abDF45六个字符组成的一个集合

var str = 'abcdefg';
var reg = /[dqqqqqq]/;
console.log(reg.test(str));

2.3.2 范围类

通过首位字母以及-组成的一个范围集合

如：[a-z] 表示小写字母集合。[A-Z] 表示大写字母集合。[0-9] 表示数字集合。[i-y] 表示小写字母i到y的集合

var str = 'abcdeg';
var reg = /[f-i]/;
console.log(reg.test(str));

按照字符编码集可以从小到达[A-z] 不能从大到小[a-Z],这样写及容易报错

2.3.3 负向类

通过在[]内部最前面添加^来表示不包含该集合的字符集

如：[^abc] 表示不包含abc的任意字符集合，[^ab89CD] 表示不包含ab89CD这六个字符的集合

var str = 'fabcdef';
var reg = /[^f]/;
console.log(reg.test(str));

2.3.4 组合类

通过[]将几个集合拼接在一起表示一个组合的集合。

如：[a-zA-Z0-9] 表示大小写字母以及数字的结合

var str = '0';
var reg = /[0-9a-z]/;
console.log(reg.test(str));

2.3.5 注意,

1. 中括号的字符集里面无论你写多少个字符只会匹配其中一个

2. 特殊的中文字符集

   ​ [\u4e00-\u9fa5] 表示中文集

2.4. 界定符

字符串是有边界，这里的边界指的就是字符串的首尾

2.4.1 界定字符的首位

字符串的起始位置我们用^，

如： /^abc/ 判断字符串是否是以abc开始的

字符串的结束位置我们用$表示

如：/xyz$/ 判断字符串是否是一xyz结尾的

var str = 'sdf';
var reg = /^bac/;
console.log(reg.test(str));

2.4.2 匹配后面跟的字符

(?=n) 匹配到后面紧跟着字符n的字符
(?!n) 匹配到后面没有紧跟着字符n的字符

var str = "ccsdbcd";
var reg = /c(?=d)/;
console.log(str.match(reg));

2.5. 预定义的类（元字符）

就是特殊的转移字符,把一些字母转成特殊意义的字符

. [^\n\r] 除了换行和回车之外的任意字符

\d [0-9] 数字字符

\D [^0-9] 非数字字符

\s [ \t\n\f\r ] 空白字符

\S [^ \t\n\f\r ] 非空白字符

\w [a-zA-Z_0-9] 单词字符(所有的字母)

\W [^a-zA-Z_0-9] 非单词字符

var str = 'sdf';
var reg = /\W/;
console.log(reg.test(str));

2.6. 量词

无论字符集还是元字符，都只能匹配到一个字符，无法匹配多个字符，所以引入量词的概念，用来设置匹配到字符的个数

匹配的原则符合贪婪匹配原则,即尽可能多的匹配，可以在量词后面加上？,能够取消贪婪匹配

重复书写某个规则时可以用量词代替，比如需要重复匹配10个数字，可以由/\d\d\d\d\d\d\d\d\d\d/改为/\d{10}/的写法。

2.6.1 量词普通写法

​ {n} n个

​ {n,m} n~m个，包含n也包含m

​ {n,} n~无穷大个，包含n

2.6.2 量词特殊写法

​ {1,} 可由 + 代替

​ {0,} 可由 * 代替

​ {0,1} 可由 ? 代替

2.6.3 贪婪与惰性

​ 量词+默认贪婪匹配，就是说尽量往指定范围类最大的匹配，在量词后面加上 ? 符号，变为惰性匹配，也就是尽量少的去匹配。

2.7. 子项

定义正则时，可以用()将部分规则包裹起来，这样在使用match或者exec做匹配的时候，能在得到的结果里面拿到该部分匹配的内容。

var str = "abcd12ef";
var reg = /d(\d+)/;
console.log(str.match(reg));

注意一点加全局匹配g ,match方法就不包含子项了

2.7.1 子项反项引用

也叫捕获组

var str = "ccsdbbcc99d";
var reg = /([a-z])\1/g;
console.log(str.match(reg));

2.8. 或者 |

在正则中 | 表示或者

var str = "adcd12ef";
var reg = /ad|cd/g;
console.log(str.match(reg));  // ["ad","cd"]

可以与子项结合使用

var str = "adcd12ef";
var reg = /(a|c)d/g;
console.log(str.match(reg));  // ["ad","cd"]

如果或者放在字符集里面就只是表示普通的竖线

var str = "adcd1|d2ef";
var reg = /[a|c]d/g;
console.log(str.match(reg));  // ["ad", "cd", "|d"]

3. 例子

// 验证手机号
/**
 * 11位 {11}
 * 第一位是1 ^1
 * 都是数字 [0-9] \d
 */
var reg = /^1\d{10}$/;
var str = prompt('请输入手机号');
if (reg.test(str)) {
    alert('成功')
} else {
    alert('失败');
}