2024年前端最新JavaScript最后分水岭——正则表达式(2),前端rxjava面试

最后

编程基础的初级开发者,计算机科学专业的学生,以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念,以优化代码,提高编程技能。这份笔记都是可以作为参考的。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

名不虚传!字节技术官甩出的"保姆级"数据结构与算法笔记太香了

大家好!我是微风洋洋

也可以叫我洋锅

细心地小伙伴可能已经发现,我的个人简介中早已出现了洋锅。为什么要叫洋锅呢?

首先呢,大家都知道“一见杨过误终生”,杨过,洋锅,谐音岂不美哉!

而且,在我的家乡洋锅就是洋哥的意思,不过第二个发音没找到对应的汉字,就拿锅来背锅吧。

好了,切入正题,这篇文章是JavaScript最后一个分水岭,也是最后一个难关,正则表达式,你一定要挺过去。可能你没学过,但你肯定也听过它的大名,很重要。所以洋锅这次总结的也很详细,希望能对你有所帮助。

文章目录

  • 一、认识正则表达式

    • 🍅什么是正则表达式
  • 🍅如何使用正则

    • 🍑exec()方法
  • 🍑match()方法

  • 🍅获取正则对象

  • 二、字符类别与集合

    • 🍅字符类别
  • 🍅字符集合

  • 三、与正则相关的方法

    • 🍅RegExp类中的方法
  • 🍅String类中的方法

  • 四、字符限定与分组

    • 🍅字符限定
    • 🍑字符限定——限定符
  • 🍑字符限定——贪婪与懒惰匹配

  • 🍅括号字符

    • 🍑作用
  • 🍑捕获与非捕获

  • 🍑反向引用

  • 🍑零宽断言

  • 🍅正则运算符优先级

一、认识正则表达式

========================================================================

🍅什么是正则表达式


⭐️正则表达式(Regular Expression,简称regexp)

  • 是一种描述字符串结构的语法规则。

  • 是一个特定的格式化模式,用于验证各种字符串是否匹配这个特征,进而实现高级的文本查找、替换、截取内容等操作。

应用:在项目开发中,手机号码指定位数的隐藏、数据采集、敏感词的过滤以及表单的验证等功能,都可以利用正则表达式来实现。

适用领域:在操作系统(Unix、Linux等)、编程语言(C、C++、Java、PHP、Python、JavaScript等)。

举例:以文本查找为例,若在大量的文本中找出符合某个特征的字符串(如手机号码),就将这个特征按照正则表达式的语法写出来,形成一个计算机程序识别的模式(Pattern),然后计算机程序就会根据这个模式到文本中进行匹配,找出符合规则的字符串。

⭐正则表达式的发展史

在这里插入图片描述

⭐正则表达式的表现形式

  • 一种是POSIX规范兼容的正则表达式,用于确保操作系统之间的可移植性。

  • 一种是当Perl(一种功能丰富的编程语言)发展起来后,衍生出来了Perl正则表达式,JavaScript中的正则语法就是基于Perl的。

🍅如何使用正则


在开发中,经常需要根据正则匹配模式完成对指定字符串的搜索和匹配。

在这里插入图片描述

🍑exec()方法

  • exec()方法用于在目标字符串中搜索匹配,一次仅返回一个匹配结果。

  • 例如,在指定字符串str中搜索abc。

在这里插入图片描述

  • “/abc/i”中的“/”是正则表达式的定界符,“abc”表示正则表达式的模式文本,“i”是模式修饰标识符,表示在str中忽略大小写。

  • exec()方法的参数是待匹配的字符串str,匹配成功时,该方法的返回值是一个数组,否则返回null。

  • 从exec()的返回结果中可以看出,该数组保存的第1个元素(AbC)表示匹配到的字符串;第2个元素index表示匹配到的字符位于目标字符串中的索引值(从0开始计算);第3个参数input表示目标字符串(AbC123abc456)。

🍑match()方法

String对象中的match()方法除了可在字符串内检索指定的值外,还可以在目标字符串中根据正则匹配出所有符合要求的内容,匹配成功后将其保存到数组中,匹配失败则返回false。

在这里插入图片描述

  • 定位符“^”,可用于匹配字符串开始的位置。

  • 定位符“$”,可用于匹配字符串结尾的位置。

  • g表示全局匹配,用于在找到第一个匹配之后仍然继续查找。

🍅获取正则对象


在JavaScript应用中,使用正则表达式之前首先需要创建正则对象。除了前面讲解过的字面量方式创建外,还可以通过RegExp对象的构造函数的方式创建。

在这里插入图片描述

  • pattern是由元字符和文本字符组成的正则表达式模式文本。

  • 元字符是具有特殊含义的字符,如“^”、“.”或“*”等。

  • 文本字符就是普通的文本,如字母和数字等。

  • flags表示模式修饰标识符,用于进一步对正则表达式进行设置。

