1 正则表达式

1.1 什么是正则表达式

正则表达式是用于匹配规律规则的表达式，它的“鼻祖”可一直追溯到科学家对人类神经系统的工作原理的早期研究。现在在各种编程语言中，正则表达式都有广泛的应用。在JavaScript中，正则表达式也是对象，正则表通常被用来检索、替换那些符合某个模式(规则)的文本。
正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

1.2 正则表达式的作用

  1. 给定的字符串是否符合正则表达式的过滤逻辑(匹配)。
  2. 可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)。
  3. 强大的字符串替换能力(替换)。

1.3 正则表达式的特点

  1. 灵活性、逻辑性和功能性非常的强
  2. 可以迅速地用极简单的方式达到字符串的复杂控制
  3. 对于刚接触的人来说，比较晦涩难懂

1.4 正则表达式的组成

  • 普通字符
  • 特殊字符(元字符)：正则表达式中有特殊意义的字符

示例演示：

  • \d 匹配数字
  • ab\d 匹配 ab1、ab2

1.5 元字符串

1.5.1 常用元字符串

元字符说明
\d匹配数字
\D匹配任意非数字的字符
\w匹配字母或数字或下划线
\W匹配任意不是字母，数字，下划线
\s匹配任意的空白符
\S匹配任意不是空白符的字符
.匹配除换行符以外的任意单个字符
^表示匹配行首的文本(以谁开始)
$表示匹配行尾的文本(以谁结束)

1.5.2 限定符

限定符说明
*重复零次或更多次
+重复一次或更多次
?重复零次或一次
{n}重复n次
{n,}重复n次或更多次
{n,m}重复n到m次

1.5.3 其它

1.[] 字符串用中括号括起来，表示匹配其中的任一字符，相当于或的意思。
2.[^] 匹配中括号以外的内容，相当于非的意思。
3.\ 转义符。
4.| 或者，选择两者中的一个。注意|将左右两边分为两部分，而不管左右两边有多长多乱。
5.() 从两个直接量中选择一个，分组。 eg：gr(a|e)y匹配gray和grey。
6.[\u4e00-\u9fa5] 匹配汉字。

2 常用正则表达式

验证手机号：

^\d{11}$

验证邮编：

^\d{6}$

验证日期 2012-5-01：

^\d{4}-\d{1,2}-\d{1,2}$

验证邮箱 xxx@qq.cn:

^\w+@\w+\.\w+$

验证IP地址 192.168.1.10

^\d{1,3}\(.\d{1,3}){3}$

3 在JavaScript 中使用正则表达式

3.1 创建正则表达式对象

在 JavaScript 中，有两种方式创建正则表达式对象。

3.1.1 方式1

  1. var reg = new Regex('\d', 'i');
  2. var reg = new Regex('\d', 'gi');

3.1.2 方式2

  1. var reg = /\d/i;
  2. var reg = /\d/gi;

3.2 参数

标志说明
i忽略大小写
g全局匹配
gi全局匹配+忽略大小写

3.3 正则表达式匹配

匹配日期：

  1. //  匹配日期var dateStr = '2020-10-24';
  2. var reg = /^\d{4}-\d{1,2}-\d{1,2}$/console.log(reg.test(dateStr)); // true

3.4 实例

