正则表达式是一种更为强大的字符串匹配、字符串查找、字符串替换等操作工具。今天来学习一下 JavaScript 中的正则表达式!
正则表达式(Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。它用一系列字符定义搜索模式。
正则表达式的用途有很多,比如:
正则表达式的语法如下:
/正则表达式主体/修饰符(可选)
先来看一个最基本的正则表达式:/处/,它只匹配到了字符串中的第一个“处”:
/处/
这里,正则表达式的主体就是“处”,没有使用修饰符,我们会在后面来介绍正则表达式的修饰符。
创建正则表达式的方式有两种:
/ /
const rex = /pattern/;
const rex = new RegExp("pattern");
这两种方法的一大区别是对象的构造函数允许传递带引号的表达式,通过这种方式就可以动态创建正则表达式。
通过这两种方法创建出来的 Regex 对象都具有相同的方法和属性:
let RegExp1 = /a|b/ let RegExp2 = new RegExp('a|b') console.log(RegExp1) // 输出结果:/a|b/ console.log(RegExp2) // 输出结果:/a|b/
关于正则表达式最复杂的地方就是如何编写正则规则了,下面就来看如何编写正则表达式。
如果我们想匹配 bat、cat 和 fat 这种类型的字符串该怎么办?可以通过使用字符集合来做到这一点,用 [] 表示,它会匹配包含的任意一个字符。这里就可以使用/[bcf]at/ig:
/[bcf]at/ig
可以看到,这里匹配到了字符串中的 bat、cat、fat。因为我们使用了 g 修饰符,所以匹配到了三个结果。
当然,字符集也可以用来匹配数字:
如果我们想要在字符串中匹配所有以 at 结尾的单词,最直接的方式是使用字符集,并在其中提供所有的字母。对于这种在一个范围中的字符, 就可以直接定义字符范围,用-表示。它用来匹配指定范围内的任意字符。这里就可以使用/[a-z]at/ig。
-
/[a-z]at/ig
可以看到,正则表达式按照我们的预期匹配了。
常见的使用范围的方式如下:
[a-f]
[a-z]
[A-Z]
[0-9]
[#$%&@]
[a-zA-Z0-9]
如果想要匹配三个字母的单词,根据上面我们学到的字符范围,可以这样来写:
[a-z][a-z][a-z]
这里我们匹配的三个字母的单词,那如果想要匹配10个、20个字母的单词呢?难道要一个个来写范围吗?有一种更好的方法就是使用花括号{}来表示,来看例子:
{}
可以看到,这里我们匹配到了所有连续5个字母的单词(包括超过5个字母的单词,不过只会匹配到前5个字母)。
其实匹配重复字符的完整语法是这样的:{m,n},它会匹配前面一个字符至少 m 次至多 n 次重复,{m}表示匹配 m 次,{m,}表示至少 m 次。
{m,n}
所以,当我们给5后面加上逗号时,就表示至少匹配五次:
所以这里就匹配到了所有连续5个或5个以上的单词。
当匹配次数为至少4次,至多5次时,匹配结果如下:
除了可以使用大括号来匹配一定数量的字符,还有三个相关的模式:
+
{1,}
*
{0,}
?
{0,1}
来看一个简单的例子,这里我们匹配的正则表达式为/a+/ig,结果如下:
/a+/ig
它和/a{1,}/ig的匹配结果是一样的:
/a{1,}/ig
使用/[a-z]+/ig就可以匹配任意长度的纯字母单词:
/[a-z]+/ig
使用元字符可以编写更紧凑的正则表达式模式。常见的元字符如下:
\d
\D
[^0-9]
\w
[0-9a-zA-Z]
\W
\s
[\t\v\n\r\f]
\t
\v
\n
\r
\f
\S
[^\t\v\n\r\f]
来看一个简单的例子:
这里使用\d来匹配任意数字、字母和下划线。这里就匹配到了7个连续四位的字符。
使用特殊字符可以编写更高级的模式表达式,常见的特殊字符如下:
.
\
|
[^]
来看一个简单的例子,如果我们使用 /ab*/ig 进行匹配,结果就如下:
/ab*/ig
那我们就是想要匹配 * 怎么办?就可以使用 \ 对其进行转义:
这样就只会匹配到 ab* 了。
ab*
或匹配也很简单,来看例子,匹配规则为:/ab|cd/ig,匹配结果如下:
/ab|cd/ig
这里就会匹配到字符串中所有 ab 和 cd 字符。那如果想要匹配 sabz 或者scdz呢?开头和结尾是相同的,只有中间的两个字符是可选的。其实只需要给中间的或部分加上括号就可以了:
ab
cd
sabz
scdz
取非规则在范围中使用,来看例子:
这里匹配到了所有非字母的字符。
如果我们想匹配字符串中以某些字符结尾的单词,以某些字符开头的单词该如何实现呢?正则表达式中提供了方法通过位置来匹配字符:
\b
\B
^
$
(?=p)
(?!=p)
最常见的就是匹配开始和结束位置。先来看一个开始位置的匹配,这里使用 /^ex/igm 来匹配多行中以ex 开头的行:
/^ex/igm
ex
使用/e$/igm来匹配以 e 结尾的行:
/e$/igm
可以使用 \w+$ 来匹配每一行的最后一个单词:
\w+$
需要注意,这里我们都使用 m 修饰符开启了多行模式。
m
使用 /(?=the)/ig 来匹配字符串中the前的面的位置:
/(?=the)/ig
the
我们可以使用\b来匹配单词的边界,匹配的结果如下:
这可能比较难理解,我们可以使用以下正则表达式来匹配完整的单词:\b\w+\b,匹配结果如下:
\b\w+\b
正则表达式常见的修饰符如下:
g
i
这些修饰符总是用在最后一个正斜杠后面,可以一起使用。下面来分别看看这些修饰符的作用。
最开始的例子中,字符串中有两个“处”,但是只匹配到了一个。这是因为正则表达式默认匹配第一个符合条件的字符。如果想要匹配所有符合条件的字符,就可以使用 g 修饰符:
/处/g
这样就匹配到了所有符合条件的字符:
当需要匹配引英文字符串,并且忽略字符串的字母大小写时,i 修饰符就派上用场了。先来看下面的表达式:
阅读
6452 阅读
6754 阅读
5175 阅读
6967 阅读
6891 阅读
7048 阅读
7421 阅读
6899 阅读
7025 阅读
6643 阅读
4774 阅读
5244 阅读
4070 阅读
4267 阅读
5335 阅读
4915 阅读
5369 阅读
4315 阅读
5519 阅读
3533 阅读
4256 阅读
3735 阅读
6110 阅读
6538 阅读
6164 阅读
6212 阅读
6226 阅读
6117 阅读
6619 阅读
6134 阅读
6152 阅读
7172 阅读
7184 阅读
7206 阅读
7269 阅读
7383 阅读
7309 阅读
3979 阅读
7252 阅读
正则表达式是一种更为强大的字符串匹配、字符串查找、字符串替换等操作工具。今天来学习一下 JavaScript 中的正则表达式!
一、基本概念
正则表达式(Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。它用一系列字符定义搜索模式。
正则表达式的用途有很多,比如:
正则表达式的语法如下:
先来看一个最基本的正则表达式:
/处/
,它只匹配到了字符串中的第一个“处”:这里,正则表达式的主体就是“处”,没有使用修饰符,我们会在后面来介绍正则表达式的修饰符。
二、创建方式
创建正则表达式的方式有两种:
/ /
之中:这两种方法的一大区别是对象的构造函数允许传递带引号的表达式,通过这种方式就可以动态创建正则表达式。
通过这两种方法创建出来的 Regex 对象都具有相同的方法和属性:
三、模式匹配
关于正则表达式最复杂的地方就是如何编写正则规则了,下面就来看如何编写正则表达式。
1、字符集合
如果我们想匹配 bat、cat 和 fat 这种类型的字符串该怎么办?可以通过使用字符集合来做到这一点,用 [] 表示,它会匹配包含的任意一个字符。这里就可以使用
/[bcf]at/ig
:可以看到,这里匹配到了字符串中的 bat、cat、fat。因为我们使用了 g 修饰符,所以匹配到了三个结果。
当然,字符集也可以用来匹配数字:
2、字符范围
如果我们想要在字符串中匹配所有以 at 结尾的单词,最直接的方式是使用字符集,并在其中提供所有的字母。对于这种在一个范围中的字符, 就可以直接定义字符范围,用
-
表示。它用来匹配指定范围内的任意字符。这里就可以使用/[a-z]at/ig
。可以看到,正则表达式按照我们的预期匹配了。
常见的使用范围的方式如下:
[a-f]
,匹配 a 到 f 的任意字符。[a-z]
,匹配 a 到 z 的任意字符。[A-Z]
,匹配 A 到 Z 的任意字符。[0-9]
,匹配 0 到 9 的任意字符。[#$%&@]
。[a-zA-Z0-9]
,匹配所有数字、大小写字母中的任意字符。3. 数量字符
如果想要匹配三个字母的单词,根据上面我们学到的字符范围,可以这样来写:
这里我们匹配的三个字母的单词,那如果想要匹配10个、20个字母的单词呢?难道要一个个来写范围吗?有一种更好的方法就是使用花括号
{}
来表示,来看例子:可以看到,这里我们匹配到了所有连续5个字母的单词(包括超过5个字母的单词,不过只会匹配到前5个字母)。
其实匹配重复字符的完整语法是这样的:
{m,n}
,它会匹配前面一个字符至少 m 次至多 n 次重复,{m}表示匹配 m 次,{m,}表示至少 m 次。所以,当我们给5后面加上逗号时,就表示至少匹配五次:
所以这里就匹配到了所有连续5个或5个以上的单词。
当匹配次数为至少4次,至多5次时,匹配结果如下:
除了可以使用大括号来匹配一定数量的字符,还有三个相关的模式:
+
:匹配前面一个表达式一次或者多次,相当于{1,}
。*
:匹配前面一个表达式0次或者多次,相当于{0,}
。?
:单独使用匹配前面一个表达式零次或者一次,相当于{0,1}
,如果跟在量词*、+、?、{}后面的时候将会使量词变为非贪婪模式(尽量匹配少的字符),默认是使用贪婪模式。来看一个简单的例子,这里我们匹配的正则表达式为
/a+/ig
,结果如下:它和
/a{1,}/ig
的匹配结果是一样的:使用
/[a-z]+/ig
就可以匹配任意长度的纯字母单词:4、元字符
使用元字符可以编写更紧凑的正则表达式模式。常见的元字符如下:
\d
:相当于[0-9]
,匹配任意数字。\D
:相当于[^0-9]
。\w
:相当于[0-9a-zA-Z]
,匹配任意数字、大小写字母和下划线。\W
:相当于:[^0-9a-zA-Z]。\s
:相当于[\t\v\n\r\f]
,匹配任意空白符,包括空格,水平制表符\t
,垂直制表符\v
,换行符\n
,回车符\r
,换页符\f
。\S
:相当于[^\t\v\n\r\f]
,表示非空白符。来看一个简单的例子:
这里使用
\d
来匹配任意数字、字母和下划线。这里就匹配到了7个连续四位的字符。5、特殊字符
使用特殊字符可以编写更高级的模式表达式,常见的特殊字符如下:
.
:匹配除了换行符之外的任何单个字符。\
:将下一个字符标记为特殊字符、或原义字符、或向后引用、或八进制转义符。|
:逻辑或操作符。[^]
:取非,匹配未包含的任意字符。来看一个简单的例子,如果我们使用
/ab*/ig
进行匹配,结果就如下:那我们就是想要匹配 * 怎么办?就可以使用
\
对其进行转义:这样就只会匹配到
ab*
了。或匹配也很简单,来看例子,匹配规则为:
/ab|cd/ig
,匹配结果如下:这里就会匹配到字符串中所有
ab
和cd
字符。那如果想要匹配sabz
或者scdz
呢?开头和结尾是相同的,只有中间的两个字符是可选的。其实只需要给中间的或部分加上括号就可以了:取非规则在范围中使用,来看例子:
这里匹配到了所有非字母的字符。
6、位置匹配
如果我们想匹配字符串中以某些字符结尾的单词,以某些字符开头的单词该如何实现呢?正则表达式中提供了方法通过位置来匹配字符:
\b
:匹配一个单词边界,也就是指单词和空格间的位置。\B
:匹配非单词边界。^
:匹配开头,在多行匹配中匹配行开头。$
:匹配结尾,在多行匹配中匹配行结尾。(?=p)
:匹配 p 前面的位置。(?!=p)
:匹配不是 p 前面的位置。最常见的就是匹配开始和结束位置。先来看一个开始位置的匹配,这里使用
/^ex/igm
来匹配多行中以ex
开头的行:使用
/e$/igm
来匹配以 e 结尾的行:可以使用
\w+$
来匹配每一行的最后一个单词:需要注意,这里我们都使用
m
修饰符开启了多行模式。使用
/(?=the)/ig
来匹配字符串中the
前的面的位置:我们可以使用
\b
来匹配单词的边界,匹配的结果如下:这可能比较难理解,我们可以使用以下正则表达式来匹配完整的单词:
\b\w+\b
,匹配结果如下:四、修饰符
正则表达式常见的修饰符如下:
g
:表示全局模式,即运用于所有字符串。i
:表示不区分大小写,即匹配时忽略字符串的大小写。m
:表示多行模式,强制 $ 和 ^ 分别匹配每个换行符。这些修饰符总是用在最后一个正斜杠后面,可以一起使用。下面来分别看看这些修饰符的作用。
最开始的例子中,字符串中有两个“处”,但是只匹配到了一个。这是因为正则表达式默认匹配第一个符合条件的字符。如果想要匹配所有符合条件的字符,就可以使用
g
修饰符:这样就匹配到了所有符合条件的字符:
当需要匹配引英文字符串,并且忽略字符串的字母大小写时,
i
修饰符就派上用场了。先来看下面的表达式:那PHP的现状究竟如何?
阅读
星际航天官网开始搭建
6452 阅读
Webmeng 域名抢注平台全新升级:支持三重返款!
6754 阅读
互联网抢注域名技巧
5175 阅读
Webmengweb 功能开始更新
6967 阅读
Webmng网页图形的优化和应用
6891 阅读
签约|新空间航天官网开发建设
7048 阅读
签约|CTO联盟平台开发建设
7421 阅读
签约|炫梦动漫官网开始开发制作
6899 阅读
签约|德聚仁合烘焙店在线商城开发
7025 阅读
再次签约|Happymeng网店升级和App全球多语言系统整合
6643 阅读
如何制作个人网站?怎么创建属于自己的网站?网站建设系统哪个比较好?...
4774 阅读
一篇带给你正则表达式完整指南
5244 阅读
Webmeng5代系统升级,大幅度优化系统结构
4070 阅读
JS 三种时间不同问候语
4267 阅读
企业为什么要做网站?
5335 阅读
Webmeng Studio 方案
4915 阅读
Webmeng 优化版全新上线 让网站流量节节升
5369 阅读
Webmeng:创建一个您引以为豪的网站
4315 阅读
Webmeng:建立您独特的在线形象
5519 阅读
我们如何做一个好用的网站
3533 阅读
sitemap.xml和sitemap.html的区别?
4256 阅读
什么网站地图?什么是sitemap?什么是xml?
3735 阅读
webmeng新版开始升级
6110 阅读
网站建设完成后需要做哪些维护工作?
6538 阅读
企业网站运营的核心是什么?
6164 阅读
如何确定网站建设需求?
6212 阅读
合理的网站设计才能更利于SEO优化
6226 阅读
企业建站别走入这些误区
6117 阅读
品牌营销网站建设怎么做?
6619 阅读
带你了解网站及网站的用途
6134 阅读
网页设计要如何提高用户体验度?
6152 阅读
PHP 8.0正式版发布,性能提升10%
7172 阅读
一个真正0基础小白学习前端开发的心路历程
7184 阅读
行业 | 商业网站常见的盈利模式
7206 阅读
微社区系统开发,互动社区网站制作,微信论坛平台建设,功能定制
7269 阅读
手机访问PC网站自动跳转到手机版
7383 阅读
做网站找哪个-做网站要看哪些方面
7309 阅读
怎么样让赚钱更轻松一点!精准的吸引流量有哪些小技巧呢?
3979 阅读
Webmeng 一站式建站平台 营销更简单
7252 阅读