首页 web前端 js教程 JavaScript中的正则表达式

JavaScript中的正则表达式

Oct 13, 2016 am 11:19 AM

首先正则表达式是什么?

正则表达式是一个自定义规则的表达式,用来匹配符合定义的规则的字符串。什么意思?比如这是一个正则表达式:/\d/,\d的意思就是任意一个数字,所以这个正则表达式的意思就是匹配一个任意数字。大概明白了吧!

下面我们来看看正则表达式都由些什么东西组成。

一、直接量字符

1.png

二、范围类

1.png

什么意思?举个栗子:/[a-z]3{1,3}5+/这个表达式,意思是,任意一个英文字母出现一次,然后出现一到三次数字3,然后数字5至少出现一次。

下面我们在chrome调试工具中用test()方法试一下:

注:test()方法用来检验一个字符串是否匹配某个正则表达式,接收一个参数,即目标字符串,如匹配则返回true,否则返回false

1.png

三、字符类

1.png

什么东西,宝宝看不懂啊!让我们看个例子:/[abc]\w\d{2}/,这个表达式的意思是,匹配abc中任意一个,接下来是一个单词([a-zA-Z0-9])或者下划线,然后是两个数字。看图!

1.png

四、锚字符

1.png

这里说一下^,表示以……开头,我们看个例子:

1.jpg

作为对比,这里表达式中没有^

1.jpg

$原理跟^一样,这里不再赘述,只是需要注意一点,$需要写在表达式的最后面。

五、修饰符

1.jpg

在没有g修饰符的情况下,正则表达式匹配到第一项即停止匹配,当有g修饰符时,会找到所有匹配项。我们学习一个正则表达式的新方法replace():

注:replace()方法作用是替换字符串中规定的字符,接收两个参数,第一个参数是一个正则表达式,表示你要替换的内容,第二个参数是一个字符串,表示你要 替换成 的内容。看下面例子!

1.jpg

只替换了第一个数字,再看下有g修饰符的情况:

1.jpg

全部数字都被替换了,明白g是干嘛的了吧。

 

再说i,i修饰符就很简单了,表示不区分大小写,看下面例子:

1.jpg

加了i之后,不管大小写字母都被替换了!

 

最后m表示多行搜索,比如要匹配以字母a开头的字符串,在有m修饰符的情况下,换行后以a开头的行也会被匹配。限于篇幅这里不贴图了。

 

六、分组

正则表达式中用圆括号()表示分组,每个()表示一个分组。而分组中的内容用$1、$2……表示,仍然看例子:

比如日期有这两种表示法:月-日-年和年/月/日,怎么把月-日-年换成年/月/日呢?我们看看

1.jpg

在这个例子中,我们给月、日和年分了组,然后再利用$反向引用,于是实现了日期格式的转换。

 

七、方法

关于正则表达式的零零碎碎的东西基本讲完了,下面我们开始学习在正则表达式中用到的方法!有两类,一类是正则表达式对象方法,一类是字符串对象方法。

一、正则表达式对象方法

有两个,test()和exec()。test()方法我们学过了,现在讲讲exec()方法。

exec()方法返回一个数组,数组的第一个元素是匹配的文本,第二个元素是匹配文本的第一个子文本,第三个元素是匹配文本的第二个子文本……以此类推。这样很抽象,看下面例子就懂了!

exec()的调用又分两种情况:非全局调用和全局调用。

非全局调用情况:

看下图例子

1.jpg

这里我们看到,第一次匹配了"a12b",后面两个元素分别是第一个分组"1"和第二个分组"2"。可是第二次执行exec()方法,匹配的依然是"a12b",这是意料之外的。按理说第二次匹配的应该是"c56d",可是为什么还是"a12b"呢?原因就在lastIndex属性上。lastIndex属性表示上次匹配结果的最后一个字符的下一个字符,但是这属性只在全局调用时(即表达式中加了g修饰符的情况)生效,非全局调用时始终为0。作为对比,我们看看全局调用情况!

全局调用情况:

1.jpg

可以看到,第一次执行exec()返回了"a12b",lastIndex为4,即为字符串str中数字3的位置;第二次返回了"c56d",lastIndex为10,即为字符串str中数字7的位置。这时lastIndex起作用了,所以两次执行结果都在意料之中。

二、字符串对象方法

字符串对象方法有:search()、replace()、match()、split()。

一、search()方法

search()方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。如果匹配到,则返回第一个匹配结果的index,没匹配到则返回-1。接收一个参数,这个参数可以是字符串,也可以是正则表达式。这个方法每次都从字符串的开头开始匹配。我们看下面例子:

1.jpg

两次搜索数字2返回的index都是1,而不会是第二个数字2的index5。第三和第四次搜索传入一个正则表达式,都返回了相对应的index。

二、replace()方法

这个方法前面已经学过,这里继续。有这几种形式:replace(str,replaceStr)、replace(RegExp,replaceStr)、replace(RegExp,function)。前面两种比较简单,看个例子就懂了:

1.jpg

第一次传入字符串,把数字2替换成X,第二次传入正则表达式,把全部数字替换成X。

replace(RegExp,function)方法第二个参数是一个函数,这个方法适用于比较复杂的字符替换,大家有兴趣可以自己找学习资源,这里不作介绍。

三、match()方法

match()方法传入一个参数:正则表达式,用来查找字符串中与传入的正则表达式相匹配的文本,如找不到则返回null,如果找到,返回一个数组,这个数组在非全局调用和全局调用时是不一样的,下面分开说。

非全局调用:

在非全局调用时,返回的数组是这样的:第一个元素是匹配的文本,第二个元素是匹配文本的第一个子文本,第三个元素是匹配文本的第二个子文本……以此类推。是不是有似曾相识的感觉?没错,这一点和exec()方法一模一样。

1.jpg

非全局调用时每次查找依然从字符串的开头开始,下面看看全局调用!

全局调用:

在全局调用(即正则表达式中有g修饰符)时,返回的数组是这样的:数组的每一项都是匹配的文本,不再有匹配文本的子文本了。

1.jpg

和正则表达式相匹配的"a12b"和"c56d"都出现在数组里了。其实match()方法和exec()方法作用都是一样的,只不过一个由字符串调用,一个由正则表达式调用而已。

四、split()方法

split()方法用于把字符串分割成数组,什么意思呢?看下面例子:

1.jpg

split()方法接收的参数可以是字符串,也可以是正则表达式。从例子可以看到,参数传什么,就在字符串中去掉什么,然后分割成数组。


本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1668
14
CakePHP 教程
1428
52
Laravel 教程
1329
25
PHP教程
1273
29
C# 教程
1256
24
JavaScript引擎:比较实施 JavaScript引擎:比较实施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

Python vs. JavaScript:学习曲线和易用性 Python vs. JavaScript:学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

从C/C到JavaScript:所有工作方式 从C/C到JavaScript:所有工作方式 Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

JavaScript和Web:核心功能和用例 JavaScript和Web:核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在行动中:现实世界中的示例和项目 JavaScript在行动中:现实世界中的示例和项目 Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

了解JavaScript引擎:实施详细信息 了解JavaScript引擎:实施详细信息 Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python vs. JavaScript:社区,图书馆和资源 Python vs. JavaScript:社区,图书馆和资源 Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

Python vs. JavaScript:开发环境和工具 Python vs. JavaScript:开发环境和工具 Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

See all articles