0

0

JS基础系列之正则表达式

黄舟

黄舟

发布时间:2017-02-20 14:09:14

|

1504人浏览过

|

来源于php中文网

原创

正则表达式是一个很牛逼的东东,今天在这里只是简单的给刚刚接触js的人普及一下,里面若有争议的地方欢迎大家留言!

JS基础系列之正则表达式

1.1 什么是正则表达式

正则表达式(regular expression)是一个描述字符模式的对象,ecmascript的regexp 类表示正则表达式,而string和regexp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。

正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。

1.2 正则表达式的作用

正则表达式主要用来验证客户端的输入数据。

用户填写完表单单击按钮之后,表单就会被发送到服务器,在服务器端通常会用php、asp.net、jsp等服务器脚本对其进行进一步处理。因为客户端验证,可以节约大量的服务器端的系统资源,并且提供更好的用户体验。

二、创建正则表达式==(123)==

要使用正则表达式,必须先创建正则表达式对象,有2种创建对象的方式:

2.1 方式1:使用关键字new创建

var patt = new RegExp(pattern,modifiers);



参数1:正则表达式的模式。字符串形式

参数2:模式修饰符。用于指定全局匹配、区分大小写的匹配和多行匹配



2.2 方式2:使用正则表达式直接量

var pa = /pattern/modifiers;



两个/中间的表示正则表达式的模式,最后一个/的后面是模式修饰符

例如:上面的例子可以这样写 var pa = /girl/gi;

注意:这个时候模式和模式修饰符都能再添加双引号或单引号



三、正则表达式模式修饰符==(126)==

JavaScript中共有3种模式修饰符:g i u

 g:表示全局。意思是说会对一个字符串进行多次匹配。如果不写g则只匹配一次,一旦匹配成功,则不会再次匹配

 i:表示忽略大小写。意思是说在匹配的时候不区分大小写

 u:表示可以多行匹配。

四、正则表达式方法详解==(127)==

经常用到的正则表达式方法有两个test() 和 exec()

4.1 test()方法

test(字符串)

 参数:要匹配的字符串

 返回值:匹配成功返回true,失败返回false

在只想知道目标字符串与某个模式是否匹配,但不需要知道其文本内容的情况下,使用这个方法非常方便。因此, test() 方法经常被用在 if 语句中。



4.2 exec()方法

exec(字符串):该方法为专门为捕获组而设计的

 参数:要匹配的字符串

 返回值:返回的是一个数组。如果不匹配则返回null

 关于返回值数组的说明:

 它确实是Array的实例。

 但是这个数组有两个额外的属性:index和input

 index:表示匹配的字符串在源字符串中的索引

 input:表示匹配的源字符串。

 数组的第一项目是与整个模式匹配的字符串,其他项是与模式中捕获组匹配的字符串

 如果没有捕获组,则数组中只有第一项。关于捕获组的概念以后再说



所以我们如果想找到全部匹配的字符串可以时候用循环,结束条件就是匹配结果为null



分组。在正则表达式中用()括起来任务是一组。组可以嵌套。


//最终运行结果:
girlGirl
Girl
-------------
Girlgirl
girl
------------



五、正则表达式规则==(124124)==

表达式规则

正则表达式元字符是包含特殊含义的字符。它们有一些特殊功能,可以控制匹配模式的

方式。反斜杠后的元字符将失去其特殊含义。

字符类:单个字符和数字

[0-9A-Za-z]  

元字符/元符号                    匹配情况

.                         匹配除换行符外的任意字符

[a-z0-9]                     匹配括号中的字符集中的任意字符

[^a-z0-9]                     匹配任意不在括号中的字符集中的字符

\d ==[0-9]                    匹配数字

\D ==[^0-9]                        匹配非数字,同[^0-9]相同

\w     [0-9A-Za-z_]                    匹配字母和数字及_

\W                         匹配非(字母和数字及_)

字符类:空白字符

元字符/元符号                    匹配情况

\0                             匹配null 字符

\b                             匹配空格字符

\n                             匹配换行符

\r                             匹配回车字符

\t                             匹配制表符

\s                             匹配空白字符、空格、制表符和换行符

\S                             匹配非空白字符

字符类:锚字符

元字符/元符号                    匹配情况

^                             行首匹配

$                             行尾匹配

字符类:重复字符

元字符/元符号                                匹配情况

?  例如(x?)                            匹配0个或1 个x

*  例如(x*)                            匹配0个或任意多个x

+  例如(x+)                            匹配至少一个x

(xyz)+                                     匹配至少一个(xyz)

{m,n} 例如x{m,n}  n>=次数>=m            匹配最少m个、最多n个x

{n}                                        匹配前一项n次    

{n,}          匹配前一项n次,或者多次

六、常用正则表示==(128)==

1、检查邮政编码

var pattern = /[1-9][0-9]{5}/; //共6位数字,第一位不能为0
var str = '224000';
alert(pattern.test(str));



2、检查文件压缩包

var pattern = /[\w]+\.zip|rar|gz/; //\w 表示所有数字和字母加下划线
var str = '123.zip'; //\.表示匹配.,后面是一个选择
alert(pattern.test(str));



3、删除多余空格

var pattern = /\s/g; //g 必须全局,才能全部匹配
var reg=new RegExp('\\s+','g');
var str = '111 222 333';
var result = str.replace(pattern,''); //把空格匹配成无空格
alert(result);



4、删除空格

var pattern = /^\s+/; 
var str = ' goo gle ';
alert(str+" "+str.length);
var result = str.replace(pattern, '');
alert(result+" "+result.length);
pattern = /\s+$/; 
result = result.replace(pattern, '');
alert(result+" "+result.length);
pattern = /\s+/g; 
result = result.replace(pattern, '');
alert(result+" "+result.length);
5、简单的电子邮件验证
var pattern = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/;
var str = 'yc60.com@gmail.com';
alert(pattern.test(str));
var pattern = /^([\w\.\-]+)@([\w\.\-]+)\.([\w]{2,4})$/;
var str = 'yc60.com@gmail.com';
alert(pattern.test(str));



七、支持正则表达式的字符串方法



方法 描述
search 检索与正则表达式相匹配的第一个匹配项的索引。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。



以上所述是小编给大家介绍的JS基础系列之正则表达式,更多相关内容请关注PHP中文网(www.php.cn)! 


相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号