详解!什么是正则表达式?正则表达式如何使用?

什么是正则表达式？

看看下面的例子：

/^0?(13|14|15|17|18|19)[0-9]{9}$/

例如一个检查用户是否在 HTML 表单中正确输入手机号的表单，可以使用前面提到的正则表达式用非常简单的代码来实现。

const postcode = '13012341234';
const result = postcode.match(/^0?(13|14|15|17|18|19)[0-9]{9}$/);   
//如果内容不匹配，result 为空

由于手机号存储在变量 postcode 中，因此可以通过使用 match() 正则表达式来检查它是否是正确的手机号码。

正则表达式符号及其含义如下：

正则表达式如何使用

在JavaScript中实际编写正则表达式有两种方法：

第一种：

const regexp = /^0?(13|14|15|17|18|19)[0-9]{9}$/;

在JavaScript中通过/.../括起来，内容被识别为正则表达式模式。

第二种：

const regexp = new RegExp('0?(13|14|15|17|18|19)[0-9]{9}$');

像这样为 RegExp() 的参数指定字符串正则表达式模式。

const regexp = new RegExp('^0?(13|14|15|17|18|19)[0-9]{9}$');
alert(regexp.test("13012341234"));
//匹配成功弹窗结果true

用正则表达式匹配的四种模式

[.\w \d \s] 表示特殊含义的字符模式

这里解释的四个特殊字符是“.”、“\w”、“\d”和“\s”。

每个的含义如下：

• "." 匹配除换行符 \n 之外的任何单字符。

• "\w" 匹配字母、数字、下划线。等价于 [A-Za-z0-9_]

• "\d" 查找数字字符（0-9）

• "\s" 制表符、换行符、空格

例如我们创建一个从“user01”到“user99”的字符的匹配模式：

/user\d\d/

这样写就OK了。因为“user”是固定的，“\d”代表一个数字，所以写两个就可以对应“00”到“99”了。

接下来我们继续创建一个匹配“Hello Mike”和“Hello Jane”的例子：

/Hello\s\w\w\w\w/

这里“\w”也代表一个字母，所以写四个就可以对应四个英文字符。但是“Hello”后面有一个空格，所以我们要写“\s”来表示。

[* + ? {}] 表示重复的模式

这里解释的四个特殊字符是“*”、“+”、“?”和“{}”。

每个的含义如下：

• "*" 匹配前面的子表达式零次或多次。

• "+" 匹配前面的子表达式一次或多次。

• "?" 匹配前面的子表达式零次或一次

• "{}" 指定重复次数

例如要匹配具有无限位数的数字！首先创建一个匹配随机数“195”的例子：

/\d\d\d/

我们所要做的就是写三个“\d”各自代表一个数字就可以了，但是如果这个数字的位数不同怎么办？例如“36548”或“364854”或“53”。

当前的“/\d\d\d/”只匹配前三个数字，所以对于“36548”它只找到“365”，对于“12”找不到第三位数，所以返回结果为“null”。

出现这种当数字或字符数未知时，“*”和“+”很有用。

如果是像这次这样的数字，只需写一个“\d”，后跟“*”和“+”即可匹配任意位数！

// 用“*”重复模式
/\d*/
// 用“+”重复模式
/\d+/

需要注意的是在使用“*”和“+”的时候，如果出现没有输入数字的情况。

// 没有输入数字
const reg = '';
 
// 如果是“*“
const result = reg.match(/\d*/);
 
// 如果是“+”
const result = reg.match(/\d+/);

在使用“*”的情况下，在结果中返回“空字符串”;

在使用“+”的情况下，在结果中返回“null”;

换句话说就是“+”的特点是除非存在一个或多个字符，否则无法检测到。

使用“{}”的模式

现在我们来看一下使用“{}”的例子！

“*”和“+”可以无限重复字符，而“{}”最大的特点是可以指定重复次数。

例如我们创建一个仅从字符串“user13 user695 user3541”中提取“user695”的例子：

/user\d{3}/

这么写可以看到只能提取“user695”了

例如像“{2,6}”这样写的意思就是是“2到6位”，可以指定一个具体的范围。

使用“?”的模式

接下来我们看一下使用“?”的例子：

例如我想创建一个匹配“1次”到“9次”的模式，但请注意结尾可能有也可能没有复数“s” 。

