JavaScript学习笔记——11、正则表达式

大家好，我是阿赵。继续学习JavaScript，这次学习的是正则表达式。

一、 什么是正则表达式

正则表达式（Regex）是一种强大的文本模式匹配工具，用于对字符串进行搜索、替换和验证。

正则表达式的作用有：

1. 匹配
2. 替换
3. 提取
     JavaScript主要提供了2个方法来匹配正则表达式：

const str = 原字符串
const reg = 正则表达式条件

1. reg.test(str)

判断是否有匹配，如果匹配，则返回true，否则返回false。

例子：

  const str = 'Azhao is a handsome boy';
  const reg = /a/;
  const result = reg.test(str);
  console.log(result);

结果：

2. reg.exec(str)

获取匹配的结果，如果匹配，返回一个数组，否则返回null。

例子：

  const str = 'Azhao is a handsome boy';
  const reg = /handsome/;
  const result = reg.exec(str);
  console.log(result);

结果：

使用正则表达式最关键的是写正则表达式条件，所以下面会介绍一下。

二、 元字符

在正则表达式里面，输入的内容分为了2种，一种是普通字符，另一种是特殊字符，也叫元字符。

1、 普通字符

只能描述自身，例如所有的字母和数字。

普通字符只能起到完全匹配和它们相同的字符。

上面举的例子，我需要匹配handsome这个单词，本身就是普通字符，如果原始字符串里面包含一模一样的handsome这个单词在里面，就可以匹配得到，否则只要有一点点差别，就会匹配失败。

2、 元字符

具有特殊含义的字符。

举一个例子，如果我们想表达包含包含数字，我们不需要从0到9逐个去匹配，只要写一个[0-9]，就可以代表数字，这就是有特殊含义的字符。

元字符的分类：

1. 边界符

表示位置，比如必须用什么开头，或者用什么结尾

(1) 以谁开头

例子：

  const str = 'Azhao is a handsome boy';
  const reg = /^Azhao/;
  const result = reg.test(str);
  console.log(result);

这样的结果是true

  const str = 'Azhao is a handsome boy';
  const reg = /^handsome/;
  const result = reg.test(str);
  console.log(result);

这样的结果是false。

说明：

通过^符号，可以指定使用什么字符串作为开始。第一个例子^Azhao，意思是使用Azhao作为字符串的开始，在Azhao前面不会再有别的字符了。原字符串的确是Azhao开始的，所以能匹配成功。第二个例子^handsome，虽然原字符串的确包含了handsome字符串，但并不是以它作为开始的，所以匹配不成功。

(2) 以谁结尾

例子：

  const str = 'Azhao is a handsome boy';
  const reg = /boy$/;
  const result = reg.test(str);
  console.log(result);

结果是true，这里通过在最后面添加$符号，代表在boy后面就没有其他东西了。

2. 量词

可以表示重复次数，比如：
*：重复0或者更多次

例子：

  const str = 'hello world';
  const reg = /hella*o/;
  const result = reg.test(str);
  console.log(result);

结果是true。虽然字符串里面并没有出现hell后面跟着字符串a的情况，但由于星号是重复0或更多次，所以就算没有，也能匹配。所以星号更多时候是用来测试那些可以省略的条件的。
+：重复1或者更多次

例子：

  const str = 'hello world';
  const reg = /hella+o/;
  const result = reg.test(str);
  console.log(result);

结果是false，因为原字符串里面并没有在hell后面跟着a的情况。如果改成

const reg = /hel+o/;

这次的结果就是true了。因为在he后面，跟随着不止1个l，符合了l+的条件。所以加号一般是用于那些不能省略的条件的。
?：重复0或1次

例子：

  const str = 'hello world';
  const reg = /hel?o/;
  const result = reg.test(str);
  console.log(result);

结果是false，因为我们所谓的量词，是跟随在需要出现的字符后面的，所以l?是一个整体，在原字符串里面，he后面跟随的是2个l，而l？的意思是0个或者1个l，所以并不匹配。

如果改成：

const reg = /hell?o/;

这样的结果就是true了， 因为hel后面有1个l，符合l？的条件。所以问号一般是用在需要精确到数量1的情况。
{n}：重复n次

例子：

  const str = 'hello world';
  const reg = /hel{2}o/;
  const result = reg.test(str);
  console.log(result);

结果是true，因为he后面跟随了2个l，刚好符合条件。

