详解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 相关文章推荐
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
js实现网页随机验证码
Oct 19 Javascript
手写实现JS中的new
Nov 07 Javascript
详解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
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
JavaScript中的作用域链和闭包
2012/06/30 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
Python 正则表达式操作指南
2009/05/04 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
外科实习自我鉴定
2013/10/06 职场文书
食品采购员岗位职责
2014/04/14 职场文书
论文评语大全
2014/04/29 职场文书
铣工实训报告
2014/11/05 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
《颐和园》教学反思
2016/02/19 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
redis 存储对象的方法对比分析
2021/08/02 Redis
Javascript设计模式之原型模式详细
2021/10/05 Javascript