上一篇文章中我们讲了正则表达式的基本用法,接下来博主想聊聊其中的细节,今天就从正则修饰符开始吧。

正则修饰符又称为正则标记(flags),它会对正则的匹配规则做限定,进而影响匹配的最终结果。在上次的文章中我们也提到过,正则修饰符一共有以下几种,可以单独使用,也可以组合使用:

/\w+/g; // global search
/\w+/i; // ignore case
/\w+/m; // multi-line
/\w+/u; // unicode
/\w+/y; // sticky

/\w+/gi;
new RegExp('\\w+', 'gi');

其中的i好理解,正如上面的注释一样,ignore case或case insensitive,忽略大小写。

下面是一个简单的例子,正则表达式加上了i修饰符之后也可以匹配到大写字母:

'Hello World'.match(/hello/i);  // ["Hello"]

/hello/i.exec('Hello World');   // ["Hello"]

再来看看全局匹配修饰符g,下面是一个全局匹配的例子:

var source = 'hello world hello JS';

source.match(/hello/);      // ["hello"]

source.match(/hello/g);     // ["hello", "hello"]

从上面代码中可以看出,普通正则的匹配结果只有一个,如果想要找出全部的匹配结果,后面则需要加一个g修饰符,使其成为全局匹配模式。

全局修饰符g通常也会和多行匹配修饰符m结合使用,我们将上面例子稍加改动,添加一个换行符,正则也稍加修改:

var source = 'hello world\nhello JS';

source.match(/^hello.+/g);    // ["hello world"]

大家会看到,我们是要在多行文本中匹配以"hello"开头的字符串,但结果只出现了第一个匹配项,后面的"hello JS"并未匹配到,这时我们需要加入多行匹配修饰符m:

var source = 'hello world\nhello JS';

source.match(/^hello.+/gm);   // ["hello world", "hello JS"]

现在,所有的结果都匹配到了。

但需要注意的是,单独使用修饰符m是不起作用的,它必须和g相结合,就像下面例子一样,虽然有m修饰符,但仍旧只匹配到了第一行文字:

var source = 'hello world\nhello JS';

source.match(/^hello.+/m);    // ["hello world"]

另外,还有一个很重要的条件,那就是,只有正则中包含起始标记"^"或结束标记"$"时,修饰符m才会发挥它的作用,否则g不需要m,且看下面例子:

// 只有匹配开始标记^或结束标记$时,g才需要m

var source = 'hello world\nhey world';

// 正则中没有^或$ 只需g即可匹配多行
source.match(/he.+/g);          // ["hello world", "hey world"]

// 正则中含有^或$ g只能匹配第一个结果
source.match(/^he.+/g);         // ["hello world"]
source.match(/.+world$/g);      // ["hey world"]

// 含有^或$的情况下 需要添加m 才可以匹配多行
source.match(/^he.+/gm);         // ["hello world", "hey world"]
source.match(/.+world$/gm);      // ["hello world", "hey world"]

以上介绍的都是正则修饰符在String#match()方法中的表现,我们也知道,RegExp#exec()是与之对应的一个方法,同样可以匹配字符串,返回结果数组,那么这个exec()方法对于含有全局修饰符的正则又会有什么样的表现呢?实际操作发现,RegExp#exec()方法与上面String#match()的规则大致相同,但不同的是,RegExp#exec()方法每次只会匹配一个结果,所以需多次环执行才能获取全部。我们来看下面示例:

var regex = /^hello.+/gm;
var source = 'hello world\nhello JS';

regex.exec(source);   // ["hello world"]
regex.exec(source);   // ["hello JS"]

可以看到每一次执行正则实例的exec()方法都会返回一个结果数组,由于正则中含有起始标记^和gm组合,我们需要执行两次才能获取到全部的结果,这是与String#match()方法不同的地方。一般来说,我们可以使用循环结构调用RegExp#exec()方法来获取所有的结果:

var result = null;
while (result = regex.exec(source)) {
  console.log(result);
}
// output:
// ["hello world"]
// ["hello JS"]

对于RegExp#test()方法,一般是用来检测字符串是否匹配某种模式,如果要在多行中检测任意一行是否匹配时,同样需要gm组合,下面代码先简单检测匹配情况,然后在多行中进行匹配:

var source = 'hello world\nhey JS';

/^hello.+/.test(source);      // true

/^hey.+/.test(source);        // false
/^hey.+/g.test(source);       // false

/^hey.+/gm.test(source);      // true

从结果来看,不加gm修饰符的正则,只能检测一行数据的匹配情况,加入gm后可以对多行进行检测,只要任意一行符合条件,即返回true。

最后再来说说String#replace()方法,同样地,如果正则中出现了^或$,那就需要加上gm组合,下面代码演示了多行替换的操作:

