Create by jsliang on 2018-11-14 10:41:20
Recently revised in 2018-11-19 09:04:18

 Hello 小伙伴们，如果觉得本文还不错，记得给个 star，你们的 star 是我学习的动力！GitHub 地址

 【2019-08-16】Hello 小伙伴们，由于 jsliang 对文档库进行了重构，这篇文章的一些链接可能失效，而 jsliang 没有精力维护掘金这边的旧文章，对此深感抱歉。请需要获取最新文章的小伙伴，点击上面的 GitHub 地址，去文档库查看调整后的文章。

 正则表达式：正则，也叫做规则，让计算机能够读懂人类的规则。
 正则表达式是繁琐的，越学你会觉得越发发狂。
 但是，它又是强大的。正则在我眼里，就是作弊码，学会之后的应用可以大大提高你的开发效率。
 所以，你可以老老实实打怪，但是你用了它会觉得编程更爽快。

 综上，有了 jsliang 编写这篇文章来记录自己所学的冲动。
 为此，也是灵感触发，jsliang 写了个 PC 小游戏（请用电脑打开网址）：

• 正则小游戏地址

一 目录

 不折腾的前端，和咸鱼有什么区别~

二 整合

目录

 本章节整理总结了所有的参考文献，方便日后快速回顾回忆。
 如果你还没正式开始正则表达式，请快速浏览跳过本章节。

 精选参考文献/视频/手册：

• 正则表达式-教程 | 菜鸟教程
• 正则表达式在线测试 | 菜鸟教程
• 正则表达式手册 | 开源中国社区
• 鬼斧神工之正则表达式 | 慕课网
• 正则表达式真的很 6，可惜你不会写 | 前端之巅
• 正则表达式 – 快速参考 | Miscrosoft Docs
• 揭开正则表达式的神秘面纱 | 正则工作室
• 正则表达式 JavaScript | MDN

2.1 常用正则表达式

目录

1. 验证姓名

• 2 到 9 位中文昵称：^[\u4e00-\u9fa5]{2,9}$

2. 验证密码

• 只能是字母、数字和下划线，长度不限制：^\w+$
• 允许 小写字母 a-z、大写字母 A-Z、数字 0-9、下划线 _、 连接符 -，且长度在 6-18 位数：/^[a-zA-Z0-9_-]{6,18}$/
• 必须包含数字+小写字母+大写字母的密码，且长度在8-10位之间：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

3. 验证 Email

• 允许有一个字符符合 [A-Za-z0-9_] 之后可以为 [A-Za-z0-9_-+.] + @ + 允许有一个字符符合 [A-Za-z0-9_] 之后可以为 [A-Za-z0-9_-.] + . + 允许有一个字符符合 [A-Za-z0-9_] 之后可以有 [A-Za-z0-9_-.] 的邮箱：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

4. 验证身份证

• 18 位身份证号，尾数是数字或者字母 X：^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$
• 15 或者 18 位身份证号，尾数可以是数字及 X 或者 x：(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)

5. 验证手机号

• 以 1 开头，第二位数是 3/4/5/7/8 的 11 位手机号码：^1[3,4,5,7,8,9]\d{9}$
• 移动号码：^134[0-8]\d{7}$|^(?:13[5-9]|147|15[0-27-9]|178|1703|1705|1706|18[2-478])\d{7,8}$
• 电信号码：^(?:133|153|1700|1701|1702|177|173|18[019])\d{7,8}$
• 联通号码：^(?:13[0-2]|145|15[56]|176|1704|1707|1708|1709|171|18[56])\d{7,8}|$

2.2 匹配规则

目录

2.3 常用方法

目录

 JavaScript 正则默认： 正则匹配成功就会结束，不会继续匹配。如果想查找全部，就要加标识 g（全局匹配）

1. test()

 规则：正则表达式搜索字符串指定的值，从而去匹配字符串。如果匹配成功就返回 true，如果匹配失败就返回 false。
 用法：正则.test(字符串)
 案例：

js 代码片段

var str = "123abc";
var re = /\D/; // 匹配非数字
if(re.test(str)) {
  console.log("不全是数字！");
} else {
  console.log("全是数字！");
}

Console：不全是数字

2. search()

 规则：正则去匹配字符串，如果匹配成功，就返回匹配成功的位置，如果匹配失败就返回 -1
 用法：字符串.search(正则)
 案例：

js 代码片段