在这里插入图片描述

  • 模式修饰符,还可以根据实际需求多个组合在一起使用。

  • 例如,既要忽视大小写又要进行全局匹配,则可以直接使用gi,并且在编写多个模式修饰符时没有顺序要求。

  • 因此,模式修饰符的合理使用,可使正则表达式变得更加简洁、直观。

为了让读者更好的理解正则对象的获取,以匹配特殊字符“^”、“$”、“*”、“.”和“\”为例进行对比讲解。

在这里插入图片描述

  • 选择符“|”表示“或”,查找条件只要其中一个条件满足即可成立。

  • JavaScript中字符串存在转义问题,因此代码中str里的“\”表示反斜线“\”。

  • 在正则中匹配特殊字符时,也需要反斜线(\)对特殊字符进行转义。例如,“\\”经过字符串转义后变成“\”,然后正则表达式再用“\”去匹配“\”。

📌注意

构造函数方式与字面量方式创建的正则对象,虽然在功能上完全一致,但它们在语法实现上有一定的区别,前者的pattern在使用时需要对反斜杠(\)进行转义。而后者的pattern在编写时,要放在定界符“/”内,flags标记则放在结尾定界符之外

二、字符类别与集合

========================================================================

🍅字符类别


好处:有效的使用字符类别可以使正则表达式更加简洁,便于阅读。

举例1:大写字母、小写字母和数字可以使用“\w”直接表示。

案例2:若要匹配0到9之间的数字可以使用“\d”表示。

在这里插入图片描述

下面为了方便读者理解字符类别的使用,以“.”和“\s”为例进行演示.

在这里插入图片描述

  • 正则对象reg用于匹配空白符后的任意两个字符(除换行外)。

  • 因此在控制台查看到的结果中,id前有一个空格。

🍅字符集合


字符集合的表示方式:“[]”可以实现一个字符集合。

字符范围:与连字符“-”一起使用时,表示匹配指定范围内的字符。

反义字符:元字符“^”与“[]”一起使用时,称为反义字符。

不在某范围内: “^”与“[]”一起使用,表示匹配不在指定字符范围内的字符。

以字符串 ‘get好TB6’.match(/pattern/g) 为例演示其常见的用法。

在这里插入图片描述

📌注意

字符“-”在通常情况下只表示一个普通字符,只有在表示字符范围时才

作为元字符来使用。“-”连字符表示的范围遵循字符编码的顺序,如“a-Z”、“z-a”、“a-9”都是不合法的范围。

【案例】限定输入内容

在这里插入图片描述

代码实现思路

编写HTML,设置一个年(份)和月(份)的文本框,以及一个查询按钮。

获取操作的元素对象,对表单的提交进行验证。

验证年份, 正则:/^\d{4} / 。 验 证 月 份 , 正 则 : / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) ) /。验证月份,正则: /^((0?[1-9])|(1[012])) /。验证月份,正则:/((0?[1−9])∣(1[012]))/ 。

文本框获取焦点,去除提示框的颜色。文本框失去焦点,去除输入内容的两端的空白,并进行验证。

代码实现

限定输入内容

年份

月份

三、与正则相关的方法

=========================================================================

🍅RegExp类中的方法


test()方法:检测正则表达式与指定的字符串是否匹配。

在这里插入图片描述

匹配成功时,test()方法的返回值为true,否则返回false。

⭐️检测正则对象的模式修饰符

RegExp类中还有一些属性,用于检测当前正则对象使用的模式修饰符,以及指定下一次匹配的起始索引等。

在这里插入图片描述

下面为了读者更好的理解这些属性的使用,以实现空格的匹配为例进行演示。

在这里插入图片描述

🍅String类中的方法


⭐️search()方法:可以返回指定模式的子串在字符串首次出现的位置,相对于indexOf()方法来说功能更强大。

在这里插入图片描述

  • search()方法的参数是一个正则对象,如果传入一个非正则表达式对象,则会使用“new RegExp(传入的参数)”隐式地将其转换为正则表达式对象。

  • search()方法匹配失败后的返回值为-1。

⭐️split()方法:用于根据指定的分隔符将一个字符串分割成字符串数组,其分割后的字符串数组中不包括分隔符。

当分隔符不只一个时,需要定义正则对象才能够完成字符串的分割操作。

在这里插入图片描述

  • 按照字符串中的“@”和“.”两种分隔符进行分割。

  • split()方法的参数为正则表达式模式设置的分隔符,返回值是以数组形式保存的分割后的结果。

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

于根据指定的分隔符将一个字符串分割成字符串数组,其分割后的字符串数组中不包括分隔符。

当分隔符不只一个时,需要定义正则对象才能够完成字符串的分割操作。

在这里插入图片描述

  • 按照字符串中的“@”和“.”两种分隔符进行分割。

  • split()方法的参数为正则表达式模式设置的分隔符,返回值是以数组形式保存的分割后的结果。

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-MwPyUe1C-1715581151460)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值