var source = 'hello world\nhello JS';

// 正则中没有^或$,全局g轻松搞定
source.replace(/hello/g, 'hey');    // "hey world\nhey JS"

// 正则中含有^或$,全局g也无能为力,仅能替换第一行
source.replace(/^hello/g, 'hey');   // "hey world\nhello JS"

// 需要使用gm组合
source.replace(/^hello/gm, 'hey');  // "hey world\nhey JS"

上面是全局匹配g和多行匹配m,下面介绍一下u修饰符。

u修饰符是ES6新增特性,可以启用Unicode模式对字符串进行正则匹配,能正确处理四个字节的UTF-16字符集。为什么需要这个修饰符呢,我们先来看一个例子:

/^.{3}$/.test('你好啊');    // true
/^.{3}$/.test('												





											

JavaScript系列文章:详解正则表达式之二的更多相关文章

  1. JavaScript学习笔记-实例详解-类(二)

    实例详解-类(二)   //===给Object.prototype添加只读\不可枚举\不可配置的属性objectId(function(){ Object.defineProperty(Object ...

  2. JavaScript 加号运算符详解

    将介绍JavaScript中 '+'加号运算符在一元.二元运算时的表现. 目录 1.一元运算符 2. 二元运算符 1. 一元运算符 语法: + Expression 说明:'+'号运算符作为一元运算符 ...

  3. 从mixin到new和prototype:Javascript原型机制详解

    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...

  4. JavaScript严格模式详解

    转载自阮一峰的博客 Javascript 严格模式详解   作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...

  5. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  6. javascript 节点属性详解

    javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...

  7. (" use strict")Javascript 严格模式详解

    Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...

  8. 猫哥网络编程系列:详解 BAT 面试题

    从产品上线前的接口开发和调试,到上线后的 bug 定位.性能优化,网络编程知识贯穿着一个互联网产品的整个生命周期.不论你是前后端的开发岗位,还是 SQA.运维等其他技术岗位,掌握网络编程知识均是岗位的 ...

  9. JavaScript之事件处理详解

    一.事件传播机制 客户端JavaScript程序(就是浏览器啦)采用了异步事件驱动编程模型.当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web浏览器就会产生事件(event).如果Jav ...

随机推荐

  1. 锋利的jQuery-读书笔记(二)

    知识小点: 1.由于$()获取的永远是对象,不管括号里面的元素是否存在都会获得对象.所以检测某个元素在网页上是否存在时,不能使用以下代码: if($("#tt")){ //do s ...

  2. 机器学习——支持向量机(SVM)之拉格朗日乘子法,KKT条件以及简化版SMO算法分析

    SVM有很多实现,现在只关注其中最流行的一种实现,即序列最小优化(Sequential Minimal Optimization,SMO)算法,然后介绍如何使用一种核函数(kernel)的方式将SVM ...

  3. LUA 学习笔记

    1.C# 与 LUAC#调用LUA比较简单,但LUA调用C#,有两种方法,一种是直接反射调用,但这种方法有局限性,比如性能低,在IOS平台无法使用反射,因此一般使用WARP方法,即把C#代码注册到LU ...

  4. Redis——学习之路一(初识redis)

    在接下来的一段时间里面我要将自己学习的redis整理一遍,下面是我整理的一些资料: Redis是一款依据BSD开源协议发行的高性能Key-Value存储系统(cache and store),所以re ...

  5. ext.net与extjs的关系

    一.在客户端,ext.net中可以使用extjs的语法. 如发送ajax请求, Ext.Ajax.request({            url: 'Common/getNode',         ...

  6. Android中将布局文件转成bitmap

    在实践中发现,有些需要打印的小票高度小于屏幕的高度,而有些小票内容过多高度高于屏幕高度. 小于屏幕高度的布局文件转成bitmap较为容易,高于屏幕高度的布局文件转成长图bitmap较为复杂. 一.小于 ...

  7. hdu1520 树形dp Anniversary party

    A - Anniversary party Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I6 ...

  8. POJ 3276 (开关问题)

    题目链接: http://poj.org/problem?id=3276 题目大意:有一些牛,头要么朝前要么朝后,现在要求确定一个连续反转牛头的区间K,使得所有牛都朝前,且反转次数m尽可能小. 解题思 ...

  9. HDU 5360 (贪心)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5360 题意:告诉你n个区间[ l[i],r[i] ],然后让你排序,必须左区间不大于它前边的总区间个数 ...

  10. 水果项目第2集-建立数据库->编写数据访问基础类->实现类的方法->调试通过

    看来写博客对懒人也有好处.监督自己的好处. 今天一打开电脑,就想继续写了. 今天就开始动手做了. 数据库建立,编写访问数据库代码,实现各个类的方法,调试这些方法. 这些基础的代码写完后,就可以写逻辑代 ...