详解JavaScript正则表达式（一）

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具

这篇文章主要是对正则表达式有一个全面的了解，学完之后，当再次看到一些比较复杂的正则表达式的时候就可以逐步分析了。当然，再加上一段时间的练习，相信你自己也可以学会怎么使用正则表达式的。

1、实例化正则表达式的两种方法。

a.字面量形式

先看一个简单的例子。

var reg = /\d{3}/

这张图片是通过一个正则表达式的在线测试网站上得到的。测试网站是https://regexper.com/。

可以看到上面这个简单的例子描述的是匹配一个三位数字组成的字符串。看下面这个例子，来试着用一个字符串匹配一些这个正则表达式。

var str = "123abc";
var reg = /\d{3}/;
var res = str.replace(reg,"D");
console.log(res);

上面这个例子是匹配三个数字，然后替换成一个字母“D”，
输出结果是Dabc。至于replace这个方法后文中会讲到，这里只是让大家对正则表达式有一个大致上的了解。

b.使用构造函数方式

var reg = new RegExp("\\d{3}");

看上面的是和上面的字面量形式一样的，注意这里是使用了两个“//”，后面的一个”/d”是组成一个正则表达式中的预定义类，用于匹配一个数字，前面的一个”/”是为了对”/”进行转义，否则不能识别出这个特殊字符。这一点格外注意。

上文只是让你对正则表达式有一个整体上的了解，接下来就是对正则表达式的每个部分进行详细的分析。

2、元字符

正则表达式中有两种基本类型的字符组成：
1、原义文本字符，如abc就是表示abc的意思
2、元字符。是指在正则表达式中有特殊含义的非字母字符
有 . * + ? $ ^ | \ ( ) { } [ ]

1.字符类

可以使用字符” [ ]“来构建一个简单的类。
所谓类是指某些符合某些特性的对象，一个泛指，而不是特指某个字符

表达式[abc]表达的是把字符a,b,c归为一类，表达式可以匹配这类字符。

来看一个简单的例子。


var str = "abcdef";
var reg = /[abc]/g;
var res = str.replace(reg,"X");
console.log(res);

分析：上面代码中[abc]表示的是可以匹配a，或者b，或者c。
因此上面的输出结果是XXXdef。注意/[abc]/g中g表示的是一个全局修饰符，后面会有详细解释，这里先理解一下就是匹配字符串str中每一个是a或者b或者c的字符，然后替换成”X“。

2.字符类取反

使用元字符”^“创建反向类。意思是不属于某类的内容。例如表达式[^abc] 表示不是a或者b或者c的内容

在看一个简单的例子：

var str = "abcdef";
var reg = /[^abc]/g;
var res = str.replace(reg,"X");
console.log(res);

上面代码的输出结果是：abcXXX,可以看出def匹配成功。

3.范围类

比如可以使用[a-z]表示a到z之间的任意字符。这是一个闭区间，包含a和z本身。
举个例子：

var str = "ABCD999abcd";
var reg = /[a-zA-Z]/g;
var res = str.replace(reg,"Q");
console.log(res);

输出结果：”QQQQ999QQQQ”
上面的reg正则是用来匹配26的英文字母，不论大小写的。

4.预定义类

正则表达式中提供一些预定义类来匹配字符串。

因此在一些特殊的需求的时候，就可以很方便的使用这些预定义的类。

5.边界

看一个例子：

var str = "This is a book";
var reg = /\bis\b/g;
var res = str.replace(reg,"IS");
console.log(res);

var reg2 = /is/g;
var res2 = str.replace(reg2,"IS");
console.log(res2);

输出结果：
“This IS a book”
“ThIS IS a book”
仔细比较上面两个输出中的This。第二个中的ThIS是因为替换的时候，因为没有单词边界\b,所以/is/也会匹配到This中的is，然后进行替换。而\bis\b加上单词边界之后，只会替换单个单词is，而This里面的is不会给替换。