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了。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值