var str = "abcdef";
var re1 = /d/i; // 3
var re2 = /h/i; // -1
console.log(str.search(re1));
console.log(str.search(re2));

Console：
3
-1

3. match()

 规则：正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成，就返回 null
 用法：字符串.match(正则)
 案例：

js 代码片段

var str = "123fadf321dfadf4fadf1"; //(4) ["123", "321", "4", "1"]
var re = /\d+/g;
console.log(str.match(re));

Console：(4) ["123", "321", "4", "1"]

4. replace()

 规则：正则去匹配字符串，匹配成功的字符串去替换成新的字符串。函数的第一个参数，是匹配成功的字符；第二个参数：可以是字符串，也可以是一个回调函数。
 用法：字符串.replace(正则,新的字符串)
 案例：

• 简单案例

js 代码片段

var str = 'aaa';
var re = /a+/g;
str = str.replace(re, "b");
console.log(str); // b

Console：b

• 敏感词过滤

html 代码片段

<div class="filtering-of-sensitive-words">
  <h3>敏感词过滤</h3>
  <p>替换前</p>
  <textarea name="before" id="" cols="30" rows="10"></textarea>
  <input type="button" value="确定" id="input1"> <p>替换后</p> <textarea name="after" id="" cols="30" rows="10"></textarea> </div>

js 代码片段

window.onload = function() {
  var aT = document.getElementsByTagName("textarea");
  var oInput = document.getElementById("input1");

  var re = /非诚|中国船|监视之下/g;

  oInput.onclick = function() {
    // 一律单个替换： aT[1].value = at[0].value.replace(re, "*");
    // 多个替换：
    aT[1].value = aT[0].value.replace(re, function(str) {
      var result = "";
      for(var i=0; i<str.length; i++) {
        result += "*";
      }
      return result;
    });
  }
}

Console
替换前：非诚勿扰在中国船的监视之下寸步难行
替换后：**勿扰在***的****寸步难行

三 正则旅途

目录

 什么是正则表达式？正则表达式：正则，也叫做规则，让计算机能够读懂人类的规则。
 正则表达式都是用来操作字符串的。

 本文学习目标：

1. 通过小故事给小伙伴学习 JavaScript 的正则表达式
2. 让小伙伴能了解基本正则表达式的意思，并能自己写正则表达式

3.1 初识正则

目录

 正则长咋样？怎么用？很简单，三行代码带你入门

var regex = /^\d+$/;
var myNumber = '123';
console.log(regex.test(myNumber)); // true

 上面的正则，能验证字符串 myNumber 是不是纯数字组成，就这么简单，正则入门了！
 但是，如果我要是敢就这么结束文章，我敢保证你们想拍死我！所以，我们通过一个表达式的故事来初识正则表达式：

 某天，盗贼小白给了盗贼小黑一个盒子，盒子像俄罗斯套娃一样，有 3 层嵌套：

 并且，他们约定了交易密码提取方式：小白将给小黑提供一串字符串，小黑只需要将字符串中的所有相连的数字找出来，然后把它们拼接成一个新数组，数组的第一项就是第一个盒子的密码，以此类推……

“abc123def456hash789” -> [123, 456, 789] – > [外层盒子1密码, 中间层盒子2密码, 最内层盒子3密码]

 现在假设盗贼小黑使用 JavaScript 进行常规查找：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>正则表达式</title>
</head>

<body>
  <p>正则表达式 | <b>jsliang</b> 学习记录</p>

  <script> window.onload = function () { var str = "abc123def456hash789" function findNum(str) { var arr = []; var tmp = ''; for (var i = 0; i < str.length; i++) { if (str.charAt(i) >= "0" && str.charAt(i) <= "9") { tmp += str.charAt(i); } else { if (tmp) { arr.push(tmp); tmp = ""; } } } if (tmp) { arr.push(tmp); tmp = ""; } return arr; } console.log(findNum(str)); } </script>
</body>

</html>

 写到这里，小黑觉得不妥，上面代码写得太麻烦太复杂了，于是决定使用正则表达式查找：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>正则表达式</title>
</head>

<body>
  <p>正则表达式 | <b>jsliang</b> 学习记录</p>

  <script> window.onload = function() { var str = "abc123def456hash789"; function findNum(str) { return str.match(/\d+/g); } console.log(findNum(str)); } </script>
</body>

</html>

 小黑瞬间觉得自己很牛逼有木有？！只需要一行代码，就能解决字符串查找的时候用的一大串代码！

 那么，讲到这里，小伙伴们应该对正则有了个简单的了解，称热打铁，Here we go~

