JavaScript系列文章:详解正则表达式之二
在上一篇文章中我们讲了正则表达式的基本用法,接下来博主想聊聊其中的细节,今天就从正则修饰符开始吧。
正则修饰符又称为正则标记(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系列文章:详解正则表达式之二的更多相关文章
- JavaScript: 详解正则表达式之二
在上一篇文章中我们讲了正则表达式的基本用法,接下来博主想聊聊其中的细节,今天就从正则修饰符开始吧. 正则修饰符又称为正则标记(flags),它会对正则的匹配规则做限定,进而影响匹配的最终结果.在上次的 ...
- 【HANA系列】SAP HANA XS使用JavaScript数据交互详解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...
- 【HANA系列】【第一篇】SAP HANA XS使用JavaScript数据交互详解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列][第一篇]SAP HANA XS ...
- JavaScript学习笔记-实例详解-类(二)
实例详解-类(二) //===给Object.prototype添加只读\不可枚举\不可配置的属性objectId(function(){ Object.defineProperty(Object ...
- 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程
反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) 背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...
- [转]JavaScript异步机制详解
原文: https://www.jianshu.com/p/4ea4ee713ead --------------------------------------------------------- ...
- 从mixin到new和prototype:Javascript原型机制详解
从mixin到new和prototype:Javascript原型机制详解 这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...
- JavaScript严格模式详解
转载自阮一峰的博客 Javascript 严格模式详解 作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...
- PHP输出缓存ob系列函数详解
PHP输出缓存ob系列函数详解 ob,输出缓冲区,是output buffering的简称,而不是output cache.ob用对了,是能对速度有一定的帮助,但是盲目的加上ob函数,只会增加CPU额 ...
随机推荐
- 下载本 WebEnh博客 安卓APP
暂时还在学习开发安卓和苹果APP应用,写得一般,以后会更新的,谢谢大家关注.对了这个是用HTML5+写的哦.不太难,但是要搞懂还是要多花点时间了,有时间就会更新的 ... ...
- jsTree简单应用Demo
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- Java中的关键字 transient
先解释下Java中的对象序列化 在讨论transient之前,有必要先搞清楚Java中序列化的含义: Java中对象的序列化指的是将对象转换成以字节序列的形式来表示,这些字节序列包含了对象的数据和信息 ...
- Spring:Aop before after afterReturn afterThrowing around 的原理
在写这篇文章前,在网上看了一下大多数的文章,在说这一块时,都是用语言来表达的.before.after.afterReturn.afterThrowing 这四个用语言是可以说清楚的,但 around ...
- 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法
取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...
- c#根据绝对路径获取 带后缀文件名、后缀名、文件名
zz C#根据绝对路径获取 带后缀文件名.后缀名.文件名 1.c#根据绝对路径获取 带后缀文件名.后缀名.文件名. string str =" F:\test\Default.aspx& ...
- swift 简介和常量与变量 --- swift 入门
一.思维导图 二. 代码 //创建UIView 和按钮 let views = UIView(frame: CGRect(x:20, y: 20, width: 100, height: 100))/ ...
- javascript深入理解js闭包
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
- SpringMVC(四) RequestMapping请求方式
常见的Rest API的Get和POST的测试参考代码如下,其中web.xml和Springmvc的配置文件参考HelloWorld测试代码中的配置. 控制类的代码如下: package com.ti ...
- mongodb 速成笔记
以下环境为mac osx + jdk 1.8 + mongodb v3.2.3 一.安装 brew安装方式是mac下最简单的方式 brew update brew install mongodb 其它 ...