Web Apls第八天

冯先生的博客
86 阅读1分钟

Web Apls第八天

正则表达式

1.介绍

1.正则表达式作用

①是用于匹配字符串中字符组合的模式

2.正则表达式使用场景

①表单验证（匹配）------->用户名表单只能输入(英文字母)、(数字)或者(下划线 _)，( 昵称输入框中可以输入中文)

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

③过滤敏感词（替换）

④字符串中提取我们想要的部分（提取）

3.案例:

<!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>

2.语法

1.定义正则表达式语法

let 变量名 = /表达式/      //其中/ / 是正则表达式字面量
//例如
let reg = /前端/

2.字符串

1.test() 方法

①用来查看正则表达式与指定的字符串是否匹配

②语法

regOBj.test(被检测的字符串)
//如果正则表达式与指定的字符串匹配 ，返回true，否则false

2.exec() 方法

①在一个指定字符串中执行一个搜索匹配

②语法

regOBj.exec(被检测的字符串
//如果匹配成功，exec() 方法返回一个数组，否则返回null

3.元字符

1. 边界符

1.作用

①表示位置，开头和结尾，必须用什么开头，用什么结尾

2.说明

① (^ )------->表示匹配行首的文本(以谁开始)

② ($)-------->表示匹配行首的文本(以谁介绍)

3.案例:

<!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>

2.量词

1.作用

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

2.写法

① ( * )-------> 重复0次或者更多次

② ( + )-------> 重复1次或者更多次

③ ( ? )-------> 重复0次或者1次

④ {n} -------> 重复n次

⑤ {n,} -------> 重复n次或者更多次

⑥ {n, m} -------> 重复n到m次

3.案例:

<!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('')); // true
      // console.log(/^路{2,}$/.test('路')); // true
      // 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>

3.字符类

1.字符类( . 点)

①匹配除换行符之外的任何单个字符

2.字符类( [ ] )

① [abc] 匹配abc其中的任何单个字符

② [a - z] 匹配26个小写英文字母其中的任何单个字符

③ (^ a - z )匹配除了26个小写英文字母之外的其他任何单个字符

3.写法

① (. 点号) ---------> 任意字符(不包含空格)

② ( \d )---------> 数字

③( \D )---------> 非数字

④ (\w) ---------> 字母 ,数字 ,下划线

⑤( \W ) --------->非字母, 数字 ,下划线

⑥ (\s) --------->匹配空格

⑦ (\S) --------->非空格

⑧ [abc] ---------> a 或者 b 或者 c

⑨ [a-z] ---------> 字母a-z

⑩ [A-Z] ---------> 大写字母

  1. [0-9] ---------> 数字0 - 9

  2. [a-zA-Z0-9] ---------> 大小写字母和数字

4.案例:

<!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 表示数字
      // 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>

4.修饰符

1.作用

①修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

2.语法

/表达式/修饰符

3.写法

1.( i )

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

2.( g )

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

3.( replace )

① 替换

②语法

字符串.replace(/正则表达式/, '替换的文本')
avatar
文章
阅读
粉丝