JavaScript丨正则表达式

这里是JavaScript的第七期啦，前面的都是基础的知识，基本上大部分开发都是使用到的。这期就讲讲正则表达式，后面几期就是内置函数之类的。基础知识基本上快要结束啦！

定义

什么是正则表达式？

在MDN中，给的定义是：正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。

看起来挺烦的。不是很清楚。那我们使用天宫搜索来获取一下定义：正则表达式是一种用于匹配和操作文本的工具，可以帮助用户从一个大的文本集合中找到符合特定模式的内容。

这样看起来解释就清楚多了，就是从一大推文本中，通过正则表达式这个工具来找到或者提取我们需要的那一部分文本。

常用的元字符

正则表达式主要依赖于元字符。 元字符不代表他们本身的字面意思，他们都有特殊的含义。一些元字符写在方括号中的时候有一些特殊的意思。以下是一些元字符的介绍：

常用的简写字符集

除了基础的元字符外，还有常用的简写字符集

常用的标志

标志也叫模式修正符，因为它可以用来修改表达式的搜索结果。 这些标志可以任意的组合使用，它也是整个正则表达式的一部分。

常用的正则函数

如何使用正则，通过一些列函数，我们可以通过正则表达式去完成对应的操作。

练一练

编写一个正则

一般编写一个正则有两种方式

• 由两个斜杠以及中间的字符串组成，这里的意思就是创建一个变量为reg，创建一个正则，为/orange/，这个正则就是用来匹配orange这个字符串的。

  const reg = /orange/
  

• 调用RegExp对象的构造函数，同样创建一个和上面一样的正则。

  const reg = new RegExp('orange')
  

如何使用正则

在编写了正则和，我们如何使用正则？这里将上面的五种方法都哪里举例！

• exec

  const reg = /orange/;
  const str = 'hi,orange';
  const result = reg.exec(str);
  console.log('结果：', result);
  

可以看到，数组的第0位就是匹配到的字符串，整个结果就是一个数组。exec的用法，就是前面一个正则，函数里面放需要匹配的整个字符串。

• test

  const reg = /orange/;
  const str = 'hi,orange';
  const result = reg.test(str);
  console.log('结果：', result);
  

通过结果可以看到，打印的是true，当在整个字符串中匹配到了orange这个字符串的时候，就会返回true，否则就是false。用法和上面是一样的，前面是正则，后面的test里面填写需要匹配的原始字符串。

• match

  const reg = /orange/;
  const str = 'hi,orange';
  const result = str.match(reg);
  console.log('结果：', result);
  

match和exec输出的结果都是一样的，我们可以看其函数描述，函数前使用原始字符串，函数中加上需要匹配的正则。和exec刚刚好相反。

• search

  const reg = /orange/;
  const str = 'hi,orange';
  const result = str.search(reg);
  console.log('结果：', result);
  

这个函数就是查询原始字符串中，需要匹配的字符串的位置。程序中的位置一般都是从0开始的。在这个栗子中，orange这个字符串的起始位置就是3。如果没有查到这个字符串，就返回-1。

• replace

  const reg = /orange/;
  const str = 'hi,orange';
  const result = str.replace(reg,'alex');
  console.log('结果：', result);
  

replace这个函数接收的两个参数，第一个就是正则，第二个就是需要替换为什么。在这个栗子中，匹配到了orange这个字符串，并且将它替换为alex这个字符串。

稍微复杂点的正则

上面举的栗子都是很简单的正则，那么接下来稍微复杂点。

• 一个字符串存在多个同样的字符，我们需要都给他替换了。这就要用到标识g了

  const reg = /orange/g;
  const str = 'hi,orange.我想吃水果了，对，就是orange。';
  const result = str.replace(reg, 'apple');
  console.log('结果：', result);
  

可以看到，我们将字符串中的所有orange都替换为了apple，通过标识g，来完成全局搜索，然后替换。

• 一个字符串是英文，存在多个相同的字符串，但是大小写不一样，我们需要到查到，并且都替换了，这个时候就是需要用的标识i来忽略大小写

  const reg = /orange/gi;
  const str = 'hi,Orange.我想吃水果了，对，就是orange。';
  const result = str.replace(reg, 'apple');
  console.log('结果：', result);
  

耶！我们修改了写字符串中其中一个orange为Orange，让字符串有大小写区分了。然后在原来的正则后面加了个标识i，用来忽略大小写，发现打印的结果符合预期。

• 项目中，常见有手机号验证，验证你的手机号是否正确，正确才让你发送验证码，不正确就提醒你修改为正确的验证码。

  const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
  const phone = 13111111111
  const result = reg.test(phone);
  console.log('结果：', result);
  

上面的栗子，就是一个完整的手机号正则，当手机号是正确的，就打印了true，否则打印false。解释一下这个正则，两个斜杠，就是正常的代表定义一个正则，^表示从开始行开始，也就是从手机号的第一位开始验证，[]为匹配里面的任意字符，而[1]就是匹配1，然后[3,4,5,6,7,8,9]，就是匹配[]任意的字符，匹配下面列表中存在的单个字符[0-9],{9}就是匹配9位数字，$从末端开始匹配。

• 不知道上面的看懂没，没看懂给你举个稍微简单点的，比如匹配你的QQ号

  const reg = /^[1-9][0-9]{4,}$/;
  const QQNumber = 1208917130
  const result = reg.test(QQNumber);
  console.log('结果：', result);
  

  QQ号是从10000开始的，那么可以使用^从头开始，首位肯定是非0开始的，所以就是[1-9]，然后后面的数字其实没有限制，那么可以匹配任意数字[0-9]，因为从10000开始的，第一位确定了后，后面的随意排列，不升值固定长度的话，就只需要{4,}，就可以了。这里解释下{}，一般我们使用{1,9}，表示至少1位，最多9位，使用{4,}表示最少4位，不设置最大的，使用{4}表示固定匹配4位。而这里，就是使用{4,}最少4位，没有长度限制，就不用匹配最大的了。

当然以上的也可以使用常用标识符简写。比如使用\d来替换[0-9]

const reg = /^[1-9]\d{4,}$/;
const QQNumber = 1208917130
const result = reg.test(QQNumber);
console.log('结果：', result);

最后

当然你可能觉得以上都比较简单，想学习点更多，更详细的教程，你可以去这里：https://github.com/ziishaned/learn-regex/blob/master/translations/README-cn.md

如果你觉得不方便练习：你也可以访问这个网址，来在线练习：https://regex101.com/r/juM86s/1 ，打开网址后选择左侧的JavaScript即可开始啦。