正则表达式

最新推荐文章于 2022-07-19 10:08:39 发布

BloggerM

最新推荐文章于 2022-07-19 10:08:39 发布

阅读量405

点赞数

分类专栏：正则表达式文章标签： javascript html 前端

本文链接：https://blog.csdn.net/HTML_Z/article/details/123931302

版权

正则表达式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

正则表达式

目标

能够说出正则表达式的作用
能够写出简单的正则表达式
能够使用正则表达式对表单进行验证
能够使用正则表达式替换内容

正则表达式通常用来检索。替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英字母、数字或者下划线，昵称输入框可以输入中文（匹配），此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。

1.2 正则表达式的特点

灵活性、逻辑性和功能性非常的强
可以迅速地用极简单的方式达到字符串的复杂控制
对于刚接触的人来说，比较晦涩难懂
实际开发，一般都是直接复制写好的正则表达式，但是要求会使用正则表达式并且根据实际情况修改正则表达式

2. 正则表达式在 JavaScript 中的使用

2.1 创建正则表达式

在 JavaScript 中，可以通过两种方式创建一个正则表达式

1. 通过调用 RegExp 对象的构造函数创建

  <script>
    // var 变量名 = new RegExp(/表达式/);
    // //注释中间放表达式就是正则字面量
    var regexp = new RegExp(/123/);
  </script>

2. 通过字面量创建

  <script>
    // var 变量名 = /表达式/;
    // //注释中间放表达式就是正则字面量
    var rg = /123/;
  </script>

2.2 测试正则表达式 test

test()正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串

regexObj.test(str)

regexObj是写的正则表达式
str我们要测试的文本
就是检测str文本是否符合我们写的正则表达式规范

  <script>
    var rg = /123/;
    console.log(rg.test(123)); // true
    console.log(rg.test("abc")); // false
  </script>

3. 正则表达式中的特殊字符

3.1 正则表达式的组成

一个正则表达式可以由简单的字符构成，比如/abc/，也可以是简单和特殊字符的组合，比如/ab*c/，其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专业符号，如^、$、+ 等。

3.2 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，只要有两个字符。

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

如果^和$在一起，表示必须是精确匹配。

  <script>
    var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
    // /abc/ 只要包含有abc这个字符串返回的都是true
    console.log(rg.test("abc")); // true
    console.log(rg.test("abcd")); // true
    console.log(rg.test("aabcd")); // true
    console.log(".............");
    var reg = /^abc/;
    // /^abc/ 只要是abc开头的字符串返回的都是true
    console.log(reg.test("abc")); // true
    console.log(reg.test("abcd")); // true
    console.log(reg.test("aabcd")); // false
    console.log(".............");
    var rege = /^abc$/;
    // /^abc$/ 只要是abc开头并且以abc结尾的字符串返回的都是true
    console.log(rege.test("abc")); // true
    console.log(rege.test("abcd")); // false
    console.log(rege.test("aabcd")); // false
    console.log(rege.test("abcabc")); // false
  </script>

3.3 字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

[a-z]方括号内部范围符

  <script>
    // 字符类：[] 表示有一系列字符可供选择 只要匹配其中一个就可以了
    var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
    console.log(rg.test("andy")); // true
    console.log(rg.test("bady")); // true
    console.log(rg.test("color")); // true
    console.log(rg.test("red")); // false
    console.log("..................");
    var reg = /^[abc]$/; // 三选一 只有是a 或者是b 或者是c 这三个字母才返回 true
    console.log(reg.test("abc")); // false
    console.log(reg.test("a")); // true
    console.log(reg.test("b")); // true
    console.log(reg.test("c")); // true
    console.log("..................");
    var rege = /^[a-z]$/; // 26个英文字母任何一个字母返回 true
    console.log(rege.test("a")); // true
    console.log(rege.test("h")); // true
    console.log(rege.test(1)); // false
    console.log(rege.test("A")); // false
  </script>

[^]方括号内部取反符^

  <script>
    var rege = /^[a-z]$/; // 26个英文字母任何一个字母返回 true
    console.log(rege.test("a")); // true
    console.log(rege.test("h")); // true
    console.log(rege.test(1)); // false
    console.log(rege.test("A")); // false
    console.log("..................");
    var rega = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写、数字、_、-都可以)任何一个字母返回 true
    console.log(rega.test("a")); // true
    console.log(rega.test("A")); // true
    console.log(rega.test(8)); // true
    console.log(rega.test("_")); // true
    console.log(rega.test("-")); // true
    console.log(rega.test("abc")); // false
    console.log(rega.test(1)); // false
    console.log("..................");
    // 如果中括号里面有 ^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
    var regb = /^[^a-zA-Z0-9_-]$/; // 不能包含26个英文字母(大写和小写、数字、_、-都可以) 取反
    console.log(regb.test("a")); // false
    console.log(regb.test("*")); // true
  </script>

3.4 量词符

量词符用来设定某个模式出现的次数

