前言：能看到这篇随笔的朋友肯定, 多多少少接触过正则( 不过还记得多少, 只有"天"知道 ), 基础语法知识咱先扔一边, 先从实际编程入手去, 验证浏览器中正则的四种常规操作： 验证、切分、提取、替换

使用正则的目的就三个

1. 表单校验( 查找字符串中是否有匹配正则规则的字符 ) 如果满足就 XX, 如果没满足就 OO
2. 提取字符串中的内容(分组) - 提取之后做后续操作(替换replace就是提取的后续操作)
3. 切分 split

1. 验证

验证：查找字符串中是否有匹配正则规则的字符。 先来一道基础题

Demo1 判断一个字符串中是否包含"hello" ( 判断字符串中是否包含某个字符串 )

String对象上的方法

方法一： indexOf()

let str = "hello world!";
console.log(str.indexOf("hello") != -1); // true
// 不是正则, 但却是解决当前题的一种方案,
// indexOf()方法返回调用String对象中第一次出现的指定值的索引, 如果未找到该值, 则返回-1
复制代码

方法二： includes()

let str = "hello world!";
console.log(str.includes("hello")); // true
// includes() 方法用于判断一个字符串是否包含在另一个字符串中, 根据情况返回true或false
复制代码

方法三： search()

let str = "hello world!";
console.log(str.search(/hello/) != -1);
// 只有一个参数, 并且是一个正则表达式对象, 如果传入一个非正则表达式对象,
// 则会使用 new RegExp(obj)隐式地将其转换为正则表达式对象
// 如果匹配成功, 则返回正则表达式在字符串中首次匹配项的索引, 否则, 返回-1
复制代码

方法四： match()

let str = "hello world!";
console.log(!!str.match(/hello/g));
// 如果传入一个非正则表达式对象, 则会隐式地使用new RegExp(obj)将其转换为一个RegExp
// 返回值(数组), 如果匹配到数组第一项是匹配的完整字符串, 之后项是用圆括号捕获的结果, 如果没有匹配到, 返回null
// 如果正则表达式包含g标志, 则该方法返回一个Array, 它包含所有匹配的子字符串而不是匹配对象
复制代码

RegExp 对象上的方法

方法五： test()

let str = "hello world!";
console.log(/hello/.test(str));
// 用来查看正则表达式与指定的字符串是否匹配, 返回true或false
// 想要知道一个模式是否存在于一个字符串中, 可以使用test()或者search
复制代码

方法六： exec()

let str = "hello world!";
console.log(!!/hello/.exec(str));
// exec() 方法在一个指定字符串中执行一个搜索匹配, 返回一个结果数组或null,
// 如果只是为了判断是否匹配(true或false), 可以使用RegExp.test()方法, 或者String.search()方法
复制代码

验证总结：

1. 一个确认的( 精准匹配 )字符查找是否被包含, 使用 String.indexOf() 和 String.includes()
2. 一个有规则的( 模糊匹配 )字符查找是否被包含, 使用 RegExp.test() 和 String.search()
3. 查找不推荐, 使用 String.match() 和 RegExp.exec()

切分

切分：所谓"切分", 就是把目标字符串, 切分成一块一块的, 在 JS 中使用 split

Demo2 目标字符串是"html,css,javascript", 按逗号切分

let regex = /,/;
let str = "html,css,javascript";
let str2 = "2018/10/18";
console.log(str.split(regex));
console.log(str2.split(/\//));
复制代码

split() 方法使用指定的分隔符字符串将一个String对象分割成字符串数组, 以将字符串分隔为子字符串, 以确认每个拆分的位置

分隔符可以是一个字符串或正则表达式

提取

提取：很多时候需要提取部分匹配的数据, 通常需要使用分组引用( 分组捕获 )

Demo3 提取年月日

方法一: match()

let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
console.log(str.match(regex));
复制代码

方法二: exec()

let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
console.log(regex.exec(str));
复制代码

方法三: test()

let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
regex.test(str);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
复制代码

方法四: search()

let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
str.search(regex);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
复制代码

方法五: replace()

let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
let date = [];
str.replace(regex, function(match, year, month, day) {date.push(year, month, day);
});
console.log(date);
复制代码

提取总结: 本质上是捕获分组 推荐使用match和exec 其中, 最常用的是match

String.prototype.match(); 参数： 一个正则表达式对象, 如果传入一个非正则表达式对象, 则会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp, 如果你为提供任何参数, 直接使用 match(), 那么你会得到一个包含空字符串的数组[""]

返回值：如果字符串匹配到了表达式, 会返回一个数组, 数组第一项是进行匹配完整的字符串, 之后的项是用圆括号捕获的结果, 如果没有匹配到, 则返回 null

如果正则表达式不包含 g 标志, 则 str.match() 会返回和 RegExp.exec() 相同的结果。而且返回的Array拥有一个额外的input属性, 该属性包含被解析的原始字符串, 另外, 还拥有一个index属性, 该属性表示匹配结果在原字符中的索引

如果正则表达式包含 g 标志, 则该方法返回一个Array, 它包含所有匹配的子字符串而不是匹配对象, 捕获组不会被返回( 即不返回 index 属性和 input 属性 )。如果没有匹配到, 则返回null。

RegExp.exec() 方法在一个指定字符串中执行一个搜索匹配, 返回一个结果数组或 null

String.match() 和 RegExp.exec() 的主要区别

1. 所属类不同
2. 跟 g 有关
3. exec 只会匹配第一个符合的字符串( 意味着 g 对其不起作用 )和所有分组的反向引用, 虽然 g 对其不生效,但其使用 lastIndex 和 while 循环, 可以达到 g 的目的, 这点比 match 强大
4. match 返回的数组内容, 跟正则表达式中是否带 g 有关系( 如果带 g, 包含的是所有匹配的子字符串 ) 如果不带 g == 默认的 exec

替换

使用正则的目的, 往往是匹配到对应的规则的字符, 下一步常常是替换^_^

正则处理中最强大的 API, 划重点、划重点、划重点, 因为其常常被一些伪装者, 假借替换之名, 做一些皮肉生意

Demo4 从 yyyy-mm-dd 替换成 yyyy/mm/dd

replace

let str = "2018-10-18";
let regex = /-/g;
console.log(str.replace(regex, "/"));
复制代码

String.replace(); 有两种使用形式, 第二个参数时字符串还是函数

一、当其为字符串时如下字符有特殊含义 $1,$2 ... $99 匹配 1-99 个分组捕获的文本

二、当其为函数时, 回调函数的参数具体意义 match( 匹配内容 ), $1( 分组1 ), $2( 分组2 ), index( 索引 ), input( 原字符内容 )

总结

1. 验证一个字符串( 精准匹配 )是否被包含, 使用 String.indexOf() 、 String.includes()
2. 验证一个字符串( 模糊匹配 )是否被包含, 使用 String.search()、RegExp.test()
3. 切分一段字符串( 无论确认字符和规则字符 ), 使用 String.split(字符串/正则)
4. 提取分组捕获信息, 使用 String.match()、RegExp.exec() 注意区分它们之间的区别 -> g
5. 替换, 使用 String.replace(String/RegExp, string/function) 注意第二个参数的的规则信息

传送门 -> 正则基础方法应用

参考

《Javascript 正则表达式迷你书》