详解JavaScript正则表达式之RegExp对象


Posted in Javascript onDecember 13, 2015

一、RegExp对象概述
       RegExp对象表示正则表达式,RegExp是正则表达式的缩写,它是对字符串执行模式匹配的强大工具。RegExp对象用于规定在文本中检索的内容。当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp就是这种模式。简单的模式可以是一个单独的字符;更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等。
正则表达式可以规定字符串中的检索位置,以及要检索的字符类型等。
二、创建RexExp对象
创建正则表达式和创建字符串类似,创建正则表达式有两种方式:
       (1)使用字面量创建RegExp对象的语法:
       /pattern/attributes;
       (2)使用new关键词创建RegExp对象的语法:
       new RegExp(pattern, attributes);
参数释义:
       1参数pattern是一个字符串,指定了正则表达式的模式或其他正则表达式。
       2参数attributes是一个可选的模式字符串,包含属性 "g"、"i" 和 "m",分别用于指定全局匹配、不区分大小写的匹配和多行匹配。
       RegExp对象用于存储检索模式。通过new关键词来创建RegExp对象。以下代创建了名为pattern的 RegExp对象,其模式是 "e",当使用该RegExp对象在一个字符串中检索时,将寻找的是字符 "e"。

<span style="font-size:18px;">var pattern=new RegExp("e"); 
var pattern=new RegExp("e",gi);//设置全局搜素不区分大小写</span>

上述的也可以改成字面量的方式来创建,这种方式也是我们经常使用的方法:

<span style="font-size:18px;">var pattern=/e/; 
var pattern=/e/gi;</span>

三、RegExp对象详细解析
(1)RegExp对象属性

详解JavaScript正则表达式之RegExp对象

这些基本我们在上述的例子都已经见过,但我们还是举几个简单的例子来看一下:

<span style="font-size:18px;">var pattern=/e/gim; 
document.write(pattern.global+" ");//输出:true。说明设置了全局模式 
document.write(pattern.ignoreCase+" ");//输出:true 
document.write(pattern.multiline+" ");//输出:true 
document.write(pattern.source+" ");//输出:e</span>

(2)RegExp对象方法

详解JavaScript正则表达式之RegExp对象 

RegExp对象有3个方法:test()、exec()以及compile()。
1)test()方法检索字符串中的指定值,返回值是true或false。

<span style="font-size:18px;">var pattern=/e/; 
var str="The best things in life are free"; 
document.write(pattern.test(str));//输出:true</span>

2)exec()方法检索字符串中的指定值,返回值是被找到的值;如果没有发现匹配,则返回null。

实例:

<span style="font-size:18px;">var pattern=/e/; 
var str="The best things in life are free"; 
document.write(pattern.exec(str));//输出:e</span>

实例:
      向RegExp对象添加第二个参数,以设定检索。如果需要找到所有某个字符的所有存在,则可以使用 "g" 参数。
      在使用 "g" 参数时,exec() 的工作原理如下:

  •       1找到第一个 "e",并存储其位置。
  •       2如果再次运行exec(),则从存储的位置开始检索,并找到下一个 "e",并存储其位置。
<span style="font-size:18px;">var pattern=/e/g; 
var str="The best things in life are free"; 
do 
{ 
 var result=pattern.exec(str); 
 document.write(result+" "); 
} 
while(result!=null)</span>

输出的结果为:e e e e e e null
3)compile()方法用于改变正则表达式,compile()既可以改变检索模式,也可以添加或删除第二个参数。

<span style="font-size:18px;">var pattern=/e/; 
var str="The best things in life are free"; 
document.write(pattern.test(str));//输出:true 
pattern.compile("d"); 
document.write(pattern.test(str));//输出:false</span>

(3)支持正则表达式的String对象的方法

详解JavaScript正则表达式之RegExp对象

由于正则表达式和String对象有着一定的联系,因此String对象的一些方法可用于正则表达式:

