详解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 相关文章推荐
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
JS实现简单的表格增删
Jan 16 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
详解Js模块化的作用原理和方案
Apr 29 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
使用PHP求两个文件的相对路径
2013/06/20 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
简单理解Vue中的nextTick方法
2018/01/30 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
python 实现汉诺塔游戏
2020/11/28 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
自荐信格式简述
2014/01/25 职场文书
公司运动会策划方案
2014/05/25 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL