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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
对javascript继承的理解
Oct 11 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
基于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来实现网络服务
2009/09/15 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
js 实现 input type="file" 文件上传示例代码
2013/08/07 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
详解Python time库的使用
2019/10/10 Python
python numpy 反转 reverse示例
2019/12/04 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
人力资源专员岗位职责
2014/01/30 职场文书
总经理助理职责
2014/02/04 职场文书
人力资源作业细则
2014/03/03 职场文书
副处级干部考察材料
2014/05/17 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL