正则表达式系列，元字符加用法等

亦随
92 阅读1分钟

正则表达式

1650010352872.png

1650010430323.png

1.正则语法初体验

1650011874893.png

就是一个判断，判断成立就是true，不成立就是false，写法如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>01-正则语法的初体验.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      /* 
      正则的作用 寻找字符串  检测 这个字符串这有没有我想要的文字
       */
      const str = `金钱对你意味着什么？你有梦想吗？等等等等。一下子都让我陷入了沉思。真的需要好好的想想，然后写下来`;

      // 判断一下这个字符串中有没有 梦想 两个字

      // 定义规则
      const reg = /刘同学/;

      // 规则和字符串 匹配  test
      console.log(reg.test(str)); // 有 返回true 没有返回false
    </script>
  </body>
</html>

元字符

1650011874893.png 1650012058837.png

2.边界符

1650012069796.png

边界符 开头 ^ 结尾 $

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>02-边界符.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      const str = `金来123`;
      // const reg = /梦想/; // 只要字符串中 包含有 梦想  返回true

      // 你检测的字符串 必须要以 “梦” 开头  以 “想” 结尾
      //
      // const reg = /^金来$/; // 只能匹配 "金来"
      const reg = /^金来/; // `金来123`;
      // const reg = /金来$/; //  `1234323金来`; 
      // console.log(reg.test(str));


      /* 
      边界符 
      开头 ^ 
      结尾 $ 
       */

    </script>
  </body>
</html>

3.量词

1650013304321.png 都在表里

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>03-量词.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // const str="路飞";
      // const reg=/路飞/;
      // console.log(reg.test(str));

      //  *  表示 放在它前面那一个字符 可以出现0次或者多次
      // /^路*$/   => ""，  路，路路，路路路
      // console.log(/^路*$/.test('')); // true
      // console.log(/^路*$/.test('路')); // true
      // console.log(/^路*$/.test('路路')); // true
      // console.log(/^路*$/.test('路路路')); // true

      // + 表示 放在它前面那一个字符 可以出现1次或者多次
      // console.log(/^路+$/.test(''));
      // console.log(/^路+$/.test('路'));
      // console.log(/^路+$/.test('路路'));
      // console.log(/^路+$/.test('路路路'));

      // ？ 表示出现0次或者1次
      // console.log(/^路?$/.test(''));// true
      // console.log(/^路?$/.test('路')); // true
      // console.log(/^路?$/.test('路路')); // false
      // console.log(/^路?$/.test('路路路')); // false

      // {n} 放在它前面的那一个字符 出现n次
      // console.log(/^路{2}$/.test('')); // false
      // console.log(/^路{2}$/.test('路')); // false
      // console.log(/^路{2}$/.test('路路')); // true
      // console.log(/^路{2}$/.test('路路路')); // false

      // {n,} 放在它前面的字符 最少出现n次
      // console.log(/^路{2,}$/.test('')); //false
      // console.log(/^路{2,}$/.test('路')); // false
      // console.log(/^路{2,}$/.test('路路'));// true
      // console.log(/^路{2,}$/.test('路路路')); // true

      // {n,m} 放在它前面的字符 最少出现n次，最大是m次
      console.log(/^路{0,2}$/.test('')); // true
      console.log(/^路{0,2}$/.test('路'));  // true
      console.log(/^路{0,2}$/.test('路路')); // true
      console.log(/^路{0,2}$/.test('路路路'));  // false 

    </script>
  </body>
</html>

4.字符

1650015287362.png

. 表示除了（换行符之外）任意字符

都在表里

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>04-字符.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      //  . 表示除了（换行符之外）任意字符
      // console.log(/路/.test('飞')); // false
      // console.log(/./.test('飞')); // true
      // console.log(/路.飞/.test('路大飞')); // true
      // console.log(/路.飞/.test('路小飞')); // true
      // console.log(/路.飞/.test('路中飞')); // true
      // console.log(/路.飞/.test('路不飞')); // true
      // console.log(/路.飞/.test('路飞')); // false
      // console.log(/路.飞/.test('路 飞')); // false

      // \d 表示数字 任意一数字都为true
      // console.log(/\d/.test("路飞"));// false

      // console.log(/\d/.test("1路飞"));// true
      // console.log(/\d/.test("路3飞"));// true

      // \D 不是数字之外的任意1个字符
      // console.log(/\D/.test("123"));// false
      // console.log(/\D/.test("12a3"));// true
      // console.log(/\D/.test("12a3"));// true

      // \w  字母、数字、下划线
      // console.log(/\w/.test("123"));//  true
      // console.log(/\w/.test("%%"));//  false
      // console.log(/\w/.test("%1%"));//  true
      // console.log(/\w/.test("%a%"));//  true
      // console.log(/\w/.test("%_%"));//  true

      // \W  除去了 字母 、数字、下划线 之外字符
      // console.log(/\W/.test("123"));// false
      // console.log(/\W/.test("1%23"));// true

      // \s  匹配空格
      // console.log(/\s/.test("123"));// false
      // console.log(/\s/.test("1 23"));// true

      // \S 除了空格之外的字符
      // console.log(/\S/.test('123'));// true
      // console.log(/\S/.test(' '));// false
      // console.log(/\S/.test('   '));// false
    </script>
  </body>
