JavaScript引用类型RegExp基本用法详解


Posted in Javascript onAugust 09, 2018

本文实例讲述了JavaScript引用类型RegExp基本用法。分享给大家供大家参考,具体如下:

1、正则表达式定义

三个标志:全局模式g,不区分大小写模式i,多行模式m。

1) 字面量定义

var pattern = /[fe]at/gim;

2) 构造函数定义:

接收两个参数——要匹配的字符串模式和可选的模式字符串(g,i,m)。

var pattern = new RegExp("[fe]at","gim");

注意:

1) 若需要匹配的字符串中包含以下元字符,就必须对它们进行转义:( [ { \ ^ & | ) ? * + . ] }

2) 由于构造函数定义正则表达式的参数是字符串,所以在某些情况下要对字符时行双重转义如\n,字符\在字符串中通常被转义为\\,而在正则表达式字符串参数中就会变成\\\\,字面量模式/\w\\hello\\123/等价的字符串为“\\w\\\\hello\\\\123”。

2、RegExp实例属性

  • 1) global 表示是否设置了g标志。
  • 2) ignoreCase 表示是否设置了i标志。
  • 3) multiline 表示是否设置了m标志。
  • 4) lastIndex 用于记录上一次匹配结束的位置,即下一次开始搜索下一个匹配项的位置,从0算起。
  • 5) Source返回正则表达式的字符串表示,按照字面量模式返回而非传入构造函数的字符串模式返回。
var pattern = new RegExp("\\[fe\\]at","i");
alert(pattern.source);

以上代码返回\[fe\]at

3、RegExp实例方法

1) 继承的toLocaleString()toString()valueOf()方法

toLocaleString():返回正则表达式的字面量,与创建正则表达式的方式无关。

toString():返回正则表达式的字面量,与创建正则表达式的方式无关。

valueOf():返回正则表达式本身。

var pattern1 = /\[fe\]at/i);
var pattern2 = new RegExp("\\[fe\\]at","i");
alert(pattern1.toString()); // /\[fe\]at/i
alert(pattern1.toLocaleString()); // /\[fe\]at/i
alert(pattern2.toString()); // /\[fe\]at/i
alert(pattern2.toLocaleString()); // /\[fe\]at/i

2) match()方法

参数:用于匹配的正则表达式。

返回值:区分match()的返回值主要是看是否设置g标志,没有设置g标志时与exec()是等价的。

a. 如果设置g标志,那么返回的是包含所有匹配项的数组。

b. 如果没有设置g标志,那么返回的是包含第一个匹配项的数组,第0项是与整个正则表达式匹配的字符串,第1项是是与第1个子表达式相匹配的文本(如果有的话),第2项是与第2个子表达式相匹配的文本(如果有的话)。

3) exec()方法

参数:要应用模式的字符串。

返回值:返回包含第一个匹配项信息的数组,没有匹配项的情况下返回null。exec()的返回值不受g标志影响,在不设置g标志时,在同一个字符串上多次调用exec()将会始终返回第一个匹配项的信息。即使设置了g标志,一次也只返回一个匹配项,但设置g标志时,每次调用exec()都会在字符串中继续查找新匹配项,会驱动lastIndex可以模拟遍历所有匹配,可以与match()设置g标志时等价(区别在于遍历所有匹配时,exec()需要多次匹配,match()一次匹配即可得到所有匹配)。

返回的数组包含额外的两个属性:index和input。其中,index表示匹配项在字符串中的位置,而input表示应用正则表达式的字符串。在数组中,第0项是与整个正则表达式匹配的字符串,第1项是是与第1个子表达式相匹配的文本(如果有的话),第2项是与第2个子表达式相匹配的文本(如果有的话)。

var str = "Shanghai and Beijing and Guangzhou";
var pattern = /Shanghai ( and Beijing ( and Guangzhou)?)?/gi;
var match = pattern.exec(str);
alert(match.index);//0
alert(match.input);//"Shanghai and Beijing and Guangzhou"
alert(match[0]);//"Shanghai and Beijing and Guangzhou"
alert(match[1]);//"and Beijing and Guangzhou"
alert(match[2]);//"and Guangzhou"

在不设置g标志的情况下,同一个字符串上调用exec()始终返回第一个匹配项的信息。

var str = "fat eat";
var pattern = /.at/;
var match = pattern.exec(str);
alert(match.index);//0
alert(match.input);//fat eat
alert(match[0]);//fat
alert(pattern.lastIndex);//0
var match = pattern.exec(str);
alert(match.index);//0
alert(match.input);//fat eat
alert(match[0]);//fat
alert(pattern.lastIndex);//0

