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 相关文章推荐
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 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递归实现无限分类 格式化数组的详解
2013/06/08 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
vue ssr 指南详读
2018/06/29 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
Python 正则表达式实现计算器功能
2017/04/29 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
易程科技软件测试笔试
2013/03/24 面试题
电焊工工作岗位职责
2014/02/06 职场文书
三问三解心得体会
2014/09/05 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
教师创先争优承诺书
2015/04/27 职场文书