Fork me on GitHub

JS种正则表达式的基础用法

发表于 | 分类于 | 评论：

基础语法

元字符
常用元字符 含义
. 匹配除换行符以外的任意字符
\w 匹配字母数字或下划线
\W 匹配不是字母、数字、下划线的字符
\d 匹配数字，相当于[0-9]
\D 匹配不是数字的字符
\s 匹配任意不可见字符，包括空格、制表符、换行符等
\S 匹配任意可见字符
^ 匹配字符串的开始位置
$ 匹配字符串的结束位置
量词
量词 含义
* 重复任意次，相当于{0,}
? 重复0次或1次，相当于{0，1}
+ 重复1次或更多次，相当于{1，}
{n} 重复n次
{n,} 重复n次或者大于n次
{n,m} 重复n到m次
分支&字符集

简单理解就是对某个字符界定的一个选择范围

  1. (a|b|c)
  2. [abc] === [a-c]
  3. [^abc] === [^a-c]
转义

使用\转义，我的理解是凡是不是表达它原本含义的字符就要转义，例如

1
2
3
4
5
/\d/ 表示的是匹配纯数字
/\\\d/ 表示的是匹配'\d'这个字符串
/\d/.test('2')   //true
/\\\d/.test('2')  // false
/\\d/.test('\\d')   //true

当然，这还只是针对以\开头的那些元字符，还有那些量词当表示普通字符串时也要转义的，大体有这些：

  • . ? + $ ^ [ ] ( ) { } | \ /
常用修饰符
  1. g → 全局搜索(global)
  2. i → 不区分大小写(ignoreCase)
  3. m → 多行搜索(multiline)
  4. y → 执行“粘性”搜索,匹配从目标字符串的当前位置开始，可以使用y标志。(sticky)

使用正则表达式

正则表达式可以被用于RegExp的exec和test方法以及 String的match、replace、search和split方法

方法 描述
exec 一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）。
test 一个在字符串中测试是否匹配的RegExp方法，它返回true或false。
match 一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null。
search 一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。
replace 一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。
split 一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的String方法。

实例

既然前面讲了这么多基本规则，那就试着手写两个日常业务中常见的正则吧

  • 验证手机号

    1
    2
    3
    最简单的验证：
    /^1[0-9]{10}$/.test('18688888888')  //true
    这只是对开始的一位数和后面的10位数做了简单验证，如果需求有别的还可以根据位数做更精细的限制

  • 验证邮箱

邮箱验证正则是个老生常谈的问题了，有很多前端笔试题也喜欢出，之前没有细化了解正则规则之前觉得这题目挺变态的，但现在觉得能够徒手写个简单的邮箱验证出来才能至少证明你了解基本的正则，话不多少，上代码：

1
2
3
首先看一个正确的邮箱地址：525918717@qq.com
这里可以差分为'525918717'、'@'、'qq'、'.'、'com'这么几部分，那么对应这几部分的内容初略匹配一下正则就是：
/^\w+@(\w+)\.([a-z]+)$/i.test('525918717@qq.com')  //true

当然，这只是我自己手写的一个基础版，还有更精简的版本，例如

1
/[^\s@]+@[^\s@]+\.[^\s@]+/.test('525918717@qq.com')   //true

经过对正则一些基础语法的了解，我对正则的理解就是想达到同一个匹配效果可以有多重方式，当然还有一些更高级的用法，像零宽断言和分组引用这些，下次用一篇文章单独讲解吧！