前言

不会吧不会吧，这么多年你还在怕正则？这就对了，相信你用不了几分钟看完本文，从此正则算个球。

为啥要用正则表达式

俗话说的好，万事开头难。面对火星文似的正则，就是这样的感觉。那么，我们一起来开个头先。 假设我们需要验证一个字符串是否遵循 8 位数字的电话号码格式：000-12345，该格式前面有 3 位数字，然后紧跟着连字符-，连字符后面再跟着 5 位数字。

不使用正则

function isTelephoneNumber(telephoneNumber) {
 if (typeof telephoneNumber !== 'string' || telephoneNumber.length !== 9) {
  return false
 }
 for (let i = 0; i < telephoneNumber.length; i++) {
  let c = telephoneNumber[i]
  switch (i) {
   case 0: case 1: case 2: case 4: case 5:
   case 6: case 7: case 8: case 9:
    if (c < '0' || c > '9') {
     return false
    }
    break
   case 3:
    if (c !== '-') {
     return false
    }
    break
  }
 }
 return true
}
复制代码

使用正则

function isTelephoneNumber(telephoneNumber) {
    return /^\d{3}-\d{5}$/.test(telephoneNumber)
}
复制代码

我的天，使用正则代码变得如此简洁优雅，老板再也不用担心我的代码。

正则的核心

正则就是匹配模式，要么匹配位置，要么匹配字符。划重点，牢记这个核心。上图代表的是一个字

符串：I Love U，箭头就表示我们要匹配的位置，框框里就表示我们要匹配的字符(包括空格)。相信小伙伴们一眼就看明白了。

匹配位置

正则中可以匹配位置的方式如下：

就一张表格，so easy，位置匹配就介绍完了。接下来我们看几个问题巩固一下。请听题： test() 方法执行一个检索，用来查看正则表达式与指定的字符串是否匹配。返回 true 或 false。

1. 第一题

1. 匹配以 javascript 开头的字符串

2. 匹配以 javascript 结尾的字符串

/^javascript/.test('javascript is my favorite'); // true
 
/javascript$/.test('this code in javascript'); // true
复制代码

1. 第二题

仅匹配有边界的code单词

/\bcode\b/.test('bar code'); // true
 
/\bcode\b/.test('barcode') // false
复制代码

1. 第三题

匹配姓“李”的名字。

/^李.+/.test('李逍遥');  // true
 
/^李.+/.test('慕容李逍遥');  // false
 
// "李" 左侧可以为空格不能为非空格字符
/(?<=[\s]?)(?<!\S)李.+/.test('李逍遥');  // true
复制代码

匹配字符

接下来我们看下正则中可以匹配字符的方式：

字符

上面表格内的乍一看特别多，但是别怕，我们记住常见的匹配字母、数字、换行、回车 等等即可。 至此，你已经学废使用正则了，是不是很简单。别高兴的太早，我们还要进阶一下。

字符组

[...]字符组语法类似 javascript 中的数组，可能有些小聪明会疑惑。简单的理解就是正则表达式会匹配[...]中的某个字符/表达式，相当于将字符组内的字符遍历匹配。\d \D \w \W \s \S 等都是一些简写，先记个大概以后熟能生巧。接下来看几个实例理解一下。

1. 第一题

使用字符组匹配 Javascript 和 javascript

const regex = /[Jj]avascript/
 
regex.test('Javascript');  // true
regex.test('javascript');  // true
复制代码

1. 第二题

匹配“我爱你”或“我想你”或“我”+数字+“你”

const regex = /我[\d爱想]你/
 
regex.test('我爱你');  // true
regex.test('我想你');  // true
regex.test('我打你');  // false
regex.test('520, 我2你');  // true
复制代码

1. 第三题

匹配爱后面不包含你的数据

/我爱[^你]/.test('我爱你'); // false
复制代码

1. 第四题

匹配数据所有的数字、小写字母和大写字母。

/[a-z0-9A-Z]/.test('b'); // true
 
/[a-zA-Z\d]/.test('999'); // true
 
/[a-zA-Z\d]/.test('A'); // true
 
/[a-zA-Z\d]/.test('A4'); // true
复制代码

到目前为止，我们只是学习了关于仅出现一次的字符串匹配，在实际开发中，肯定不能满足需求，比如要匹配电话号码、身份证的时候就无法满足需求了。接下来我们看一下如何匹配多个重复类型的字符

量词

• 贪婪模式――在匹配成功的前提下，尽可能多的去匹配

• 惰性模式――在匹配成功的前提下，尽可能少的去匹配

这是小伙伴们肯定又有点懵逼，我知道你很急，但你先别急。{n,m}简单来说就是需要重复的次数，我们继续来举个栗子。

1. 第一题