</html>

5.字符中括号

中括号里面写代表一段范围，写法如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>05-字符.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // [ab]  => 可以匹配 a  或者 b
      // console.log(/[ab]/.test('a'));// true
      // console.log(/[ab]/.test('b'));// true
      // console.log(/[abc]/.test('c'));// true

      // 表示 a-z 任意的一个字母
      // console.log(/[a-z]/.test('c'));// true
      // console.log(/[a-z]/.test('d'));// true
      // console.log(/[a-z]/.test('123'));// false
      // console.log(/[a-d]/.test('a'));// true
      // console.log(/[a-d]/.test('g'));// false

      // 0-9 任意的一个数字
      // console.log( /[0-9]/.test("1") );// true
      // console.log( /[0-9]/.test("2") );// true
      // console.log( /[0-9]/.test("0") );// true

      // A-Z
      // console.log(/[A-Z]/.test("a"));// false
      // console.log(/[A-Z]/.test("B"));// true

      // 同时满足 0-9a-zA-Z
      console.log(/[0-9a-zA-Z]/.test('1'));// true
      console.log(/[0-9a-zA-Z]/.test('a'));// true
      console.log(/[0-9a-zA-Z]/.test('A'));// true
      console.log(/[0-9a-zA-Z]/.test(' '));// false
    </script>
  </body>
</html>

6.正则测试

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>06-测试正则.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 注册账号  填写用户名 规则 必须是字母，范围 3-8
      // console.log(/[a-zA-Z]/);// 一个字母
      // console.log(/[a-zA-Z]/.test("a"));// true
      // 3-8
      // {3,8} 修饰前面[]
      // console.log(/[a-zA-Z]{3,8}/.test("ab"));// false
      // console.log(/[a-zA-Z]{3,8}/.test("abc"));// true
      // console.log(/[a-zA-Z]{3,8}/.test("111222 abc 333444"));// true
      // 边界符
      // console.log(/^[a-zA-Z]{3,8}$/.test("111222 abc 333444"));// false
      // console.log(/^[a-zA-Z]{3,8}$/.test("abc"));// true

      // 手机号码 验证  知道手机号码的验证规则 不懂去百度
      // 规则 以数字1开头 第二位数字可以是 35789  其他9位数字 （11位数组）
      // console.log( /^1[35789]\d{9}$/.test("dd")  );// false
      // console.log( /^1[35789]\d{9}$/.test("12345678901")  );// false
      // console.log( /^1[35789]\d{9}$/.test("13345678901"));// false
      // console.log( /^1[35789]\d{9}$/.test("15345678901"));// false
      // console.log( /^1[35789]\d{9}$/.test("17345678901"));// false
      // console.log( /^1[35789]\d{9}$/.test("18345678901"));// false
      // console.log( /^1[35789]\d{9}$/.test("19345678901"));// false

      // 邮箱  yeah123@dsfdf.com
      //  邮箱名称  yeah123   可以是字母或者数字  最少要有一个 {1,} 或者 +
      // 分隔符  @
      // 字母或者数字
      // 匹配一个.   => \.
      // 规定 com  com

      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("yeah123@dsfdf"));// true
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("@dsfdf"));// false
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("sdfd@"));// false
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("sdfd@3"));// true

      // console.log(/./.test('a'));
      // 就想要表示. 本身   加一个反斜杠
      // console.log(/\./.test('a'));// false
      // console.log(/\./.test('.'));// true
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.com$/.test('sdfd@3')); // false
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.com$/.test('sdfd@3.com')); // true

      // 感受 代码不多 贼难！ 
      // 
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.c(om|n)$/.test('sdfd@3.com')); // true
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.c(om|n)$/.test('sdfd@3.cn')); // true
      // c om
      // c n
    </script>
  </body>
</html>
avatar
文章
阅读
粉丝