正则表达式

基本概念

背景

  • 当需要对各种数据进行验证(用户名、密码、用户输入的手机号、邮箱)时，为了验证用户输入的是合法，会写大量的验证代码来处理。这样回导致代码量过大。需要一个更好的数据验证的方案-正则表达式

概念

  • 正则表达式本质上是一个特殊的字符串。它是按照一定格式书写，能够用来对其他的字符串进行判断验证，可以用来判断某个字符串是否符合我们 条件，这种字符串就是一个正则表达式。
  • 正则表达式需要我们学习语法编写字符串，用JavaScript提供的api用来对其他字符串进行判断，判断是否满足正则表达式的条件。

正则表达式语法

使用

  1. var 正则表达式变量名= /正则表达式语法/;
  2. var 正则表达式变量名 = new RegExp("正则表达式","正则表达式模式");
  3. 正则表达式变量名.test(待判断的字符串);
  5. 例子：判断字符串是否是一个数字
  6. var str = "a";//要判断的数据
  7. var reg = /[0-9]/;//正则表达式
  8. console.log(reg.test(str));//false
  • 书写正则表达式后，可以利用JavaScript提供的test()来判断某个字符串是否满足正则表达式,test返回布尔型数据，true表示满足，false表示不满足。

一般使用流程

  1. 先根据验证要求写出对应的 正则表达式
  2. 再利用正则表达式.test(要验证的数据)来进行判断

注意点

  • 正则表达式是从左往右依次按照顺序来判断的，即也会判断字符串的书写顺序。

基础语法

  • [0-9]:表示匹配一个数字
  • [a-z]:表示匹配一个小写字母

  • [A-Z]:表示匹配一个大写字母

    • [123abc]:表示匹配一次 1 2 3 a b c 6个字符中的其中一个
  • [a-zA-Z]:表示匹配一个小写或大写字母，
  • [a-z0-9A-Z]:表示匹配一个数字或字母

  • {m,n}:表示匹配前一项的次数，至少m次，最多n次。 最多的话需是在匹配整个字符串的时候才有效。

    • 匹配5个数字:[0-9]{5}
    • 匹配至少5个数字:[0-9]{5,}
    • 匹配最多5个数字：[0-9]{,5}
    • 匹配最少2个数字，最多5个数字:[0-9]{2,5};

  • ^:表示从开头进行匹配

    • 匹配以数字开头:^[0-9]
    • 匹配以字母开头:^[a-zA-Z]
    • 匹配以小写字母开头:^[a-z]

  • $:表示匹配以什么结束

    • 匹配以数字结尾[0-9]$
    • 匹配以3个字母结束[a-zA-Z]{3}$
    • 匹配以一个小写字母结束:[a-z]$

  • ^$:表示匹配 是整个字符串

    • 字符串是否是18位数字:/^[0-9]{18}$/
  • (a|b|c):匹配abc中的其中一个字母,等同于[abc]
  • (a|b)bc:匹配abc 或bbc中的一种
  • James bond:匹配James bond
  1. 基础例子:
  2.    1. 判断用户输入的字符串是否包含连续的3个数字  /[0-9][0-9][0-9]/
  3.     2. 判断用户输入的字符串是否包含连续的10个数字  /[0-9]{10}/
  4.     3. 判断用户输入的字符串是否包含至少连续的5个数字/[0-9]{5，}/
  5.     4. 判断用户输入的字符串是否包含至少连续的5个小写字母 /[a-z]{5}/
  6.     5. 判断用户输入的字符串是否包含至少5个最多10个连续的字母或数字  /[a-zA-Z0-9]{5,10}/
  7.     6. 判断用户输入的字符串是否以数字开头  /^[0-9]/ 
  8.     7. 判断用户输入的字符串是否以大写字母开头 /^[A-Z]/
  9.     8. 判断用户输入的字符串是否以小写字母结尾 /[a-z]$/
  10.     9. 判断用户输入的字符串是否以小写字母结尾 /[a-z]$/
  11.     10. 判断整个字符串是否是大写字母加一个数字 /^[A-Z][0-9]$/
  12.     11. 判断整个字符串是否是11位数字 /^[0-9]{11}$/
  13.     12. 判断整个字符串是否是james bond /^james bond$/
  14.     13. 判断整个字符串是否是JavaScript或TypeScript中的一个 /(Java|Type)Script/ 
  15.     14. 判断整个字符串是否是 HTML 或 CSS 或JavaScript中的一个 /(HTML|CSS|JavaScript)/
  17. 例子：
  18. //14
  19. var str = prompt('请输入字符串');
  20. var reg =/^(HTML|CSS|JavaScript)$/ ;
  21. console.log(reg.test(str));
  1. 练习：
  2. 1. 判断QQ号： 5~10位数字
  3. 2. 手机号：  11位数字，1开头，第二位至少为3
  4. 3. 邮箱：  以字母开头，后续跟1~10的字母或数字或_，后续跟@,@后跟2~3个字母或数字，后跟.,后跟com或cn或net

高级语法

语法扩展

  • \d:表示匹配一个数字。等同于[0-9]

    • 匹配手机号:1[3-9]\d{9}
    • 匹配5~10个数字:\d{5,10}

  • \w:表示匹配一个单词字符。等同于[0-9a-zA-
    Z_]

    • 匹配10个字母或数字或下划线:\w{10}
    • 匹配5到9个单词字符:\w{5,9}

  • *:匹配前一项出现的次数为0次、1次或多次。即可有可无,等同于{0,}

    • 匹配任意数量的字母:[a-zA-Z]*
    • 匹配任意数量的数字:\d*

  • +:匹配前一项的次数至少1次。等同于{1,}

    • 匹配至少1个数字:\d+

  • ?:匹配前一项的次数为0次或1次

    • 匹配一个数字后可以跟一个字母或无:\d[a-zA-Z]?

  • 匹配 +或? 或* 本身，需要进行转义,在符号前面加一个\。

    • 匹配一个一个数字跟一个+再跟一个数字：[0-9]\+[0-9]

正则表达式模式

  • 概念

    • 不同的正则表达式模式对于正则表达式有不同的作用，默认模式为u。

  • 常用模式

    • u:只匹配最近的一项
    • i:不考虑大小写
    • g:全局匹配
  • 指定模式
    1. var 正则表达式变量名= /正则表达式/模式

正则表达式在字符串中的应用

  • 字符串中的部分api是支持正则表达式：

    • match:通过正则表达式以及全局模式能够获取字符串中所有符合条件的内容 ```javascript 字符串.match(正则表达式)；

例子：找到字符串中所有的手机号并返回 var str =”张三：18325678901 李四：18325678902 王五：18325678903”; var reg = /1[3-9]\d{9}/g; var phone = str.match(reg); console.log(phone);//[“18325678901”, “18325678902”, “18325678903”]

  2.    - `split`：支持以正则表达式作为分隔符
  3. ```javascript
  4. 例子：把所有人名提取出来，放入数组中
  5. var str = "张三@李四$王五#赵六@@@田七&&王八";
  6. var newArr = str.split(/[@$#&]+/);
  7. console.log(newArr);
  • replace