5分钟教你学会JavaScript正则表达式
正则表达式在实际开发过程中和技术面试过程中的重要性不言而喻,本文仅仅只是教你如何在几分钟之类学会正则表达式,对于它的原理及运行机制不做介绍。
第一:什么是正则
正则表达式是一种用来描述一定数量文本的模式,用来匹配相同规范样式的文本。在JavaScript中用RegExp对象表示正则表达式( 即Regular Eexpression),它是对字符串执行模式匹配的强大工具。我们可以参看W3C所给的说明。
第二:创建一个正则表达式
在JavaScript中创建正则表达式,有2种方式,隐式和显式创建。 (gi 后文会给出解释)
隐式创建:
var regExp=/正则表达式/gi;
显式创建:
var regExp=new RegExp("正则表达式","gi");
由两种创建方式我们已经知道了正则表达式的基本构建方法。即 /正则表达式/gi;
在具体介绍正则表达式的使用细则及语法之前,我们先来学习JavaScript中RegExp类的两个方法,以方便我们后文的代码讲解,更多方法参看W3C文档。
①match:找到一个或多个正则表达式的匹配。
W3C所给的解释为match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
②replace:
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
鉴于RegExp方法较多,此处我们暂列两个,方便后文使用。
第三:语法详解
我会根据循序渐进的方式帮助大家理解正则的具体语法,提出问题,然后代码解决。
①匹配字符串中是否存在abc字符串,并返回
正则表达式 /abc/gi
代码:
var content=id.innerText; // 获取需要匹配的字符串内容
var myreg=/abc/gi; // 正则表达式
res=content.match(myreg);
for(var i=0;i<res.length;i++){
window.alert(i+" "+res[0]); // res详情参考W3C文档
}
由上可以知道,我们若要匹配某个具体的字符串,只需在两个 / 字符之间写入匹配的字符串。
②匹配 1221、112233、010-11223344 形式的字符串
当需要匹配上述字符串时,我们采用第一种方法已经不能适用。在讲述新方法之前,先讲解如何匹配数字表示和反向引用的一些粗浅知识。
匹配数字我们用\d表示,在JavaScript正则表达式中用()包括起来的内容是一个子表达式,如:\(\d)(\d)\gi 其中第一个括号表示第一个子表达式,第二个括号表示第二个子表达式。现在给出1221的正则表达式,为
/(\d)(\d)\2\1/gi; // 1221 2334 5667 类似格式的数字
上述\2\1大家不理解什么意思,这就要牵涉反向引用的概念了,\2表示匹配的是和第二个子表达式的相同的内容(即在此处第二个数和第三个数相同),\1表示匹配的是和第一个子表达式的相同的内容(即在此处第一个数和第四个数相同)。
当我们理解了反向引用的概念后,匹配后面2个格式的表达式就很轻松了。
112233格式:
/(\d)\1(\d)\2(\d)\3/gi; // 112233 334422 类似格式的数字
010-11223344格式:
/(\d){3}-(\d)\2(\d)\3(\d)\4(\d)\5/gi;
该正则表达式,(\d){3}表示为3个数字。
例子:
若我们用1{3}匹配1111111会得到多少什么结果?用1{3,4}匹配1111111会得到什么结果?编写程序证实你的猜想。({3,4}表示匹配至少3个,至多4个)
看到此处,希望读者能够运用我上述所讲的方法,证实自己的猜想,因为里面牵涉JavaScript正则匹配的两个规则。
答案:
1{3}匹配1111111得到111 111。这是因为正则匹配的时候,当匹配到一个字符串时,会自动从下一个字符开始匹配。
1{3,4}匹配1111111得到1111 111。JavaScript匹配的时候遵循一个贪婪原则,即尽可能匹配多的,当多的匹配不满足时,才退而求其次,在此处若能匹配到1111则会先匹配4个1,匹配不到则匹配111。
③+、*、?讲解
+:表示匹配1次到任意多次
如:
/a+/gi; // 匹配 a一个至多个
/(\d)+/gi; // 匹配 数字一个至多个
*:表示匹配0次到任意多次
如:
/a*/gi;
/(\d)*/gi;
/a1*/gi; // 若匹配a111 得到a111
?:表示匹配0次到1次
/a1?/gi; // 若匹配a111 得到a1
④{}、[]、^、$ 讲解
{}:上文已经提及,表示具体量
[]: 表示范围
如:
/[a-z]/gi; // 匹配 a到z 的任意1个字符,等价于/[a-z]{1}/gi
/[a-z]{2}/gi; // 匹配 a到z 的任意2个字符
^:表示“匹配目标字符串的开始位置”,若此字符若位于[]括号内,表示“否定”的意思
如:
/[^a-z]/gi; // 不是a到z的任意一个字符
/[^0-9]/gi; // 不是0到9的任意一个字符
/^[a-zA-Z0-9]{2}/gi; // 以数字或者字母开头的2个字符
$:表示“匹配目标字符串的结束位置”
⑤其他字符表示
\D :\d的反面,匹配非数字 ,即等价于[^0-9]
\w :匹配任意英文字符
\W:\w的反面,匹配非英文字符 ,即等价于 [^a-zA-Z0-9_]
\s : 匹配任何空白字符(空格,制表符等)
\S :\s的反面,即匹配任何非空白字符
. : 匹配出 \n 之外的所有字符,如果要匹配,匹配自己则需要使用 \. (即匹配. 为/\./gi)
⑥需要转义的字符:
正如⑤中的 . 所示,当需要匹配 . 的时候,我们需要加上转义字符。总结一下,JavaScript中匹配字符需要用到转义字符的有。
. * + ( ) $ / \ ? [ ] ^ { }
⑦选择匹配符 |
在正则匹配的时候,有时需要匹配多个正则表达式,此时则需要用到选择匹配符|,可以看做是编程中“或”的意思
如:
/[a-z]{3}|[A-Z]{2}/g; // 匹配a到z的3个字符或者是A到Z的2个字符都可
第四:最后补充
讲解一下正则表达式中gi所表达的意思。之所以放在文章最后,是为了帮助大家直接了解正则有关的内容,更快的方式来使用它。
gi是RegExp类中的实例属性:其实有gims四个,其中:
g: global之意,表示全局匹配
i: ignoreCase之意,表示忽略大小写
m: multiple之意,表示多行匹配,即考虑换行这个因素,即匹配时将换行后的字符串当作新的一个字符串匹配
s: source之意,表示返回创建RegExp对象实例时指定的表达式文本字符串
正则匹配时根据需要填写相应的属性。
最后,希望这篇文章能够真正帮助到那些正则学习正则表达的人们,小白一枚,粗浅言论,希望大家勿喷。
给大家一个js验证表单的网址,里面有一些正则表达式验证,可以学学稳固一下知识:http://www.jb51.net/article/4976.htm
5分钟教你学会JavaScript正则表达式的更多相关文章
- 10分钟 教你学会Linux/Unix下的vi文本编辑器
10分钟 教你学会Linux/Unix下的vi文本编辑器 vi编辑器是Unix/Linux系统管理员必须学会使用的编辑器.看了不少关于vi的资料,终于得到这个总结.不敢独享,和你们共享. 首先,记住v ...
- 【原创】三分钟教你学会MVC框架——基于java web开发(1)
MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用于组织代码用一种业务逻辑和数据显示分离的方法. ...
- Docker虚拟化管理:30分钟教你学会用Docker
关于Docker的官方介绍网上太多了我就不贴了,就实际体验来说Docker可以极大的简化环境搭建及服务部署的操作流程,大大降低部署的时间成本,解放你的双手. 本文不会深入讲解Docker底层架构及运行 ...
- 【原创】三分钟教你学会MVC框架——基于java web开发(2)
没想到我的上一篇博客有这么多人看,还有几位看完之后给我留言加油,不胜感激,备受鼓励,啥都别说了,继续系列文章之第二篇.(如果没看过我第一篇博客的朋友,可以到我的主页上先浏览完再看这篇文章,以免上下文对 ...
- 5分钟教你学会Django系统错误监控
一.监控所有的request请求 如何实现系统监控,自动发送错误日志的邮件呢? 只需配置配置settings文件即可. 1.设置发送邮件配置信息 邮件会发送到ADMINS设定的邮件列表中. SERVE ...
- JavaScript正则表达式详解(一)正则表达式入门
JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...
- 正则表达式入门教程&&经典Javascript正则表达式(share)
前言 例子: ^.+@.+\\..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧.继续阅读本文将让你也可以自由应用这样的代码. 正文 教程:正则表达式30分钟入门教程 ...
- 自己实现的一款在线Javascript正则表达式测试器——JRE-Parser
本文最初发布于我的个人博客:http://jerryzou.com/posts/jreparser/ 昨天在看<正则表达式30分钟入门教程>的时候,看到博主自己实现了一个C#写的正则测试器 ...
- JavaScript 正则表达式基础语法
前言 正则表达式在人们的印象中可能是一堆无法理解的字符,但就是这些符号却实现了字符串的高效操作.通常的情况是,问题本身并不复杂,但没有正则表达式就成了大问题.javascript中的正则表达式作为相当 ...
随机推荐
- Effective C++ 第二版 40)分层 41)继承和模板 42)私有继承
条款40 通过分层来体现"有一个"或"用...来实现" 使某个类的对象成为另一个类的数据成员, 实现将一个类构筑在另一个类之上, 这个过程称为 分层Layeri ...
- motan源码分析六:客户端与服务器的通信层分析
本章将分析motan的序列化和底层通信相关部分的代码. 1.在上一章中,有一个getrefers的操作,来获取所有服务器的引用,每个服务器的引用都是由DefaultRpcReferer来创建的 pub ...
- Android Toast封装
package com.whoop.mobile.trace.util; import android.content.Context; import android.content.res.Reso ...
- 一起来写2048(160行python代码)
前言: Life is short ,you need python. --Bruce Eckel 我与2048的缘,不是缘于一个玩家,而是一次,一次,重新的ACM比赛.四月份校赛初赛,第一次碰到20 ...
- java GBK字符转换成为UTF-8编码字符
import java.util.HashMap; import java.util.Map; /** * 创建日期: 2014-04-18 10:36:25 * 作者: 黄飞 * mail:huan ...
- 了解SVG
页的节点类型,我们将说明怎样通过Illustrator高速的把SVG文档加入到网页中.我们还会讲讲D3.js,一个强大的.SVG控制的JavaScript库. "SVG并不仅仅用于像素处理. ...
- [React] Radium: Updating Button Styles via Props
In a CSS library like Bootstrap we can set a button's style to be "primary" or "secon ...
- 【C++深入探索】Copy-and-swap idiom详解和实现安全自我赋值
分类: C/C++2012-08-30 21:40 2017人阅读 评论(2) 收藏 举报 任何管理某资源的类比如智能指针需要遵循一个规则(The Rule of Three): 如果你需要显式地声明 ...
- Linux 多网卡的7种bond模式原理
Linux 多网卡绑定 网卡绑定mode共有七种(0~6) bond0.bond1.bond2.bond3.bond4.bond5.bond6 常用的有三种 mode=0:平衡负载模式,有自动备援,但 ...
- requestAnimationFrame 兼容处理
(function() { ; var vendors = ['ms', 'moz', 'webkit', 'o']; ; x < vendors.length && !wind ...