<span style="font-size:18px;">var pattern=/e/g;//开启全局模式 
var str="The best things in life are free"; 
document.write(str.match(pattren)+"<br/>");//以数组的形式输出:e,e,e,e,e,e 
document.write(str.search(pattren)+"<br/>");//输出:2(返回第一个匹配到的位置) 
document.write(str.replace(pattren,"a")+"<br/>");//输出:Tha bast things in lifa ara fraa 
var pattern1=/\s/g;//\s表示空格字符 
document.write(str.split(pattren1));//输出:The,best,things,in,life,are,free</span>

(4)元字符是拥有特殊含义的字符:

详解JavaScript正则表达式之RegExp对象

由于这些使用广泛,我们只是举几个例子:

<span style="font-size:18px;">var pattern=/b.ue/;//点符号表示匹配除了换行符以外的任意字符。 
var str="blue"; 
document.write(pattern.test(str));//输出:true</span>

(5)方括号用于查找某个范围的字符:

详解JavaScript正则表达式之RegExp对象

<span style="font-size:18px;">var pattern=/[a-z]oogle/;//[a-z]表示26个小写字母,任意一个都可以匹配 
var str="woogle"; 
document.write(pattren.test(str));//输出:true</span>

(6)量词

详解JavaScript正则表达式之RegExp对象

<span style="font-size:18px;">var pattern=/go+gle/;//o*表示匹配至少一个0 
var str="google"; 
document.write(pattren.test(str));//输出:true</span>

四、常用的正则表达式
主要的是看变量patttern模式字符串表示的正则表达式。其余的是一些JS的基本的东西,可以忽略。
(1)检查邮政编码

<span style="font-size:18px;">var pattern=/^[0-9]{6}$/;//必须是6位,并且都是是数字 
var str=prompt("请输入邮政编码:"); 
if(pattern.test(str)) 
{ 
 alert("您输入的是正确的邮政标号!"); 
} 
else 
{ 
 alert("您输入的是错误的邮政标号!"); 
}</span>

输入一些数据运行的结果为:
输入:056500

详解JavaScript正则表达式之RegExp对象

详解JavaScript正则表达式之RegExp对象

 输入:123

详解JavaScript正则表达式之RegExp对象

详解JavaScript正则表达式之RegExp对象

(2)简单电子邮件地址验证

<span style="font-size:18px;">var pattern=/^([\w\.\-]+)@([\w\-]+)\.([a-zA-Z]{2,4})$/; 
var str=prompt("请输入邮箱名称:"); 
if(pattern.test(str)) 
{ 
 alert("您输入的是正确的邮箱名称!"); 
} 
else 
{ 
 alert("您输入的是错误的邮箱名称!"); 
}</span>

(3)检查上传文件压缩包

<span style="font-size:18px;">var pattern=/[\w]+\.zip|rar|gz/;//\w表示所有数字和字母以及下划线 
var str=prompt("请输入压缩包的名称:"); 
if(pattern.test(str)) 
{ 
 alert("您输入的是正确的压缩包名称!"); 
} 
else 
{ 
 alert("您输入的是错误的压缩包名称!"); 
}</span>

(4)检查手机号

<span style="font-size:18px;">var pattern=/^[1][0-9]{10}$/; 
var str=prompt("请输入手机号码:"); 
if(pattern.test(str)) 
{ 
 alert("您输入的是正确的手机号码!"); 
} 
else 
{ 
 alert("您输入的是错误的手机号码!"); 
}</span>

下面三个输出的结果就不再一一展示,只要写好模式正则表达式就可以检验输入的数据是否正确。由于刚刚接触正则表达式,可能有不正确的地方,自己会进行完善和修正,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
node使用promise替代回调函数
May 07 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
详解JavaScript基于面向对象之继承
Dec 13 #Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 #Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 #Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 #Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 #Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 #Javascript
JavaScript文档碎片操作实例分析
Dec 12 #Javascript
You might like
php4的彩蛋
2006/10/09 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
在python中bool函数的取值方法
2018/11/01 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
python实现梯度下降法
2020/03/24 Python
python实现对变位词的判断方法
2020/04/05 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
工作失职检讨书500字
2014/10/17 职场文书
寒假生活随笔
2015/08/15 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书