JavaScript--正则表达式

正则表达式

正则表达式是由一个字符序列形成的搜索模式，可用作文本搜索和文本替换的操作，在代码中常简写为regexp、RE。

1.创建方式

• 字面量形式

  用一对反斜线包裹着正则表达式内容，例如/123/

  var reg=/正则表达式/修饰符;
  var reg1=/hello/g;
  

• 构造函数形式

  //修饰符可不写
  var reg=new RegExp("正则表达式","修饰符");
  var reg1=new RegExp("hello","g");
  

2.字符分类

• 特殊字符

  在正则表达式中正斜线 \ 属于特殊字符，将特殊字符转义成普通字符

• 普通字符

  字母、数字、下划线、汉字、无特殊含义的符号(,;!@等)

• 模式修饰符

  i：ignoreCase 匹配时忽略大小写

  m：multiline 多行匹配

  g：global 全局匹配

3.实例属性

• lastIndex：

  ​ 设置了全局匹配时，执行exec/test进行匹配，lastIndex会移动到匹配到的字符串的下一个位置，并返回，若指向的位置没有可以匹配的字符串时，下一次执行exec返回null，test返回false，lastIndex归零。

  ​ 未设置全局匹配时，lastIndex默认为0

• source：返回字面量形式的正则表达式（类似于toString）

• ignoreCase：判断正则表达式中是否有忽略大小写模式修饰符

• global：判断正则表达式中是否有全局匹配模式修饰符

• multiline：判断正则表达式中是否有多行匹配三个模式修饰符

4.实例方法

• exec()：用来匹配字符串中符合正则表达式的字符串，匹配成功返回一个结果数组，失败返回null

• test()：检测字符串中是否有可以匹配到正则表达式的字符串，返回true，否则返回false

• toString()/toLocaleString()：将正则表达式的内容转化成字面量形式字符串/有本地特色的字符串（JS中没效果）

• valueOf()：返回正则表达式本身

5.元字符语法

• 直接量字符

通过反斜线\作为转义字符进行转义

字符	匹配
字母和数字字符	自身
\o	Null字符
\t	制表符
\n	换行符
\v	垂直制表符
\f	换页符
\r	回车符

• 字符集合

  也称字符组，可匹配集合中的任意一个字符，或使用连字符‘-’指定范围

  方括号[ ]：匹配括号中的任意字符，例如[abcd]、[0-9]

  上尖号^：在方括号里面表示反义字符组，即除了括号中的字符均可匹配，在方括号外表示以该字符开始

• 边界符

  ^ 表示匹配以谁开始的字符串，若正则表示式开启了多行匹配，也会 对断行后的开始处进行匹配

  $ 表示匹配以谁结束的字符串，若正则表示式开启了多行匹配，也会 对断行后的开始处进行匹配

  ^和$可以结合使用，表示精确匹配

  \b 匹配一个零宽单词边界，表示一个单词的边界，即匹配旁边带有空格的单词，或者是字符（\w)和字符串开头/结尾处

  \B 匹配一个零宽非单词边界，和\b相反

var str = 'Hello World Hello JavaScript';
var reg1 = /\bHello\b/g;
var reg2 = /\Bcrip\B/g;
console.log(reg1.exec(str)); // Hello
console.log(reg2.exec(str));  //crip

• 字符类

  直接量字符单独放进方括号内就组成了字符类，例如[abcd]，可以匹配abcd的任意字符

字符类	含义
.	匹配除换行符\n和回车符之外的任何单个字符，等效于**[^\n\r]**
\d	匹配一个数字字符，等效于[0-9]
\D	[^0-9]
\w	匹配包括下划线的任何单个字符，包括AZ，az，0~9和下划线**""**，等效于 [a-zA-Z0-9]
\W	[^a-zA-Z0-9_]
\s	匹配任何Unicode空白字符，包括空格、制表符、换页符等，等效于[\f\t\n\r]
\S	[^\f\t\n\r]

6.数量词

字符	含义
*	>=0次
+	≥1 次
？	0或1次
{n}	n 次
{n,}	≥n 次
{n,m}	n到m 次

贪婪模式

表示尽可能多的匹配（首先取最多可匹配的数量为一组进行匹配），接着匹配剩余的字符串，直到匹配不到为止，为默认模式