因此当存在任意字符的“存在”和“不存在”时， “？”很有用。

/\d\stimes?/

“time”是固定不变的，通过在末尾的“s”后面加上“？”，可以表示“s”的“有”或“没有”！

[^$] 表示字符位置的模式

这里要说的特殊字符是“^”和“$”。

每个的含义如下：

• '^' 匹配输入字符串的开始位置。

• "$" 匹配输入字符串的结尾位置。

首先创建一个匹配“user1”到“user9”的例子：

/user\d/

但是如果我错误的输入了“myuser1”怎么办？当前模式会省略“my”部分并成功匹配“user1”。

输入错了字符也能匹配成功，这不是我们想要的结果。在这种情况下我们可以使用“^”！

我们在“user”前面放了一个“^”，这样就只会提取以“user”开头的字符。所以如果是“myuser1”就会报错，只有是“user1”才可以被检测到。

"$"的用法也一样！

/user\d$/

写“user1abc”会报错，但“user1”会被检测到。

用“^”和“$”包围模式，前后有多余的文字就会出错，所以检测精度会进一步提高。

/^user\d$/

【[]()】 表示任意字符串的模式

这里解释的特殊字符是“[ ]”和“( )”。

每个的含义如下：

“[]” 用于单个匹配，可用于字符集、排除字符集之中。
“()” 表示组的概念，表达式中有几个()就有几个相应的匹配字符串。

作为示例我们创建一个匹配 HTML "<a>" 或 "<p>" 的例子：

/<[ap]>/

如果你在"[]" 中写"[ap]" ，那么可以检测到 "a" 或 "p"。因此你写“<[ap]>”，它将匹配“<a>”或“<p>”。

接下来让我们创建一个不仅匹配“<a>”和“<p>”而且匹配“<div>”的例子：

在这种情况下如果写“[apdiv]”，则表示检测字符“a, p, d, i, v”之一，所以我们使用“()”。

/<(a|p|div)>/

通过这样使用“|”，可以分隔字符串，在这种情况下将检测到“a”、“p”和“div”中的一个。

“[]”和“()”是正则表达式中经常使用的特殊字符，所以一定要尝试不同的字符串！

关于正则表达式转义

接下来我们来看看在正则表达式中是如何进行转义的！

哪些情况需要转义？

在某些情况下，创建模式时必须对正则表达式的特殊字符（. * + ^ | [ ] ( ) ? $ { }等等）进行转义。

例如以词雅网的URL为例：

const url = 'www.ciyawang.com';

const regexp = new RegExp(/www.ciyawang.com/);
 
const result = regexp.test(url);
  
console.log(result);

输出结果：

true

在本例中我们使用“test()”方法来检查正则表达式是否与 URL 匹配。

从执行结果来看，因为是“true”，所以知道是一致的。也就是说，这个正则表达式能很好地检测指定的URL。

因此试着将字符串“.”的部分置换为字母的“z”来执行相同的处理看看！

const url = 'wwwzciyawangzcom';

const regexp = new RegExp(/www.ciyawang.com/);
 
const result = regexp.test(url);
  
console.log(result);

输出结果：

true

因为和正则表达式的模式明显不同，所以感觉这个没有检测到吧？

但是从执行结果来看是“true”！其实在这种情况下，正则表达式模式也可以检测指定的URL！

原因很简单，因为在正则表达式的中“.”可以匹配任何单个字符。也就是说字符串URL中记述的“.”和正则表达式中的“.”是一样的了！

在这种情况下，需要的是“转义”处理。

使用反斜杠的转义方法

在正则表达式中转义需要“（反斜杠）”

所以我们对之前用正则表达式模式编写的“.”进行转义，并执行相同的过程！

const url = 'wwwzciyawangzcom';
 
//对「.」进行转义
const regexp = new RegExp(/www\.ciyawang\.com/);
 
const result = regexp.test(url);
  
console.log(result);

输出结果：

false

值得注意的是在正则表达式模式中有“.”的地方！像“\.”这样写，那么就意味着这就只是一个普通的字符“.”。

所以用“z”替换的字符串与正则表达式模式不同，所以执行结果为“false”。

正则在线工具

在线正则表达式代码生成工具：https://www.ciyawang.com/regcode.html

正则表达式在线验证工具：https://www.ciyawang.com/reg.html