3.2 正则解析

目录

 在上文中，盗贼小黑通过使用 str.match(/\d+/g)，解决了获取箱子密码的问题。
 那么，这串正则表达式是什么意思呢？我们先抛开这个，解析一串简单的：

^[a-z0-9_-]{6,12}$

 首先，^ 表示匹配字符串的开始位置，结合后面的 [a-z0-9_-] 表示该字符串开头可以为 a-z 的字母，0-9 的数字，_ 下划线，- 连接符。
 然后，[a-z] 表示匹配 a-z 中任意单个字母；[0-9] 表示匹配 0-9 中任意单个数字；[_] 表示匹配下划线；[-] 表示匹配连接符 -。所以，将前面的连起来，[a-z0-9_-] 表示字符串可以包含数字、字母、_、- 这四种形式的字符串。
 接着，{6, 12} 表示该字符串的长度为 6-12 位。
 最后，$ 表示结束标志，^ 的相反。

^ 与 $ 同时使用时，表示精确匹配。

 终上所述，小伙伴们应该猜测到了这个正则表达式的用途：校验用户名。该用户名只能包含字符、数字、下划线 (_) 和连接字符 (-)，并且用户名的长度最长为 12 位，最短为 6 位。

 那么，它在 JavaScript 中要如何使用呢？我们通常用 /正则表达式/ 两个斜杠来包裹我们要写的正则表达式：

var reg = /^[a-z0-9_-]{6,12}$/

 看，这样就是一条规则了，如果你需要让他匹配一个字符串 str。那么，只需要在代码中使用 test() 测试方法：

var str = 'abc-cba_abc';
var reg = /^[a-z0-9_-]{6,12}$/;
console.log(reg.test(str)); // true

 这样，我们就告诉了 JavaScript：reg 通过 test() 方法去测试 str 是否符合 reg的规则，如果符合则返回 true，如果不符合则返回 false。这里返回的是 true，因为我们的 str 是符合 reg 规则的。

test() 方法及其他好用的方法已经整合到 【2.3 JS 正则方法】 里面了，迫不及待的小伙伴们可点击链接先行查看。

 下面贴出完整代码：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>正则表达式</title>
</head>

<body>
  <p>正则表达式 | <b>jsliang</b> 学习记录</p>

  <script> window.onload = function() { var str = 'abc-cba_abc'; var reg = /^[a-z0-9_-]{6,12}$/; console.log(reg.test(str)); // true } </script>
</body>

</html>

3.3 正则练习

目录

 通过上面的了解，小伙伴对正则表达式应该有了初始的了解，下面我们猜测一下，下面的 Console 1 - Console 3中， 哪些是 true，哪些是 false：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>正则表达式</title>
</head>

<body>
  <p>正则表达式 | <b>jsliang</b> 学习记录</p>

  <script> window.onload = function() { var str = "Cheer for yourself"; var reg1 = /^Cheer/; var reg2 = /yourself$/; var reg3 = /for/; console.log(reg1.test(str)); console.log(reg2.test(str)); console.log(reg3.test(str)); } </script>
</body>

</html>

 答案是，这三个都返回 true。在这三个 console.log() 中：
 第一个判断该字符串是否以 Cheer 开头；
 第二个判断该字符串是否以 yourself 结尾；
 第三个判断该字符串是否包含 for。
 在日常工作中，经常利用该方法，判断用户输入的 string 里面是否包含某些文字，例如：jsliang 是傻*，就需要判断替换为 jsliang 是帅哥，至于怎么替换敏感字，迫不及待的小伙伴们可前往 【2.3 JS 正则方法】 先行了解~

3.4 渐入佳境：() 匹配子项

目录

 所谓匹配子项，其实就是我们的小括号 () 。它还有另外一个意思，叫分组操作。下面我们引用章节 【2.2 正则表达式规则】 中的定义：

 如果光解释意思，小伙伴们可能稀里糊涂。所以我们先上代码：

js 代码片段

var str = "2018-11-28";
var re = /(\d+)(-)/g;
str = str.replace(re, function($0, $1, $2){
  // 第一个参数：$0（母亲)
  // 第二个参数：$1（第一个孩子）
  // 第三个参数：$2 (第二个孩子)
  console.log("$0：" + $0); // 2018- 以及 11-
  console.log("$1：" + $1); // 2018 以及 11
  console.log("$2：" + $2); // - 以及 -
  return $1 + '.';
});
console.log(str); // 2018.11.28

Console：
$0：2018-
$1：2018
$2：-
$0：11-
$1：11
$2：-
2018.11.28

 首先，我们解析下这段正则：

• /(\d+)/ 表示任意 1 个及以上的数字
• /(-)/ 表示匹配字符 -
• g 表示匹配一次以上

 所以这段正则的意思就是匹配一次及以上的 数字- 形式的字符串。  然后，我们使用了 replace() 方法。我们观察 Console 打印出来的结果，可以看出：$0 即是我们的正则 var re = /(\d+)(-)/g 去匹配 var str = "2018-11-28" 所得到的结果，这里我们匹配成功了两次，即 2018- 及 11-；$1 即是我们的一个小括号 (\d+) 的匹配结果，所以结果为 2018 以及 11；$2 即是我们的第二个小括号 (-) 的匹配结果，所以结果为 - 以及 -。
 最后，我们做的事情就是，将 $1 加上 .，并返回最终结果给 str，即最终结果：2018.11.28。

在这里提到了 replace() 方法，详情可了解：点击前往

 【Once again】 如果小伙伴们感觉还是不过瘾，那么我们再来一段：

js 代码片段

var str = "abc";
var re = /(a)(b)(c)/;
console.log(str.match(re));

Console
(4) ["abc", "a", "b", "c", index: 0, input: "abc", groups: undefined]

 这里我们不做过多讲述，相信小伙伴们经过这两个案例，应该对 () 有了一定的了解。

3.5 渐入佳境：[] 字符类

目录

 何为字符类？
 所谓字符类，就是一组类似的元素 [] 这样的中括号的整体，所代表一个字符。
 话不多说，先上代码：

js 代码片段

var str1 = "abcd";
var re1 = /a[bcd]c/;
console.log(re1.test(str1)); // true

var str2 = "abc";
var re2 = /a[^bcd]c/;
console.log(re2.test(str2)); // false

var str3 = "a.c";
var re3 = /a[a-z0-9A-Z]c/;
console.log(re3.test(str3)); // false

Console
true
false
false

 首先，我们先解析第一部分：

• /a/：匹配字母 a
• /[bcd]/：匹配字母 bcd 中的一位
• /[d]：匹配字母 d

 所以，可以看出，我们用 re1 来测试 str1 是否符合，它会返回 true。

 然后，我们解析第二部分：

• ^ 如果写在 [] 里面的话，就代表排除的意思。在这里就代表着 a 和 c 中间不能是 bcd 中的任意一个

 所以，可以看出，我们用 re2 来测试 str1 是否符合，它会返回 false。

 最后，我们解析第三部分：

• /[a-z0-9A-Z]/：匹配小写字母 a-z，或者数字 0-9，或者大写字母 A-Z。即 a 与 c 之间只能是上面匹配地上的字符。

 所以，可以看出，我们用 re3 来测试 str3 是否符合，它会返回 false。

四 回顾总结

目录

 在第三章中，我们介绍了强大之处，介绍了它的使用方法，并通过小练习、() 以及 [] 的讲解，让小伙伴们更进一步了解在 JavaScript 中正则的使用……
 但！
 这是完结吗？！
 不！
 由于 jsliang 时间有限，没法一一给小伙伴们介绍正则的乐趣及工作中如何使用正则提高工作效率。
 所以，在第二章 【整合】 中，jsliang 整合网上资源，记录了一些常用的正则工具，里面有很多东西，是在这篇文章中没有涉及的，有兴趣的小伙伴可以逐一尝试加深对正则的了解。

 ————For the end————
 在编写这篇文章中，jsliang 玩性大发写下了下面的游戏（请用电脑查看）：

• 游戏地址：天下第一武道会
• 代码地址：github.com/LiangJunron…

五 文章更正

目录

1. 掘金评论 2018-11-20

• 类型：内容错误
• 反馈用户：Kaelalv
• 反馈内容：3.2内容中对这段代码解析时：

var str = 'abc-cba_abc'; 
var reg = /^[a-z0-9_-]{6,12}$/; 
console.log(reg.test(str)); // true 

 作者手误，打错：不符合则 返回 true；正确：不符合则 返回 false。

• 反馈处理：已更正，谢谢反馈

 如果小伙伴们觉得本文还不错，记得 掘金 给个赞并去 GitHub 点个 star， 你们的 star 是我学习的动力！GitHub 地址

jsliang 的文档库 由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.om/LiangJunron…上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。