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 相关文章推荐
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 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中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
php 获取本地IP代码
2013/06/23 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
php生成mysql的数据字典
2016/07/07 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
js对象的复制继承实例
2015/01/10 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
js表单登陆验证示例
2016/10/19 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
js常用DOM方法详解
2017/02/04 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
python对象及面向对象技术详解
2016/07/19 Python
浅谈python可视化包Bokeh
2018/02/07 Python
mac下如何将python2.7改为python3
2018/07/13 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
keras中的History对象用法
2020/06/19 Python
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
Sql面试题
2013/03/20 面试题
大学生毕业的自我鉴定
2013/11/13 职场文书
期终自我鉴定
2014/02/17 职场文书
yy司仪主持词
2014/03/22 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
电子商务求职信
2014/06/15 职场文书
国庆横幅标语
2014/10/08 职场文书
django中websocket的具体使用
2022/01/22 Python