var str = "123456789";
var reg = /\d{3,6}/g;
//此时会进行尽可能多的匹配，即匹配6个数字
console.log(reg.exec(str)); //[ '123456', index: 0, input: '12345678', groups: undefined ]
//匹配剩下的字符，依旧从6开始匹配，但是只有3个数字剩下，因此匹配3个数字
console.log(reg.exec(str)); // [ '789', index: 6, input: '123456789', groups: undefined ]

非贪婪模式

表示尽可能少的匹配（每次取最少匹配的数量为一组进行匹配），直到匹配不到为止
使用方法：在数量词后加上 ?

var str = "123456789";
var reg = /\d{3,6}?/g;
//此时进行尽可能少的匹配，即匹配3个数字
console.log(reg.exec(str)); //[ '123', index: 0, input: '123456789', groups: undefined ]
console.log(reg.exec(str)); // [ '456', index: 3, input: '123456789', groups: undefined ]
console.log(reg.exec(str)); // [ '789', index: 6, input: '123456789', groups: undefined ]

7.选择、分组、引用

• 选择

  字符 “|” 用于分割供选择的字符，类似于或者的意思，从左向右匹配，匹配到则结束匹配，返回结果

  var reg = /html|css|js/
  console.log(reg.exec('qweqwehtmlcss')); // html
  

• 分组

  使用字符 “()” 将字符串包括起来，即为分组

  //二者等价
  var reg=/csscsscss/;
  var reg=/(css){3}/;
  

• 候选

  分组+选择 组成候选，即在一个分组中，可以有很多候选表达式

  var reg = /I like (basketball|football|table tennis)/;
  

• 捕获与引用

  被正则表达式匹配（捕获）到的字符串会被暂存起来。从左括号出现的顺序进行匹配，其中，由分组捕获的串会从1开始编号，我们可以引用这些串

  **注意：**要被引用的串必须是分组中的，即正则表达式必须是()中的才可被引用，

  var reg = /(\d{4})-(\d{2})-(\d{2})/;
  var date = '2021-09-10';
  // 捕获前要先进行test或者exec
  reg.test(date);
  console.log(RegExp.$1); //2021
  console.log(RegExp.$2); //09
  console.log(RegExp.$3); //10
  

• 引用

  称为反向引用，\1引用的是第一个分组所捕获到的字符串，且引用的和分组中的字符串完全相同，若引用编号越界，则会当作普通表达式

  var reg = /(\w{3}) is \1/
  console.log(reg.test('kid is kid')); // true
  console.log(reg.test('kid is dik')); // false
  
  var reg = /(\w{3}) is \3/
  console.log(reg.test('kid is kid')); // false
  console.log(reg.test('kid is \3')); // true
  

8.String为提供正则表达式的方法

• search()：查找字符串中是否有匹配正则的字符串，有则返回字符串第一次出现时的位置，无则返回null，全局匹配不影响返回值

  var str = 'hello world hello';
  var reg = /hello/;
  var reg2 = /hello/g;
  console.log(str.search(reg)); // 0
  console.log(str.search(reg2));// 0
  

• match()：匹配字符串中符合正则表达式的字符串，未开启全局匹配时，返回该字符串的一个数组（包含位置、字符串内容），并且若添加了分组，数组中还包含分组的内容，若开启了全局匹配，会返回一个包含所有符合正则表达式的字符串数组，且不会再数组中添加分组内容

  var str = 'hello world hello';
  var reg1 = /hello/;
  var reg2 = /hello/g;
  var reg3 = /(he)llo/;
  var reg4 = /(he)llo/g;
  console.log(str.match(reg1));
  //[ 'hello', index: 0, input: 'hello world hello', groups: undefined ]
  console.log(str.match(reg2));
  //[ 'hello', 'hello' ]
  console.log(str.match(reg3));
  // [
  //   'hello',
  //   'he',
  //   index: 0,
  //   input: 'hello world hello',
  //   groups: undefined
  // ]
  console.log(str.match(reg4));
  //[ 'hello', 'hello' ]
  

• split()：以某种形式分割字符串，返回一个数组

  var str = "jerry123jack456lisi7777zhangsan";
  // 当数字出现一次或多次时
  var reg = /\d+/;
  var result = str.split(reg);
  console.log(result); // [ 'jerry', 'jack', 'lisi', 'zhangsan' ]
  

