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 和 Java 的区别浅析
Jul 31 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 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
附件名前加网站名
2008/03/23 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
layui表格数据重载
2019/07/27 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
详解Django中Request对象的相关用法
2015/07/17 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python IDLE入门简介
2017/12/08 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
python os.rename实例用法详解
2020/12/06 Python
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
在职证明书范本(2014新版)
2014/09/25 职场文书
党员评议思想汇报
2014/10/08 职场文书
机关作风建设整改方案
2014/10/27 职场文书
手机销售员岗位职责
2015/04/11 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android