正则表达式概述

• 校验、兼容方法中都可以使用正则表达式

什么是正则表达式

• 正则表达式：（Regular Expression）用于匹配规律规则的表达式.
• 正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

正则表达式的作用

• 给定的字符串是否符合正则表达式的过滤逻辑(匹配)
• 可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)
• 强大的字符串替换能力(替换)

正则表达式的测试

• 在线测试正则：https://c.runoob.com/front-end/854

正则表达式语法

• 在js中,正则表达式也是对象,是一种索引类型.

• 使用一个正则表达式字面量是最简单的方式.两个/是正则表达式的定界符.

• 可以通过以下两种方法创建一个正则表达式

  • 使用一个正则表达式字面量(推荐使用)

  var reg = /a*/;
  

  • 调用RegExp对象的构造函数

  var reg = new RegExp("abc");
  

相关正则方法

字符串的方法

split()

• 功能: 根据匹配字符串切割父字符串
• 演示代码

// 字符串方法 
var str = "ab  kjsfb   adah**lkslks d";
// 切割后返回新字符串
// 现在切割的空格个数由你输入来决定,只能精确匹配分割
// var str1 = str.split(" ");
// 使用正则表达式可以进行模糊匹配分割
var str1 = str.split(/\s+/);
console.log(str1);

match()

• 功能: 使用正则表达式与字符串相比较,返回一个包含匹配结果的数组(其中也包含首次匹配到的下标值).
• 注意(追加g)
  • 在正则表达式的//定界符最后追加g(global)，就可以在父字符串全局中进行查找,返回所有与之匹配的字符串。
• 演示代码

// match方法
var str = "ab  kjsfb   aadah**lksalaaaaaadahks d";
// 精准匹配
// var str1 = str.match("adah");
// 模糊匹配match: 只返回在父字符串中第一个查询到配字符串等信息 
// 加g,表示全局查询,会将所有的匹配结果,全部存储到的数组中
// + 表示有0~多个相同的a都可以
var str1 = str.match(/a+/g);
console.log(str1);

search()

• 功能: 对正则表达式或指定字符串进行搜索,返回第一个出现的匹配项的下标.没有匹配的返回-1.
• 不同之处：和indexof比较相像，不同之处是indexof不能用正则表达式。
• 演示代码

// search方法
var str = "ab  kjsfb   aadah**lksalaaaaaadahks d";
var str1 = str.search(/a+/); // 0
var str2 = str.search(/m+/);  // -1
console.log(str1);

replace()

• 功能: 用正则表达式和字符串直接比较,然后用新的子串来替换被匹配的子串.
• 注意(追加g)
  • 在正则表达式的//定界符最后追加g(global)，就可以在父字符串全局中进行查找,返回所有与之匹配的字符串进行替换。
• 演示代码

// replace方法
var str = "Happy new Year";
// 精确替换，只会替换第一次查到的
var str1 = str.replace("new","Yeah"); // Happy Yeah Year
// 模糊匹配
var str2 = str.replace(/a/g,"Y"); // HYppy new YeYr 
console.log(str2);

正则表达式方法

exec()

• 功能: 在目标字符串中执行一次正则匹配操作.(返回类数组对象)
• 演示代码

// exec方法: 返回包含 第一次找到匹配字符串的下标 的类数组对象
// 不论有没有全局修饰符，都只会在找到第一个之后停止
var reg = /abc/;
var result = reg.exec("hfbvaaaaabckkaskabc");
console.log(result);

// 匹配不成功
var reg = /mmm/;
var result = reg.exec("hfbvaaaaabckkaskabc");
console.log(result); // null

test()

• 功能: 测试当前正则是否能匹配目标字符串.(返回 true或false)
• 演示代码

// test方法：检测字符串中是否满足正则表达式的匹配规则
var reg = /abc/;
console.log(reg.test("aaaddddddsfabcklsdn")); // true

正则表达式的组成

• 由一些普通字符和一些特殊字符（又叫元字符--metacharacters）组成。
  • 普通字符包括大小写的字母和数字。
  • 元字符则具有特殊的含义。