匹配手机号码，假设手机号码规则如下：

• 必须是 11 位的数字；

• 第一位数字必须以 1 开头，第二位数字可以是 [3,4,5,7,8] 中的任意一个，后面 9 个数是 [0-9] 中的任意一个数字。

const regex = new RegExp(/^1[34578]\d{9}/);
 
regex.test('18711001111') // true
regex.test('13712345678') // true
regex.test('12345678911') // false
复制代码

括号的作用

括号主要是用来分组作用。同样的，我们举个栗子。

1. 第一题

视频文件的后缀名有 .mp4、.avi、.wmv、.rmvb 用正则表达式提取所有的视频文件的后缀

const regex = new RegExp(/.+(.mp4|.avi|.wmv|.rmvb)/);
 
regex.exec('海贼王.avi')
// ['海贼王.avi', '.avi', index: 0, input: '海贼王.avi', groups: undefined]
regex.test('朋友.mp3')
// null
regex.test('学习资料.rmvb')
// ['学习资料.rmvb', '.rmvb', index: 0, input: '学习资料.rmvb', groups: undefined]
复制代码

正则表达式相关 API

Javascript 中可以通过以下两种方式写正则:

1. 正则表达式字面量

2. 通过构造函数 RegExp 的实例

例如，创建一个正则用于精确匹配字符串 'test'。

let regExp = /test/
 
let regExp = new RegExp('test') 
// 或者
let regExp = new RegExp(/test/)
复制代码

我们还可以在正则上添加一些修饰符，常见的修饰符如下

修饰符

RegExp 相关实例方法

以下是简单的用法，具体用法大伙可以上 mdn 查看相关资料。

new RegExp(/love*/).test('I love you, I love him')
// true
 
new RegExp(/love*/).exec('I love you, I love him')
// ['love', index: 2, input: 'I love you, I love hime', groups: undefined]
复制代码

RegExp 静态属性

String 相关实例方法

• groups: 一个命名捕获组对象，其键是捕获组名称，值是捕获组，如果未定义命名捕获组，则为 undefined[9]。有关详细信息，请参阅组和范围[10]。

• index: 匹配的结果的开始位置

• input: 搜索的字符串。 | | replace[11] | 对目标字符串进行替换操作。正则是其第一个参数。返回替换后的字符串。 |

replace 第二个参数中的特殊字符

replace 第二个参数为函数

你可以指定一个函数作为第二个参数。在这种情况下，当匹配执行后，该函数就会执行。 函数的返回值作为替换字符串。 (注意：上面提到的特殊替换参数在这里不能被使用。) 另外要注意的是，如果第一个参数是正则表达式，并且其为全局匹配模式，那么这个方法将被多次调用，每次匹配都会被调用。

小试牛刀

第一题

匹配所有符合 XML 规则的标签

const regex = new RegExp(/<(\w+)>.+<\/(\1)>/);
 
regex.test('
code
')  // true
regex.test('I Love U') // true
regex.test('
This is title
') // false
regex.test('
') // false
复制代码

还是比较简单的，主要是用到了括号捕获 <> 中的单词，注意 /为关键字，需要用 \转义。

第二题

请用正则表达式匹配所有的小数

const regex = new RegExp(/(?<!\.)\d+\.\d+$/);
// const regex = new RegExp(/^\d+(?<=\d)\.\d+$/);
 
regex.test(0.1)  // true
regex.test(1.30) // true
regex.test(13.14) // true
regex.test('1.3.1.4') // false
regex.test(1)   // false
复制代码

(?反向后行断言，匹配一个位置其左边不为“.”；接着 \d+\.\d+匹配一位以上的数字 + “.” + 一位以上的数字。

const regex = new RegExp(/((?<=[年.-])\d{1,2})[月.-](\d{1,2}))/);
 
regex.exec('王伟 1993年1月2日')
// ['1月2', '1', '2', index: 8, input: '王伟 1993年1月2日', groups: undefined]
 
regex.exec('李伟 1996.3.21')
// ['3.21', '3', '21', index: 8, input: '李伟 1996.3.21', groups: undefined]
复制代码

const regex = new RegExp(/(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9]).{8,}/);
 
regex.test('123456789') // false
regex.test('12ABab') // false
regex.test('12345ABCabc') // true
regex.test('ADMIN1234()') // false
regex.test('Hmm5201314') // true
复制代码

function render(template, data) {
  if(typeof template !== 'string' || typeof data !== 'object') {
   return null
  }
 return template.replace(/{{(.*?)}}/g, (match, $1) => data[$1])
}
复制代码

function strToCamel(str) {
    return str.replace(/(^|_)(\w)/g, (m, $1, $2) => $2.toUpperCase());
}
复制代码