如果改成：

const reg = /hel{1}o/;

结果就是false了，因为数量对不上。
{n,}：重复n次或更多次

例子：

  const str = 'hellllo world';
  const reg = /hel{2,}o/;
  const result = reg.test(str);
  console.log(result);

结果是true，留意这次的原字符串已经被改了，he后面跟着4个l，所以我匹配的是l大于等于2次，都是符合的。
{n,m}：重复n次到m次

例子：

  const str = 'hello world';
  const reg = /hel{2,4}o/;
  const result = reg.test(str);
  console.log(result);

结果是true，因为我匹配的数量是he后面有2-4个l，原字符串里面he后面有2个l，符合条件。

3. 字符类

(1) 字符集合

可以使用中括号把一部分待选的字符放在一起，起到集合的作用，比如：

  const str = 'hello world';
  const reg = /hel[abclmn]o/;
  const result = reg.test(str);
  console.log(result);

结果是true，因为[abclmn]代表的含义是只要在这里面出现其中一个字符，都是符合的。

数字集合可以和量词一起使用，比如：

const reg = /wo[rl]+d/;

把条件改成这样之后，只需要在wo后面跟随的是有rl其中一个字母大于1个再接上字母d，都认为是通过。

(2) 连接符

在字符集合里面，通过添加符号-，达到代表一个范围的字符的作用，比如：
[a- z]:小写字母
[A- Z]:大写字母
[0-9]:数字。

举例：

  const str = 'abcdeFGHIJ12345';
  const reg = /[a-z]+[A-Z]+[0-9]+/;
  const result = reg.test(str);
  console.log(result);

结果是true，因为匹配的内容是前面一段小写字母，中间一段大写字母，后面一段是数字。

(3) 取反符

例子：

  const str = 'hello world';
  const reg = /[^a]+/;
  const result = reg.test(str);
  console.log(result);

结果是true，意思是只要原字符串里面没有字母a，就符合。

需要注意的是，这里的^{是写在中括号里面的，和之前的位置边界符代表开始的}是不一样的。取反符也可以和一个集合一起使用，比如：

const reg = /[^0-9]+/;

这里的结果也是true，因为只要没有数字在原字符串里面，就符合了。

(4) .符

这个点符号可以代表除了换行符以外的任意单个字符。比如：

  const str = 'hello world';
  const reg = /h...o/;
  const result = reg.test(str);
  console.log(result);

这里的结果也是true，因为在h和o之间可以有3个除了换行符以外的任意符号。

点符号也可以和其他量词一起使用，比如：

const reg = /h.+o/;

这里代表的是，只要h和o之间有除了换行符以外的任意字符，不论数量，都可以匹配到。

三、 预定义

在正则表达式里面，有一些预先设定了含义的写法：
\d：相当于[0-9]，代表所有的数字
\D：相当于[^0-9]，代表的是除了数字以外的所有字符
\w：相当于[A-Za-z0-9]，代表所有的字母和数字
\W：相当于[^A-Za-z0-9]，代表了除了字母和数字以外的所有字符
\s：相当于[\t\r\n\v\f]，代表了匹配空格类符号，包括制表符、换行符这些可以被trim删掉的特殊字符
\S：相当于[^\t\r\n\v\f]，代表匹配非空的字符

所以如果条件写成：

const reg = /[\d\D]+/;

那么基本上可以匹配所有非空字符串了

四、 修饰符

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

写法：

/表达式/修饰符

1、 忽略大小写

i， 字母不区分大小写。

比如：

  const str = 'Hello world';
  const reg = /hello/;
  const result = reg.test(str);
  console.log(result);

这时候的结果是false，因为原字符串的H是大写的，而条件里面的h是小写的。

如果改成：

const reg = /hello/i;

这时候结果是true，因为i代表了忽略大小写，所以不论h是大写还是小写，都符合要求。

2、 匹配所有满足正则表达式的结果

正常的情况下，正则只会匹配第一个符合的结果，如果加上修饰符g，就可以变成匹配所有符合的条件。

这个一般是用于字符串替换里面的，比如：

  const str = 'Hello world';
  const reg = /l/;
  const result = str.replace(reg, 'L')
  console.log(result);

这时候结果是：

会发现，只有第一个l被替换成了大写。

如果把条件改成：

  const reg = /l/g;

结果是：

所有的l都被替换成大写的L了。