• replace()：满足正则表达式条件的内容将被替换，开启全局匹配，则替换所有满足条件的字符，返回替换后的字符串，不影响原字符串

  var str = 'javascript'
  var reg = /javascript/;
  var result = str.replace(reg, 'java');
  console.log(result); //java
  

9.前瞻表达式

又称零宽断言

表达式	名称	描述
(?=exp)	正向前瞻	匹配后面满足表达式exp的位置
(?!exp)	负向前瞻	匹配后面不满足表达式exp的位置

正向前瞻：

var str = 'Hello, Hi, I am Hilary.';
// 后面一定要匹配什么
var reg = /H(?=i)/g;
var newStr = str.replace(reg, "T");
console.log(newStr);//Hello, Ti, I am Tilary.

在这个DEMO中我们可以看出正向前瞻的作用，同样是字符"H"，但是只匹配"H"后面紧跟"i"的"H"。就相当于有一家公司reg，这时候有多名"H"人员前来应聘，但是reg公司提出了一个硬条件是必须掌握"i"这项技能，所以"Hello"就自然的被淘汰掉了。

负向前瞻：

var str = 'Hello, Hi, I am Hilary.';
// 后面一定不要匹配什么
var reg = /H(?!i)/g;
var newStr = str.replace(reg, "T");
console.log(newStr);//Tello, Hi, I am Hilary.

在这个DEMO中，我们把之前的正向前瞻换成了负向前瞻。这个正则的意思就是，匹配"H",且后面不能跟着一个"i"。这时候"Hello"就可以成功的应聘了，因为reg公司修改了他们的招聘条件，他们说"i"这门技术会有损公司的企业文化，所以我们不要了。

10.简单案例

1.验证是否为11位有效手机号码

• 以1为开头
• 第二位为3，4，5，7，8中的任意一位
• 最后以0-9的9个整数结尾

var reg = /^1[34578]\d{9}$/; 
console.log(reg.test(14987632454)); //true

2.密码验证

匹配密码，必须包含大写，小写和数字,和特殊字符(!,@,#,%,&),且大于6位

//前瞻表达式
var reg1 = /(?=\d+[a-z]+[A-Z]+[!@#%&]+[\da-zA-Z!@#%&]{3,})/;
console.log(reg1.test('A!s1sS!'));//true

3.判断五位数回文

判断一个五位数字是否是回文数字。（利用子表达式，捕获，反向引用）例如：12321 56965

var reg = /(\d)(\d)\d\2\1/;
var num = 56965;
var num1 = 12322;
console.log(reg.test(num));  //true
console.log(reg.test(num1)); //false

4.判断字符串

用js写一个函数，判断字符串是否是这样组成的：第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20。如果符合条件返回1，否则返回0。函数原型：function checkString(str)

function checkString(str) {
    var reg1 = /^[a-zA-Z]\w{4,19}$/;
    if (reg1.test(str))
        return 1;
    else
        return 0;
}
console.log(checkString('a123145/')); //0

5.将字符串转化成驼峰形式

给一个连字符串例如：get-element-by-id 转化成驼峰形式

驼峰形式：getElementById

var reg3 = /[-=+!@#$%^&*~\s](\w)/g;
var str3 = 'get=element!by id'
console.log(str3.replace(reg3, function (str) {
    return str[1].toString().toUpperCase();
}));  //getElementById

6.匹配1-255的数字

var reg4 = /^1\d\d$|^[1-9]$|^[1-9]\d$|^2[0-4]\d$|^25[0-5]$/;
console.log(reg4.test(244)); //true

7.匹配IPV4地址

每位范围在0-255之间，共有四位，例如255.255.255.255

var reg5 = /^(\d\.|[1-9]\d\.|1\d\d\.|2[0-4]\d\.|25[0-5]\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/;
console.log(reg5.test('257.0.0.15')); //false

8.匹配二进制数字

只有0,1两位数字，，且至少存在一位数字

var reg6 = /^[01]+$/g;
console.log(reg6.exec(101101));// true

9.匹配非零的十进制数字

匹配大于零的数字，且开头不能为0，即不能为01、02、03、001…等

至少有一位数字

var reg7 = /^[1-9]\d*/g;
console.log(reg7.test('000009'));//false