• 特殊字符：javascript 中常用特殊字符有 ( ) [ ] { } \ ^ $ | ? * + .
  • 若想匹配这类字符必须用转移符号 \ 如：(,^,\
• 预定义特殊字符
  • \t /\t/ 制表符 eg: console.log(/\t/.test(' '))
  • \n /\n 回车符 eg: console.log(/\n/.test(`aaa
  bbb`));
  • \f /\f/ 换页符
  • \b /\b/ 空格

特别注意：空格、制表符和换行也可以被检测到？

// 空格
var reg = /\s/;
console.log(reg.test("jh c")); // true

// 换行符
var reg = /\n/;
// 如果使用双引号 按 换行符，控制台会报错
// 因此，我们改成反引号
console.log(reg.test(`a
c`)); // true
console.log(reg.test("a
c")); // 报错

// 制表符
var reg = /\t/;
// 输出为：false 可知这里不能使用\t来test，
console.log(reg.test("bbbjh c")); // false
// 那么换成 空格 来test,输出 true
var reg = /\s/;
console.log(reg.test("bbbjh c")); // true

正则的术语

字符集

• 使用[]表示的可能的字符的集合，集合内部可以排列多个匹配字符串的可能性，整个字符集需要匹配的是字符串的一个字符。
• [] -> 字符串中的一个字符，多选一的效果，有一个满足就算匹配成功。

简单类：正则的多个字符对应一个字符，可以用[]括起来，让[]这个整体对应一个字符[abc]。

• 演示代码

// 1.简单类: 多个可能匹配的字符连续书写在一起，只要其中有一个满足即可
console.log(/[abc]/.test("obmmmmm")); // true
console.log(/[abc]/.test("omm")); // false

范围类: 有时匹配的东西过多，而且类型又相同，全部输入太麻烦，就可以在中间加个横线[0-9]、[a-z]。

• 演示代码

// 2.范围类
// [a-z]: 表示a到z之间的字母都可以
console.log(/[a-z]/.test("6o468mm13")); // true

负向类：[]前面加个元字符进行取反，表示匹配不能为括号里面的字符。[^a]、[^0-9]

• 演示代码

// 3.负向类
// [^a-z]: 表示字符串中只要有一个不是a-z之间的值就可以
console.log(/[^a-z]/.test("123m")); // true
console.log(/[^0-9]/.test("omm")); // true

组合类: 允许用中括号匹配不同类型的单个字符[0-9a-b]。

• 演示代码

// 4.组合类
console.log(/[0-9a-z]/.test("o9zm")); // true
console.log(/[^0-9a-z]/.test("onm")); // false
console.log(/[^0-9a-z]/.test("onAm")); // true

修饰符(写在//之外)

g 修饰符(实现全局查找)

• 用于执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
• 演示代码

console.log('12a34b56c78d90e'.match(/\d+/g));

i 修饰符(不区分大小写)

• 用于执行对大小写不敏感的匹配。
• 演示代码

// i修饰符
  console.log('aabAAcAa'.match(/aa/gi)); //["aa", "AA", "Aa"]

注意：修饰符i和g可以一起使用

边界

^ 开头

• 注意：不能紧跟于左中括号的后面
• 演示代码

// ^ 表示限制开头，后面的正则内容匹配的结果必须是出现在字符串开始
var str = "Hello javaScript";
console.log(/^Hello/.test(str)); // true

$ 结尾

• 演示代码

// $ 表示限制结尾，前面的正则内容匹配的结果必须是出现在字符串结尾处
console.log(/Script$/.test(str)); // true

预定义类

.

• 相当于：[^\n\r]
• 功能：除了换行和回车之外的任意字符
• 演示代码

// . 表示：除了换行和回车之外的任意字符
console.log(/^.+$/.test("aa$$$$###")); // true
console.log(/^.+$/.test(`aa$$
$$##`)); // false
// 在书写的时候需要注意，一定要写+或者*,
// 不然表达的就是一个字符匹配一个
console.log(/./.test(`
`)); // true

\d

• 相当于[0-9]
• 功能：数字字符
• 演示代码

// \d 表示 [0-9]
console.log(/^\d+$/.test("8726825")); // true
console.log(/\d+/.test("872mnl6825")); // true

\D

• 相当于[^0-9]
• 非数字字符
• 演示代码

// \D 表示 [^0-9]
console.log(/\D+/.test("mnfbs")); // true
console.log(/\D+/.test("m64nfbs")); // true

\s

• 相当于[ \t\n\x0B\f\r]
• 功能：空白字符
• 演示代码

// \s 空白字符
console.log(/^\s+$/.test(` 
`)); // true

\S

• 相当于[^ \t\n\x0B\f\r]
• 功能：非空白字符
• 演示代码

// \S 非空白字符
console.log(/^\S+$/.test("sgjf;"));  // true

\w

• 相当于[a-zA-Z_0-9]
• 功能：单词字符(所有的字母/数字/下划线)
• 演示代码

// \w 单词字母(所有的字母、数字、下划线) 
console.log(/^\w+$/.test("alkfh_aj73438")); // true

\W

• 相当于[^a-zA-Z_0-9]
• 功能：非单词字符
• 演示代码

// \W 非单词字母
console.log(/^\W+$/.test("##$$$)()")); // true

量词

{n} 硬性量词

• 对应零次或者n次
• 演示代码

console.log(/^\d{5}$/.test("12345")); // true

{n,m} 软性量词

• 至少出现n次但不超过m次(中间不能有空格)
• 演示代码

var reg = /^\d{3,8}$/;
console.log(reg.test("465")); // true
console.log(reg.test("97583")); // true
console.log(reg.test("0927372835")); // false

{n,} 软性量词

• 至少出现n次(+的升级版)
• 演示代码

var reg = /^\d{3,}$/;
console.log(reg.test("092739843598572835")); // true

? 软性量词

• 出现零次或一次
• 演示代码

// ? 出现0次或1次
var reg = /^\d?$/;
console.log(reg.test("")); // true
console.log(reg.test("1")); // true

* 软性量词

• 出现零次或多次(任意次)
• 演示代码

// * 出现0次或多次
var reg = /^\d*$/;
console.log(reg.test("")); // true
console.log(reg.test("194857")); // true

+ 软性量词

• 出现一次或多次（至少一次）
• 演示代码

// + 出现1次或多次
var reg = /^\d+$/;
console.log(reg.test("")); // false
console.log(reg.test("194857")); // true

分组

• 虽然量词的出现，能帮助我们处理一排紧密相连的同类型字符。
• 但是这是不够的，用中括号表示范围内选择，大括号表示重复次数。如果想获取重复多个字符，就需要小括号进行分组。
• 演示代码

console.log(/(bye){2}/.test("byebye")); // true

或操作符

• 可以使用竖线(|)字符表示或者的关系。
• 演示代码

// 匹配 a 或 bcd 字符
console.log(/a|bcd/.test("a")); // true
// 匹配出现一次或多次的ab或者cd
console.log(/(ab)+|(cd)+/.test("absldfh")); // true

• 实际应用

// 如果想在正则中，在两个规则之间只能选其中一个，
// 不能包含其他的开头结尾，需要去将或运算放到分组里
var reg = /^(ab|cd)$/;
console.log(reg.test("abcd")); // false
console.log(reg.test("ab"));  // true
console.log(reg.test("cd"));  // true

• 功能：在一个小范围内，只能匹配出其中某一个的时候，需要加小括号，将范围限制在整个表达式中间。

分组的反向引用

• 反向引用标识是对正则表达式中的匹配组捕获的子字符串进行编号。
• 通过“\编号(在表达式中)”，“$编号（在表达式外）”进行引用。从1开始计数。
• 演示代码

//1. \编号（在表达式中）
console.log(/(bye)\1/.test("byebye")); //true
console.log(/(bye)\1/.test("bye")); //false
// 2. $编号（在表达式外）
console.log('123*456'.replace(/(\d{3})\*(\d{3})/,'$2*$1')); // 456*123
console.log('123*456'.replace(/(\d{3})\*(\d{3})/,function(match,$1,$2){
    return $2 + '*' + $1;
})); // 456 * 123

中文字符

• 匹配中文：[\u4e00-\u9fa5]
• 演示代码

// 匹配中文：[\u4e00-\u9fa5]
console.log(/^[\u4e00-\u9fa5]+$/.test("中文你好")); // true