javascript系列之 正则表达式(方法) 篇

这篇文章将介绍关于正则表达式的一系列匹配规则，会从基础语法、RegExp 对象方法，RegExp 属性，以及支持正则表达式的 String 对象的方法入手，一步步的了解和掌握正则表达式

定义

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。

基础语法

创建一个正则表达式

//1. 字面量声明
var reg = /pattern/modifiers;

//2. 用构造函数构建
var reg = new RegExp(pattern, modifiers)

RegExp 对象方法

为了方便理解正则表达式的各种匹配原则，先来了解下常用的 RegExp 对象方法

1. test

形式：reg.test(str)
检索字符串中指定的值，返回 true 或 false

var str = 'xinshou';
var reg1 = /x/;
var reg2 = /a/;

reg1.test(str) //true
reg2.test(str) //false

2. exec

形式：reg.exec(str)

1. 匹配失败就返回 null
2. 匹配成功就返回一个数组

var str = 'xinshou';
var reg1 = /x/;
var reg2 = /(?<first>xin)(?<second>shou)/;
var reg3 = /a/;

var result = reg1.exec(str) //[0: "x", index: 0, input: "xinshou", groups: undefined]
// [
//    0: "x",               匹配到的值，如果有子表达式就存放在result[1],result[2]...
//    index: 0,             匹配到的起始位置    
//    input: "xinshou",     匹配的原字符串  
//    groups: undefined     捕获组，语法格式为  (?<组名>捕获规则)
//  ]

reg2.exec(str) 
// [
//    0: "xinshou", 
//    1: "xin", 
//    2: "shou", 
//    index: 0, 
//    input: "xinshou", 
//    groups: {first: "xin", second: "shou"}
//  ]

reg3.exec(str) // null

3. 如果正则表达式带 g 标识符，在每次执行完 exec 后,该正则对象的lastIndex值就会变成当前的 index + 1，表示下次开始匹配的下标

var str = 'xinshou';
var reg1 = /x/g;

reg1.exec(str) // ["x", index: 0, input: "xinshou", groups: undefined]
reg1.lastIndex // 1
// 为 index + 1

reg1.exec(str) // null
reg1.lastIndex // 0
// 匹配失败，重置为0

支持正则表达式的 String 对象的方法

1. search

形式：str.search(reg)
可以理解为 indexOf ，匹配成功就返回索引值，失败就返回-1

var str = 'xinshou';
var reg1 = /x/;
var reg2 = /a/;

str.search(reg1) // 0
str.search(reg2) // -1

2. match

形式：str.match(reg)
正则表达式没有 g 标识符，返回值与 exec 类似
正则表达式有 g 标识符，返回一个数组（包含所有成功匹配的子串）
匹配失败就返回 null

var str = 'xinshoux';
var reg1 = /x/;
var reg2 = /x/g;

str.match(reg1) // ["x", index: 0, input: "xinshoux", groups: undefined]
str.match(reg2) // ["x", "x"]

3. replace

形式：str.replace(reg | str, newStr | callback)
用 newStr 替换匹配到的 reg 子串，返回一个新的字符串，不会修改原字符串

var str = 'xinshoux';
var reg1 = /x/g;

str.replace(reg1, 'a') // ainshoua

就像正则里我们可以用 \1 来引用第一个子表达式匹配的内容一样，我们可以用 $1 来引用相同的内容
由于 $ 有了特殊的含义，当需要使用 $ 时需要写成 $$

var str = 'xinshou';
var reg1 = /(x)/;

str.replace(reg1, '$1$1') // xxinshou
str.replace(reg1, '$$$$') // $$inshou

当第二个参数为函数 callback 时，用函数的返回值替换匹配到的 reg 子串
此时callback的arguments会有4个参数

1. 匹配到的字符串
2. 如果正则使用了分组匹配就为多个否则无此参数。
3. 匹配字符串的对应索引位置
4. 原始字符串

var str = "http://www.baidu.com"

//没有分组时
var reg1 = /^http(?=:)/
var newStr1 = str.replace(reg1, (value, index, originStr) => {
  console.log(value) // http
  console.log(index) // 0
  console.log(originStr) // http://www.baidu.com
  return "https"; //返回'https'替换匹配到的'http'
})
newStr1 // https://www.baidu.com

4. split

形式：str.split(reg | str)

var str = "2020-09-08 16:25:12";
var reg = /-|\s|:/;

str.split(reg) // ['2020', '09', '08', '16', '25', '12']