详解JavaScript RegExp对象


Posted in Javascript onFebruary 04, 2017

什么是 RegExp?

正则表达式描述了字符的模式对象。

当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置,以及要检索的字符类型,等等。

RegExp对象是原生JavaScript中表示正则表达式的对象。

创建对象的方法为:var RegExp = new RegExp(pattern, attributes);

参数pattern指定正则表达式的规则或者表示正则表达式模式的字符串;

参数attributes为可选参数,表示匹配模式的修饰符。包含3个参数:

1.  i:执行对大小写不敏感匹配;

<script text="text/javascript">
var txt = 'Hello World!'

var reg = new RegExp('hello', 'i');

if(reg.test(txt)) {


console.log(txt.match(reg));

}
</script>

2.  g:执行全局匹配(查找所有匹配项而非找到第一个匹配项后停止);

<script text="text/javascript">
  var txt = 'This is just a test.'
  var reg = new RegExp('is', 'g');//区分大小写
  var reg01 = new RegExp('is', 'gi');//不区分大小写
  if(reg.test(txt)) {
    console.log(txt.match(reg));//["is", "is"]
    console.log(txt.match(reg).length);//2
  }
</script>

3.  m:执行多行匹配(若不设置该属性,^($)只与整个被搜索字符串的开始(结尾)位置开始匹配;若设置该属性,^($)还可以与被搜索字符串的“\r”或“\n”之后位置开始匹配)。

<script type="text/javascript">
  //以下代码不能够匹配字符串"an",尽管"an"后面已经换行了,但"an"并不是字符串行的结尾。
  var txt1 = 'This is an\n apple'; 
  var reg1 = /an$/;
  console.log(txt1.match(reg1));//null
  //以下代码能够匹配到字符串"an"
  var txt2 = 'This is an\n apple';
  var reg2 = /an$/m;
  console.log(txt2.match(reg2));//["an", index: 8, input: "This is an↵ apple"]  
  //以下是多行匹配开头示例
  var txt3 = 'This is an\n apple';
  var reg3 = /^\sapp/;
  console.log(txt3.match(reg3));//null
  
  var txt4 = 'This is an\n apple';
  var reg4 = /^\sapp/m;// /^ app/m
  console.log(txt4.match(reg4));//[" app", index: 11, input: "This is an↵ apple"]
</script>

i,g,m三个修饰符可以相互组合同时使用。

以上m修饰符中的示例中var reg4 = /^\sapp/的"\"是一个转义字符,如果使用构造函数创建RegExp对象时,应将正则表达式中的"\"用"\\"进行代替:

<script type="text/javascript">
  var txt4 = 'This is an\n apple';
  var reg4 = new RegExp('^\\sapp', 'm');
  console.log(txt4.match(reg4));//[" app", index: 11, input: "This is an↵ apple"]
</script>

RegExp对象属性

1.global

返回正则表达式是否具有"g"修饰符;

<script type="text/javascript">
  var txt = 'This is just a test';
  var reg = new RegExp('st', 'g');
  if(reg.global) {
    console.log(txt.match(reg));//["st", "st"]
  }
</script>

2.ignoreCase

返回正则表达式是否具有"i"修饰符;

3.multiline

返回正则表达式是否具有"m"修饰符;

4.lastIndex

标记下一次匹配开始时所在字符串的位置;

<script type="text/javascript">
  var txt = 'If you love code, you should code everyday.';
  var reg = new RegExp('ou', 'g');
  var length = txt.match(reg).length;
  for(var i = 0; i < length; i++) {
    reg.test(txt);
    console.log(reg.lastIndex);
  }
</script>

5.source

返回正则表达式进行模式匹配的文本或表达式,返回的文本中不包括修饰符"i","g","m",也不包括正则表达式直接量使用的定界符

<script>
  var reg1 = new RegExp('yoho', 'm');
  var reg2 = new RegExp('\\w');
  var reg3 = /\w/m;
  console.log(reg1.source);//yoho
  console.log(reg2.source);//\w
  console.log(reg3.source);//\w
</script>

RegExp对象方法

1.compile

改变或重新编译正则表达式(Opera浏览器不支持该方法)

对于正则表达式的重新定义,以下方法就可以实现,所以对于此方法的应用场景,我也不是很清楚

<script>
  var reg = new RegExp('ou', 'g');
  reg = /\w/;
</script>

2.exec

检索字符串中正则表达式的匹配结果

<script>
  var txt = 'If you love code, you should code everyday.';
  var reg = new RegExp('ou', 'g');
  var length = txt.match(reg).length;
  for(var i = 0; i < length; i++) {
    console.log(reg.exec(txt));
  }
</script>

3.test

检测字符串是否与匹配正则表达式匹配

<script>
  var txt = 'I code everyday.';
  var reg = new RegExp('code');
  console.log(reg.test(txt));//true
</script>

以上所述是小编给大家介绍的JavaScript RegExp对象,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
layui表格设计以及数据初始化详解
Oct 26 Javascript
JS实现音乐导航特效
Jan 06 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
jquery实现上传图片功能
Jun 29 jQuery
JS查找字符串中出现最多的字符及个数统计
Feb 04 #Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 #Javascript
纯js模仿windows系统日历
Feb 04 #Javascript
canvas的神奇用法
Feb 03 #Javascript
Jquery实现跨域异步上传文件总结
Feb 03 #Javascript
js 递归和定时器的实例解析
Feb 03 #Javascript
js实现文本上下来回滚动
Feb 03 #Javascript
You might like
safari下载文件自动加了html后缀问题
2018/11/09 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python Socket传输文件示例
2017/01/16 Python
python的unittest测试类代码实例
2017/12/07 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
python使用turtle绘制分形树
2018/06/22 Python
找工作最新求职信
2013/12/22 职场文书
广告设计应届生求职信
2014/03/01 职场文书
婚前协议书
2014/04/15 职场文书
项目合作协议书范本
2014/04/16 职场文书
大专生自荐书范文
2014/06/22 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
sql中mod()函数取余数的用法
2021/05/29 SQL Server
使用javascript解析二维码的三种方式
2021/11/11 Javascript
Python OpenCV实现图形检测示例详解
2022/04/08 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js