3.4.1 验证密码强弱

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>密码强弱：公众号AlbertYang</title>
  6. </head>
  7. <style type="text/css">
  8. #dv {
  9. width: 300px;
  10. height: 200px;
  11. position: absolute;
  12. left: 300px;
  13. top: 100px;
  14. }
  16. .strengthLv0 {
  17. height: 6px;
  18. width: 40px;
  19. border: 1px solid #ccc;
  20. padding: 2px;
  21. }
  23. .strengthLv1 {
  24. background: red;
  25. height: 6px;
  26. width: 40px;
  27. border: 1px solid #ccc;
  28. padding: 2px;
  29. }
  31. .strengthLv2 {
  32. background: orange;
  33. height: 6px;
  34. width: 80px;
  35. border: 1px solid #ccc;
  36. padding: 2px;
  37. }
  39. .strengthLv3 {
  40. background: green;
  41. height: 6px;
  42. width: 120px;
  43. border: 1px solid #ccc;
  44. padding: 2px;
  45. }
  46. </style>
  47. <body>
  48. <div id="dv">
  49. <label for="pwd">密码</label>
  50. <input type="text" id="pwd" maxlength="16">
  51. <div>
  52. <em>密码强度：</em>
  53. <span id="strength"></span>
  54. <div id="strengthLevel" class="strengthLv0"></div>
  55. </div>
  56. </div>
  57. <script>
  58. // 获取文本框注册键盘抬起事件
  59. document.getElementById("pwd").onkeyup = function() {
  60. // 每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
  61. // 如果密码的长度是小于6的,不判断
  62. let level = getLvl(this.value),
  63. levelStr = "弱";
  64. if (level === 2) {
  65. levelStr = "中等";
  66. } else if (level === 3) {
  67. levelStr = "强";
  68. }
  70. if (this.value.length >= 6) {
  71. document.getElementById("strengthLevel").className = "strengthLv" + level;
  72. document.getElementById("strength").innerHTML = levelStr;
  73. } else {
  74. document.getElementById("strengthLevel").className = "strengthLv0";
  75. document.getElementById("strength").innerHTML = "";
  76. }
  78. };
  80. // 根据密码返回对应的级别
  81. function getLvl(pwd) {
  82. let lvl = 0; // 默认是0级
  83. // 判断密码中是否有数字
  84. if (/[0-9]/.test(pwd)) {
  85. lvl++;
  86. }
  87. // 判断密码中有没有字母
  88. if (/[a-zA-Z]/.test(pwd)) {
  89. lvl++;
  90. }
  91. // 判断密码中是否有特殊符号
  92. if (/[^0-9a-zA-Z_]/.test(pwd)) {
  93. lvl++;
  94. }
  95. return lvl; // 最小值是1,最大值是3
  96. }
  97. </script>
  98. </body>
  99. </html>

3.4.2 验证邮箱

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>验证邮箱：微信公众号：AlbertYang</title>
  6. </head>
  7. <body>
  8. 请您输入邮箱地址:<input type="text" value="" id="email" /> *<br />
  9. <script>
  10. //如果输入的是邮箱,那么背景颜色为绿色,否则为红色
  11. //获取文本框,注册失去焦点的事件
  12. document.getElementById("email").onblur = function() {
  13. //判断这个文本框中输入的是不是邮箱
  14. let reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_-]+([.][a-zA-Z]+){1,2}$/;
  15. if (reg.test(this.value)) {
  16. this.style.backgroundColor = "green";
  17. } else {
  18. this.style.backgroundColor = "red";
  19. }
  20. };
  21. </script>
  23. </body>
  24. </html>

3.4.3 验证中文名字

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>验证中文名字：微信公众号AlbertYang</title>
  7. </head>
  8. <body>
  9. 请输入您的名字:<input type="text" value="" id="userName" />*<br />
  10. <script>
  11. // 是中文名字,则绿色,否则红色
  12. document.getElementById("userName").onblur = function() {
  13. var reg = /^[\u4e00-\u9fa5]{2,6}$/;
  14. if (reg.test(this.value)) {
  15. this.style.backgroundColor = "green";
  16. } else {
  17. this.style.backgroundColor = "pink";
  18. }
  19. };
  20. </script>
  22. </body>
  23. </html>

3.5 正则表达式提取

  1. // 提取年龄var str = "张三18，李四36，王五60";
  2. var array = str.match(/\d+/g);
  3. console.log(array);
  5. // 提取email地址var str = "4645354@qq.com,fangfang@usa.cn 256469312@qq.com,28265432@qq.com";
  6. var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
  7. console.log(array);
  9. // 分组提取 
  10. // 提取日期中的年  2020-10-24var dateStr = '2020-10-24';
  11. // 正则表达式中的()作为分组来使用，获取分组匹配到的结果使用Regex.$1 $2 $3...
  12. var reg = /(\d{4})-\d{1,2}-\d{1,2}/;
  13. if (reg.test(dateStr)) {
  14. console.log(RegExp.$1);
  15. }
  17. // 提取邮件中的每一部分var reg = /(\w+)@(\w+)\.(\w+)(\.\w+)?/;
  18. var str = "932errewerrw@126.com";
  19. if (reg.test(str)) {
  20. console.log(RegExp.$1);
  21. console.log(RegExp.$2);
  22. console.log(RegExp.$3);
  23. }

3.6 正则表达式替换

  1. // 1.替换所有空白字符var str = "   reeed  asafdre56df   3rfereww  rtere ";
  2. str = str.replace(/\s/g, "***");
  3. console.log(str);
  5. // 2.替换所有,或，var str = "abc,efg,123，abc,123，a";
  6. str = str.replace(/,|，/g, ":");
  7. console.log(str);

4 案例

4.1 表单验证案例

  1. <!DOCTYPE html><html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>表单验证：微信公众号AlbertYang</title>
  5. <style type="text/css">
  6. body {
  7. background: #ccc;
  8. }
  10. label {
  11. width: 40px;
  12. display: inline-block;
  13. }
  15. span {
  16. color: red;
  17. }
  19. .container {
  20. margin: 100px auto;
  21. width: 400px;
  22. padding: 50px;
  23. line-height: 40px;
  24. border: 1px solid #999;
  25. background: #efefef;
  26. }
  28. span {
  29. margin-left: 30px;
  30. font-size: 12px;
  31. }
  33. .wrong {
  34. color: red
  35. }
  37. .right {
  38. color: green;
  39. }
  41. .defau {
  42. width: 200px;
  43. height: 20px;
  44. }
  46. .de1 {
  47. background-position: 0 -20px;
  48. }
  49. </style>
  51. </head>
  53. <body>
  54. <div class="container" id="dv">
  55. <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br />
  56. <label>手机</label><input type="text" id="phone"><span></span><br />
  57. <label>邮箱</label><input type="text" id="e-mail"><span></span><br />
  58. <label>座机</label><input type="text" id="telephone"><span></span><br />
  59. <label>姓名</label><input type="text" id="fullName"><span></span><br />
  60. </div>
  61. <script>
  62. // qq
  63. checkInput(document.getElementById("qq"), /^\d{5,11}$/);
  64. // 手机
  65. checkInput(document.getElementById("phone"), /^\d{11}$/);
  66. // 邮箱
  67. checkInput(document.getElementById("e-mail"), /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
  68. // 座机号码
  69. checkInput(document.getElementById("telephone"), /^\d{3,4}[-]\d{7,8}$/);
  70. // 中文名字
  71. checkInput(document.getElementById("fullName"), /^[\u4e00-\u9fa5]{2,6}$/);
  73. // 根据文本框和这个文本框相应的正则表达式，验证当前文本框中的值，与给出的正则表达式否匹配
  74. function checkInput(input, reg) {
  75. // 文本框失去焦点的事件
  76. input.onblur = function() {
  77. if (reg.test(this.value)) {
  78. this.nextElementSibling.innerText = "正确";
  79. this.nextElementSibling.style.color = "green";
  80. } else {
  81. this.nextElementSibling.innerText = "错误,请您重新输入";
  82. this.nextElementSibling.style.color = "red";
  83. }
  84. };
  85. }
  86. </script>
  87. </body></html>

4.2 过滤敏感词汇案例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>过滤敏感词汇：公众号AlbertYang</title>
  6. </head>
  7. <body>
  8. <textarea name="" id="message"></textarea> <button>提交</button>
  9. <div></div>
  10. <script>
  11. var text = document.querySelector('textarea');
  12. var btn = document.querySelector('button');
  13. var div = document.querySelector('div');
  14. btn.onclick = function() {
  15. div.innerHTML = text.value.replace(/激情|gay|AV/g, '**');
  16. }
  17. </script>
  18. </body>