设置全局标志g情况下,同一个字符串上调用exec()每次会返回一个新的匹配项的信息。

var str = "fat eat";
var pattern = /.at/g;
var match = pattern.exec(str);
alert(match.index);//0
alert(match.input);//fat eat
alert(match[0]);//fat
alert(pattern.lastIndex);//3
var match = pattern.exec(str);
alert(match.index);//4
alert(match.input);//fat eat
alert(match[0]);//eat
alert(pattern.lastIndex);//7

4)  test()方法

参数:要应用模式的字符串

返回值:在模式与该参数匹配的情况下返回true,否则返回false。

test()方法经常用于if语句中。

问题:

如果正则表达式带有标志g,使用test校验不同的字符串时,RegExp会使用test前一个字符串得出的lastIndex去test后一个字符串,必定出错。

var pattern = /^[1-9]\d{4,10}$/gi;
var str = "88888";
alert(pattern.test(str));//返回true
str = "888888";
alert(pattern.test(str));//返回false

解决方法:

① 将正则表达式的 lastIndex 属性设置为0 再用作校验

var pattern = /^[1-9]\d{4,10}$/gi;
var str = "88888";
alert(pattern.test(str));//返回true
str = "888888";
pattern.lastIndex=0;
alert(pattern.test(str));//返回true

② 正则表达式去掉标志g

var pattern = /^[1-9]\d{4,10}$/i;
var str = "88888";
alert(pattern.test(str));//返回true
str = "888888";
alert(pattern.test(str));//返回true

5) 说明:

① exec()test()是正则表达式的方法,而不是字符串的方法,它的参数才是字符串;match是字符串的方法,而不是正则表达式的方法,它的参数才是正则表达式。

② 即使设置了g标志,exec()每次只返回一个匹配项。没有设置g标志时,exec()match()执行结果相同;设置g标志时,match()将忽略子表达式,只查找全匹配正则表达式。

③ exec()match()的区别:

a. 当正则表达式无子表达式,并且没有设置g标志时,exec()match()执行结果相同,均返回第一个匹配的字符串内容。

var pattern = new RegExp("cat") ;
var str = "onecat twocat";
alert(pattern.exec(str));//返回cat
alert(str.match(pattern));//返回cat

b. 当正则表达式无子表达式,并且设置g标志时,exec()返回第一个匹配的字符串内容,若存在多处匹配内容,则match()返回的是包含所有匹配字符串的数组。

var pattern = new RegExp("cat","g") ;
var str = "onecat twocat";
alert(pattern.exec(str));//返回cat
alert(str.match(pattern));//返回cat,cat

c. 当正则表达式有子表达式,并且没有设置g标志时,exec()match()执行结果相同,都查找全匹配正则表达式和子表达式,并返回包含全匹配字符串和匹配子表达式的数组。

var pattern = new RegExp("c(at)") ;
var str = "onecat twocat";
alert(pattern.exec(str));//返回cat,at
alert(str.match(pattern));//返回cat,at

d. 当正则表达式有子表达式,并且设置g标志时,exec()match()执行的结果不相同,match()将忽略子表达式,只查找全匹配正则表达式,并返回包含所有匹配字符串的数组。

var pattern = new RegExp("c(at)","g") ;
var str = "onecat twocat";
alert(pattern.exec(str));//返回cat,at
alert(str.match(pattern));//返回cat,cat

三个标志:全局模式g,不区分大小写模式i,多行模式m。

Javascript 相关文章推荐
javascript dom 操作详解 js加强
Jul 13 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
Javascript的无new构建实例详解
May 15 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
对node.js中render和send的用法详解
May 14 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 #Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 #Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 #Javascript
JavaScript引用类型Function实例详解
Aug 09 #Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 #jQuery
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 #Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 #Javascript
You might like
php daodb插入、更新与删除数据
2009/03/19 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
js三种排序算法分享
2012/08/16 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
详解Python map函数及Python map()函数的用法
2017/11/16 Python
wxpython实现图书管理系统
2018/03/12 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
pandas参数设置的实用小技巧
2020/08/23 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
PHP面试题附答案
2015/11/28 面试题
出纳员岗位职责风险
2014/03/06 职场文书
村级换届选举方案
2014/05/10 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
异地恋情人节寄语
2015/02/28 职场文书
酒店员工手册范本
2015/05/14 职场文书