量词	说明
*	重复零次或更多次
+	重复一次或更多次
？	重复零次或一次
{n}	重复 n 次
{n,…}	重复 n 次或更多次
{n,m}	重复 n 到 m 次

  <script>
    // * 相当于 >=0 可以出现0次或者多次
    var reg = /^a*$/;
    console.log(reg.test("")); // true
    console.log(reg.test("a")); // true
    console.log(reg.test("aaaa")); // true
    console.log("================================");

    // + 相当于 >=1 可以出现1次或者很多次
    var rege = /^a+$/;
    console.log(rege.test("")); // false
    console.log(rege.test("a")); // true
    console.log(rege.test("aaaa")); // true
    console.log("================================");

    // ? 相当于 >=1 可以出现 1 || 0
    var rega = /^a?$/;
    console.log(rega.test("")); // true
    console.log(rega.test("a")); // true
    console.log(rega.test("aaaa")); // false
    console.log("================================");

    // {3} 相当于重复3次
    var regb = /^a{3}$/;
    console.log(regb.test("")); // false
    console.log(regb.test("a")); // false
    console.log(regb.test("aaa")); // true
    console.log(regb.test("aaab")); // false
    console.log("================================");

    // {3,} 大于等于3
    var regc = /^a{3,}$/;
    console.log(regc.test("")); // false
    console.log(regc.test("a")); // false
    console.log(regc.test("aaa")); // true
    console.log(regc.test("aaaa")); // true
    console.log("================================");

    // {3,5} 大于等于3 并且 小于等于5
    var regd = /^a{3,5}$/;
    console.log(regd.test("")); // false
    console.log(regd.test("a")); // false
    console.log(regd.test("aaa")); // true
    console.log(regd.test("aaaa")); // true
    console.log(regd.test("aaaaaa")); // false
    console.log("================================");

    var regf = /^[a-zA-Z0-9_-]{2,4}/;
    console.log(regf.test("andy_red")); // true
    console.log(regf.test("andy007")); // true
  </script>

3.5 案例：用户名验证

功能需求：

如果用户名输入合法，则后面提示信息为：用户名合法，并且颜色为绿色
如果用户名输入不合法，则后面提示信息为：用户名不符合规范，并且颜色为红色

分析

用户名只能为英文字母、数字、下划线或者短横线组成，并且用户名长度为 6~16 位
首先准备这种正则表达式模式
当表单失去焦点开始验证
如果符合正则规范，则让后面的 span 标签添加 right 类
如果不符合正则规范，则让后面的 span 标签添加 wrong 类

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        color: #aaa;
        font-size: 14px;
      }
      .right {
        color: green;
      }
      .wrong {
        color: red;
      }
    </style>
  </head>
  <body>
    <input type="text" class="uname" />
    <span>请输入用户名</span>
  </body>
  <script>
    var reg = /^[a-zA-Z0-9_-]{6,16}/;
    var uname = document.querySelector(".uname");
    var span = document.querySelector("span");
    uname.onblur = function () {
      if (reg.test(this.value)) {
        // console.log("正确的");
        span.className = "right";
        span.innerHTML = "用户名输入正确";
      } else {
        // console.log("错误的");
        span.className = "wrong";
        span.innerHTML = "用户名输入不正确";
      }
    };
  </script>
</html>

3.6 括号总结

大括号量词符里面表示重复次数

  <script>
    var reg = /^abc{3}$/; // 它只是让c重复3次 abccc
    console.log(reg.test("abc")); // false
    console.log(reg.test("abcabcabc")); // false
    console.log(reg.test("abccc")); // true
  </script>

中括号字符集合匹配方括号中的任意字符

  <script>
    var reg = /^[abc]$/;
  </script>

小括号表示优先级

  <script>
    var reg = /^(abc){3}$/; // 它只是让abc重复3次 abcabcabc
    console.log(reg.test("abc")); // false
    console.log(reg.test("abcabcabc")); // true
    console.log(reg.test("abccc")); // false
  </script>

3.7 预定义类

预定义类指的是某些常见模式的简写方式

预定义类	说明
\d	匹配 0~9 之间的任意一数字，相当于`[0-9]`
\D	匹配所有 0~9 以外的字符，相当于 `[^0-9]`
\w	匹配任意的字母、数字和下划线，相当于`[A-Za-z0-9]`
\W	除所有字母、数字和下划线以外的字符，相当于`[^A-Za-z0-9]`
\s	匹配空格（包括换行符、制表符、空格符等等）
\S	匹配非空格的字符

4. 正则表达式中的替换

4.1 `replace` 替换

replace()方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式

stringObject.replace()

第一个参数：被替换的字符串或者正则表达式
第二个参数：替换为的字符串
返回值是一个替换完毕的新字符串

4.2 正则表达式参数

/表达式/[switch]

switch(也称为修饰符）按照什么样的模式来匹配，有三种值：

g：全局匹配
i：忽略大小写
gi：全局匹配 + 忽略大小写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea></textarea>
    <button>提交</button>
    <div></div>
  </body>
  <script>
    var text = document.querySelector("textarea");
    var btn = document.querySelector("button");
    var div = document.querySelector("div");
    btn.onclick = function () {
      div.innerHTML = text.value.replace(/激情|gay/g, "**");
    };
  </script>
</html>