理解Javascript的正则表达式

前言

本文4089字，阅读大约需要12分钟。

总括: 本文基于Javascript的正则表达式，结合笔者个人的思考来对正则表达式的特性进行讲解。

• 参考文章：A Practical Guide to Regular Expressions (RegEx) In JavaScript，正则表达式
• 公众号：「前端进阶学习」，回复「666」，获取一揽子前端技术书籍

事亲以敬，美过三牲。

正文

相信很多人第一次见到正则表达式的第一印象都是懵逼的，对新手而言一个正则表达式就是一串毫无意义的字符串，让人摸不着头脑。但正则表达式是个非常有用的特性，不管是Javascript、PHP、Java还是Python都有正则表达式。俨然正则表达式已经发展成了一门小语言。作为编程语言的一部分，它不想变量，函数，对象这种概念那么容易理解。很多人对于正则表达式的理解都是基于简单的匹配，等到业务中用到完全靠从网上copy来解决问题。不得不说，随着各种开源技术社区的发展，靠copy的确能解决业务中绝大多数的问题，但作为一名有追求的程序员，是绝对不会让自己仅仅依靠Ctrl C + Ctrl V来编程的。本文基于Javascript的正则表达式，结合笔者个人的思考和社区内一些优秀正则表达式文章来对正则表达式进行讲解。

Javascrip中的正则表达式使用方法

简单介绍下，在Javascript中使用正则表达式有两种方式：

1. **构造函数：**使用内置的RegExp构造函数；
2. **字面量：**使用双斜杠(//)；

使用构造函数：

var regexConst = new RegExp('abc');

使用双斜杠：

var regexLiteral = /abc/;

匹配方法

Javascript中的正则表达式对象主要有两个方法，test和exec：

test()方法接受一个参数，这个参数是用来与正则表达式匹配的字符串，如下例子：

var regex = /hello/;
var str = 'hello world';
var result = regex.test(str);
console.log(result);
// returns true

exec()方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null。

var regex = /hello/;
var str = 'hello world';
var result = regex.exec(str);
console.log(result);
// returns [ 'hello', index: 0, input: 'hello world', groups: undefined ]
// 匹配失败会返回null
// 'hello' 待匹配的字符串
// index: 正则表达式开始匹配的位置
// input: 原始字符串

下文都用test()方法来进行测试。

标志

标志是用来表示搜索字符串范围的一个参数，主要有6个标志：

标志	描述
g	全局搜索。
i	不区分大小写搜索。
m	多行搜索。
s	允许 . 匹配换行符。
u	使用unicode码的模式进行匹配。
y	执行“粘性”搜索,匹配从目标字符串的当前位置开始，可以使用y标志。

双斜杠语法：

var re = /pattern/flags;

构造函数语法：

var re = new RegExp("pattern", "flags");

看下实例：

var reg1 = /abc/gi;
var reg2 = new RegExp("abc", "gi");
var str = 'ABC';
console.log(reg1.test(str)); // true
console.log(reg2.test(str)); // true

正则表达式的思考

正则表达式是对字符串进行匹配的一种模式。

请记住，正则表达式是对字符串的操作，所以一般具有字符串类型的编程语言都会有正则表达式。

对于字符串而言，是由两部分构成的：内容和位置。

比如一个字符串：

'hello World';

它的内容就是：

'h', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd'

如上字符串中每一个独立的字母就是这个字符串的内容，而位置指的是：

位置所指就是相邻字符之间的位置，也就是上图中箭头的位置。

匹配内容相比匹配位置来说更为复杂，先看下简单的匹配方式：

简单匹配

最简单的匹配方式就是完整的去匹配一个字符串：

 var regex = /hello/;
 console.log(regex.test('hello world'));
 // true