人人都看得懂的前端正则表达式教程

Posted 前端大学

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了人人都看得懂的前端正则表达式教程相关的知识,希望对你有一定的参考价值。

编写验证规则最流行和最简单的方法就是正则表达式了,但唯一的一个问题是正则表达式的语法太隐晦了,让人蛋疼无比。很多开发者为了在项目中应用复杂的验证,经常要使用一些小抄来记住正则式的复杂语法和各种常用命令。


在这篇文章中,我将试图让大家明白什么是正则表达式,以及如何更轻松地学习正则表达式。




也许你是初学者,那以防万一,我先来讲讲什么是正则表达式吧:


正则表达式可以帮助我们更好的描述复杂的文本格式。一旦你描述清楚了这些格式,那你就可以利用它们对文本数据进行检索、替换、提取和修改操作。


下面有一个正则表达式的简单例子。第一步先要引入有关正则式的命名空间:

using System.Text.RegularExpressions;

第二步就是用指定的正则式构建一个正则表达式对象,下面的正则式是用来搜索长度为10的a-z的英文字母:

Regex obj = new Regex("[a-z]{10}");

最后,根据正则式在指定数据中检索匹配项,如果匹配IsMatch方法就会返回true。

MessageBox.Show(obj.IsMatch(“shivkoirala”).ToString());

3个重要的正则式命令


记住正则语法最好的办法就是记住这三样东西:Bracket(括号), caret(插入符号)和Dollars(美元符号)。


人人都看得懂的前端正则表达式教程

B


在正则表达式中有3种类型的括号


方括号 “[“和花括号“{“ 。


方括号"["内是需要匹配的字符,花括号"{"内是指定匹配字符的数量。


圆括号“(“ 则是用来分组的。


C

插入符号 “^” 表示正则式的开始。


D

美元符号“$” 表示正则式的结束。

现在你知道上面的3个语法后,你就可以写世界上任何一条验证规则了。比如下面的例子就很好的说明了上面3条正则语法是如何协调运作的。


人人都看得懂的前端正则表达式教程

注:上图有个错误,"()"应为"{}"


上面的这条正则式只能匹配a-z的英文字母,同样是在中括号中标明匹配范围。


花括号中则是标明匹配字符串的最小长度和最大长度。


最后为了让表达式更规则,分别在开头和结尾加上了插入符号"^"和美元符号"$"。


好了,现在我们就用上面的3条语法来实现一些正则表达式的验证规则吧。


检查用户是否输入了shivkoirala?

shivkoirala

让我们开始第一个验证,输入的字符在a-g之间?

[a-g]

输入的字符在a-g之间并且长度为3?

[a-g]{3}

输入的字符在a-g之间并且最大长度为3最小长度为1?

[a-g]{1,3}

我如何在匹配像91230456, 01237648那样的固定8位数?

^[0-9]{8}$

如何验证最小长度为3最大长度为7的数字,如:123, 1274667, 87654?

^[0-9]{3,7}$

如何验证像LJI1020那样的发票编号,前3个是字母剩余为8位长度的数字?


前三个是字母:

^[a-z]{3}

后面是8位长度的数字:

[0-9]{8}

所以整个表达式为:

^[a-z]{3}[0-9]{7}$

验证像INV190203 或 inv820830那样的前3位是不区分大小写的英文字母,剩余8位是数字。


在前面的表达式中只能匹配前3个是小写英文字母的发票编号,如果我们输入大写字母那就不能匹配了。所以为了确保前3个字母是不区分大小写的,我们就要用表达式^[a-zA-Z]{3}。

^[a-zA-Z]{3}[0-9]{7}$

我们可以验证简单的网址URL格式吗?


第一步:检查是否存在www:

^www.

第二步:域名必须是长度在1-15的英文字母:

. [a-z]{1,15}

第三步:以.com或者.org结束:

. (com|org)$

完整的表达式如下:

^www[.][a-z]{1,15}[.](com|org)$

让我们在来看看BCD(其实也就是上面说的3条基本语法)如何验证email格式。


第一步:email开始是长度在1-10的英文字母,最后跟一个"@":

^[a-zA-Z0-9]{1,10}@

第二步:@后面是长度在1-10的英文字母,后面跟一个".":

[a-zA-Z]{1,10}.

第三步:最后以.com或.org结束:

.(com|org)$

最后完整的表达式如下:

^[a-zA-Z0-9]{1,10}@[a-zA-Z]{1,10}.(com|org)$

验证值在0-25的数字:

^(([0-9])|([0-1][0-9])|([0-2][0-5]))$

验证格式为MM/DD/YYYY, YYYY/MM/DD and DD/MM/YYYY的日期:

步骤


正则式


描述说明


先来检查 DD. 首先DD的长度为1-29 ( 2月份) , 1-30 (月小) , 1-31 (月大) .


所以 DD 就是 1-9 或 01-09


[1-9]|0[1-9]


允许用户输入1-9或者01-09.


再为DD添加匹配10-19


[1-9]|1[0-9]


允许用户输入01-19.


再为DD添加匹配20-29


[1-9]|1[0-9]|2[0-9]


允许用户输入01-29.


i再为DD添加匹配30-31


[1-9]|1[0-9]|2[0-9]|3[0-1]


最后用户可以输入01-31.


再来匹配日期间的分隔符"/","-"


[/ . -]


允许用户输入日期分隔符.


MM也是类似的操作


[1-9]|0[1-9]|1[0-2]


让用户输入月份值01-12.


最后就是YY的操作


1[9][0-9][0-9]|2[0][0-9][0-9]


允许用户输入年份1900-2099.

最后DD/MM/YYYY格式的日期的正则表达式为:

^([1-9]|0[1-9]|1[0-9]|2[0-9]|3[0-1])[- / .]([1-9]|0[1-9]|1[0-2])[- / .](1[9][0-9][0-9]|2[0][0-9][0-9])$

MM/DD/YYYY格式的日期:

^([1-9]|0[1-9]|1[0-2])[- / .]([1-9]|0[1-9]|1[0-9]|2[0-9]|3[0-1])[- / .](1[9][0-9][0-9]|2[0][0-9][0-9])$

YYYY/MM/DD格式的日期:

^(1[9][0-9][0-9]|2[0][0-9][0-9])[- / .]([1-9]|0[1-9]|1[0-2])[- / .]([1-9]|0[1-9]|1[0-9]|2[0-9]|3[0-1])$

快捷命令


你也可以用以下的快捷命令来简化你的正则表达式:

实际命令

快捷命令


[0-9]

d


[a-z][0-9][_]

w


0次或多次发生

*


至少一次发生

+


0次或1次发生

?

全文完。

原出处来自:青藤园(www.itivy.com

链接:http://www.itivy.com/ivy/archive/2011/11/16/learn-regular-expressions-with-ease.html

  • 回复“面试题”,查看前端最新最全面试题

  • ....其它功能正在完善


 推荐资料:

1.

2.

觉得本文对你有帮助?请分享给更多人

关注「」,提升前端技能

以上是关于人人都看得懂的前端正则表达式教程的主要内容,如果未能解决你的问题,请参考以下文章

人人都看得懂的正则表达式教程

人人都看得懂的C语言进阶系列之数据存储

MacBook 安装 MySQL 5.7.29(新手都看得懂的安装教程)

小白都看得懂的布局加载流程

小孩都看得懂的推荐系统

小白都能看得懂的教程 一本教你如何在前端实现富文本编辑器