07-JS-web API-正则表达式-元字符

1 什么是正则表达式-以及使用

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象

通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

1 正则表达式在 JavaScript中的使用场景：

例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)

比如用户名: /^[a-z0-9_-]{3,16}$/

过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。

2 正则表达式-test()语法:

test方法用于判断是否有符合规则的字符串，返回的是布尔值找到返回 true，否则false

1 定义规则

const reg = / 梦想 /

2 查找

如何判断是否有符合规则的字符串: test()

	test() 方法 用来查看正则表达式与指定的字符串是否匹配

reg . test (被检测的字符串)

1650079100075

正则的作用寻找字符串检测这个字符串有没有我想要的文字

如:

    <script>
        //  正则的作用  寻找字符串  检测  这个字符串有没有我想要的文字

        const str=`金钱对你意味着什么？你有梦想吗？等等等等。一下子都让我陷入了沉思。真的需要好好的想想，然后写下来`

        // 判断一下这个字符串有没有  梦想 两个字
        // 定义规则
        const reg=/梦想/

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

3 正则表达式- exec()语法:

exec方法用于检索（查找）符合规则的字符串，找到返回数组，否则为 null

1650079364340

2 元字符-边界符

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

边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）

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

如果 ^ 开头 const reg=/^金来/ //'金来12323' ^开头只要匹配上就是true 否则 false

如果 $结尾 const reg=/金来$ / //'23324金来' $ 结尾只要匹配上就是true 否则 false

如果 ^ 和 $在一起，表示必须是精确匹配 const reg=/^金来$ / // ^ $ 只能匹配 '金来'

代码示例:

<!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>
    <script>
        const str=`231231金来`
        // const reg=/梦想/  //只要字符串中 包含有 梦想  返回true
        
        // 你检测的字符串 必须要以 “金” 开头  以 “来” 结尾
        // const reg=/^金来$/  // ^ $   只能匹配  '金来'

        // const reg=/^金来/  //'金来12323' ^开头只要匹配上就是true 否则 false
        const reg=/金来$/    //'23324金来'  $ 结尾只要匹配上就是true 否则 false
        console.log(reg.test(str));
    </script>
</body>
</html>

3 元字符-量词

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

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

注意: 逗号左右两侧千万不要出现空格

代码示例:

<!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('')); //false
    //   console.log(/^路+$/.test('路')); //true
    //   console.log(/^路+$/.test('路路')); //true
    //   console.log(/^路+$/.test('路路路')); //true

      // ？ 表示出现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 元字符-字符-预定类

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

. 点号是代表任意字符如果想要表示 . 点号本身加一个反斜杠

如: console.log( / \ . /.test( '.' ) ) / / true

预定类	说明
. 点号	表示除了（换行符之外）任意字符
\d	表示数字 0~9
\D	不是数字之外的任意1个字符
\w	字母、数字、下划线
\W	除去了字母、数字、下划线之外字符
\s	匹配空格( 包括换行符,制表符,空格符等 )
\S	除了空格之外的字符

代码示例:

<!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 表示数字 0~9
    //   console.log(/\d/.test("路飞"));// false
    //   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
    //   console.log(/\D/.test(" "));// 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
    //   console.log(/\s/.test("  "));// true

      // \S 除了空格之外的字符
    //   console.log(/\S/.test('123'));// true
    //   console.log(/\S/.test('12 3'));// false
    //   console.log(/\S/.test(' '));// false
    //   console.log(/\S/.test('   '));// false

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

5 元字符-字符-中括号

[ ] 匹配字符集合

[abc] 后面的字符串只要包含 abc 中任意一个字符，都返回 true

[ ] 里面加上 - 连字符

使用连字符 - 表示一个范围

[a-z] 表示 a 到 z 26个英文字母都可以

[a-zA-Z] 表示大小写都可以

[ ] 匹配字符集合	说明
[ab]	可以匹配 a 或者 b
[a-z]	表示 a-z 任意的一个字母
[0-9]	表示 0-9 任意的一个数字
[A-Z]	表示 A-Z 任意的一个字母
[0-9a-zA-Z]	表示同时满足 0-9a-zA-Z 任意字母与数字
[^a-z]	匹配除了26个小写英文字母之外的其他任何单个字符

代码示例:

<!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
    //   console.log(/[a-d]/.test('a2123'));// true
    //   console.log(/[a-d]/.test('2123a'));// true

      // 0-9 任意的一个数字
      // console.log( /[0-9]/.test("1") );// true
      // console.log( /[0-9]/.test("2") );// true
      // console.log( /[0-9]/.test("0") );// true
     //  console.log(/[0-9]/.test('9.9'));// true
     //  console.log(/[0-9]/.test('111'));// 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 替换符(修饰符)-replace

可以将字符串里面的内容替换

let dom = 变量 .replace( '原内容' , ' 替换内容 ' )

      let str = '天文 今天请吃饭';

      // 吃饭 -> 上天台
      // "字符串".replace("待替换文字","替换什么样")    返回一个新的字符串
      let newStr = str.replace('吃饭', '上天台');
      console.log(newStr);

拓展:

i 是单词 ignore 的缩写，正则匹配时字母不区分大小写

g 是单词 global 的缩写，匹配所有满足正则表达式的结果

把数字英文字母替换成 *

str = str.replace(/ \ d + /, '*'); // 找到一个或者多个数字，然后只替换成一个 *

str=str.replace ( / [a-zA-Z] / g ,"*") g 属于正则中的修饰符表示全局 global

      let str = '天文 HEIGHT 180 ';

      // 将数字 替换成 *
      // str.replace("支持正则的方式来匹配文字","要替换成什么样");
      // str = str.replace(/\d+/, '*');// 找到一个或者多个数字，然后只替换成一个 * 
      // str = str.replace(/\d/g, '*');// g 属于正则中的 修饰符 表示 全局 global 
      // console.log(str);

      //  把英文字母替换成 * 
      // str=str.replace(/[a-zA-Z]/g,"*")// 天文 ****** 180
      str=str.replace(/[a-z]/gi,"*") // 天文 ****** 180   i ignore忽略  忽略大小写 
      console.log(str);

案例:

测试正则:

注册用户手机号码验证邮箱验证

<!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"));// true
      console.log( /^1[35789]\d{9}$/.test("15345678901"));// true
      console.log( /^1[35789]\d{9}$/.test("17345678901"));// true
      console.log( /^1[35789]\d{9}$/.test("18345678901"));// true
      console.log( /^1[35789]\d{9}$/.test("19345678901"));// true

      // 邮箱  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>