从 例子 开始 入门 正则 表达式（-）

正则入门

  正则 是个难啃的骨头，之前看着会正则的人 感受都好牛逼。因而工做了2年了终于鼓起勇气啃这个骨头了。。

例子入手

  首先咱们先看下相关的字符表明。咱们先看这个例子。这个🌰就是验证字符串是不是数字。

let regex = /^[0-9]+$/;
let number = '123';
let string = 'abc';
regex.test(number); // true
regex.test(string); // false
复制代码

可能不少人这时用到了百度谷歌一下而后复制过去直接用就OK了，可是这样沉淀不到东西，因此咱们来静下心看看这个正则到底什么意思，首先咱们要了解的是相关的

• ^ ：脱字符，匹配开头，在多行匹配中匹配行开头，有时也表示求反的概念。
• $ :美圆符号, 匹配结尾，在多行匹配中匹配行结尾。
• {m,} 表示至少出现m次。
• {m} 等价于{m,m}，表示出现m次。
• +: 等价于{1,}，表示出现至少一次。记忆方式：加号是追加的意思，得先有一个，而后才考虑追加。
• *:等价于{0,}，表示出现任意次，有可能不出现。记忆方式：看看天上的星星，可能一颗没有，可能零散有几颗，可能数也数不过来。

可能这时你有些不理解 [0-9]，其实他等价于 [0123456789] ，在正则里能够缩写因此为 [0-9], 同理[a-z],[A-Z]也是一样的道理。为何使用正则由于他书写简单，咱们还能够简化，让咱们等下看看接下来的这些字符，思考下怎么继续简化。

那咱们大概能猜到这个意思表明什么了，从 开头(^) 到 结尾($) 0-9([0-9]) 出现 至少一次 (+) , 因此就很好理解了，为何这个是验证数字的想必就能理解了。
接下来咱们再来看一些特殊字符：

• \d就是[0-9]。表示是一位数字。记忆方式：其英文是digit（数字）。
• \D就是[^0-9]。表示除数字外的任意字符。
• \w就是[0-9a-zA-Z_]。表示数字、大小写字母和下划线。记忆方式：w是word的简写，也称单词字符。
• \W是[^0-9a-zA-Z_]。非单词字符。
• \s是[ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。记忆方式：s是space character的首字母。
• \S是[^ \t\v\n\r\f]。 非空白符。
• .就是[^\n\r\u2028\u2029]。通配符，表示几乎任意字符。换行符、回车符、行分隔符和段分隔符除外。记忆方式：想一想省略号...中的每一个点，均可以理解成占位符，表示任何相似的东西。

  好的咱们看到了 \d 其实就是 [0-9]，此时突然恍然大悟，原来上面的正则还能简化：

let regex = /^\d+$/; // /^[0-9]+$/;
复制代码

这时咱们大概 已经懂得这个正则表明什么东西了，以后再出现验证用户输入的是否是数字，就别再百度了，分分钟就写出来。

触类旁通

  咱们已经了解以前的这个例子后，大概能推敲如何实现验证全是字母：

let regex = /^[a-z]+$/;
let string = 'abc';
let number = '123';
regex.test(number); //false
regex.test(string);//true
复制代码

正则是区分大小写字母的，因此，咱们要验证大写字母的时大概是这样：

let regex = /^[A-Z]+$/;
let string = 'abc';
let STRING = 'ABC'
let number = '123';
regex.test(number); //false
regex.test(string);//false
regex.test(STRING); //true
复制代码

好了咱们已经反二了，接下来咱们来反三，便是大写字母又是小写字母，怎么去写？

let regex = /^[a-zA-Z]+$/
复制代码

估计到这里咱们都已经算入门了，不是很复杂的正则均可以本身去写了。

考验

接下来咱们来看一些经常使用需求：

正则 验证 手机 。

手机号码是几位，emmmm，等下我先数数 183 XXX XXX XX ,噗，11位，好吧当我没说。那咱们分析下，手机号, 首先所有都是数字， 开头第一位必定是 数字 1 ，而后只要知足 11位就能够了，咱们已经把需求整理清楚了，若是咱们用 js 去写会怎么写？我这里随意写一写,可能有更好的方式

const isPhone = (number) => {
    const len = number.length;
    if (typeof number !== 'string' || len !== 11  || number[0] !== '1') {
        return false;
    }

    for (let i = 0; i < len; i++) {
        if (isNaN(number[i])) return false;
    }

    return true;
}

console.log(IsPhone('18367490590')); //true


复制代码

可见一个 js 书写是多么麻烦，也多是个人解决方式不是很牛逼，随便写写，各位有什么好的解决方案也能够给我评论。。扯远了。如今咱们来看看要是用正则怎么写？

let regex  = /^1\d{10}$/;
复制代码

一行代码搞定。就是这么简单，让咱们分析一下。

• ^ 开头匹配
• 1 开头没毛病
• \d 表示 [0-9] 表明必须是数字
• {10} 也是 {10, 10} 表示 [0-9]出现10次，加上1 也就是说 11位。
• $ 结尾匹配没毛病。 以上一行代码就搞定了。很简便其实分析下也不是很难。

正则 验证 邮箱 。

我就不写什么 js 的版本了，有兴趣的同窗能够本身尝试写写。咱们看看邮箱的正则应该是有这么几个需求的：

• xxx@xxx.xxx
• @ 前须要有任意字符
• 邮箱 有 @ 符号。
• @后有任意字符
• 要有 .
• . 后跟任意字符

let regex = /^\w+@\w+\.\w+/;
复制代码

简单分析一下：

• \w咱们知道是[0-9a-zA-Z_]下划线
• + 表明至少出现一次 比如 {1,}
• @ 必须须要。
• . 这里要注意下，由于 . 是特殊正则字符, 表明通配符， 咱们这里须要的是 "." 字符串，因此加了 \ 进行转译

补充案例

  以前的例子们大概动了一些东西，让咱们再来看几个例子。

匹配16进制颜色值

大概是这样：

#ffbbad #Fc01DF #FFF #ffE

写法：

let regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;
复制代码

分析：
开头是#号，表示一个16进制字符，能够用字符组[0-9a-fA-F]。而后 {6} 表明 出现6 次，这时候你可能有点迷 这个表明什么 稍等引出这个 | 是分支的概念。再说说后面其实也很好理解 字符组[0-9a-fA-F] 出现3次。

• | 分支，其实能够理解为这个是编程中的或，很容易理解了。那么，咱们知道或者是惰性的，一个成立不向下执行，这里其实也同样。

让咱们再来一个案例：

验证 匹配 yyyy-mm-dd ： 2018-10-20

正则以下：

var regex = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
复制代码

分析一波:

• 年 \d{4} [0-9]出现4次。
• 月 共12个月， 十位0的话就是 [1-9]月,十位1的话就是 [0-2]个月。
• 日 最多31天 ，十位0的话就是 [1-9]天，十位1，十位2就是[0-9] 3的话只有0或者1。

结语。

正则是个大工程这里只是一些简单的正则，好比还有惰性匹配等 咱们尚未见到， 在后面的系列中我会慢慢的加入进去。未完...