出来混总是要还的-JS正则常用的有四种操作： 验证、切分、提取、替换

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

使用正则的目的就三个

replace
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()方法
复制代码

String.indexOf() 和 String.includes()
RegExp.test() 和 String.search()
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 ( 原字符内容 )