学习笔记:JS正则介绍及常用正则集合

无论是做h5页面还是后台管理系统,前端总是会有非常多的输入校验,这就需要用到JS正则表达式(Regular Expression)。正则表达式本质上是一个小巧的、高度专用的编程语言,常用于匹配校验、查找和替换、字符串分割等场景。下面将对正则的基础进行简单介绍,并列出常用的正则集合。

注:推荐一个正则表达式转图形化在线工具(https://regexper.com),刚开始学习正则时看冗长的字符串会比较难懂,这个在线工具能将其转换为类似于逻辑流程图的形式,可以帮助理解


一、创建正则表达式

初始化同时赋值: var reg = new RegExp('xxx', 'g');   // xxx为正则字符串

直接赋值: var reg = /xxx/g;

二、修饰符

(1)g (global): 全文搜索,不添加则搜索到第一个匹配字符串时停止搜索

(2)i (ignore case): 添加时忽略大小写,默认大小写敏感

(3)m (multiple lines): 多行搜索

三、元字符

正则表达式由两种基本字符类型组成:原义文本字符和元字符。元字符是指在正则表达式中有特殊含义的非字母字符,将元字符转换为原义文本字符需使用转义字符 " \"。

元字符包括:* + ? $ ^ . | \ ( ) { } [ ] 

四、非打印字符

\ : 转义字符                   \t : 水平制表符              \v : 垂直制表符               \n : 换行符

\r : 回车符                     \o : 空字符                    \f : 换行符                       

\cX : 与X对应的控制字符(如 ctrl + x,ctrl + c 等等)

五、字符类

可使用元字符 [ ] 来构建一个简单的类,eg: [abc] 把 a、b、c 归为一类,可使用 元字符 ^ 创建反向类/负向类, eg [^abc]

六、范围类

使用元字符[x1-x2]来链接两个字符表示从x1到x2的任意字符(闭区间)

eg: [a-z]或[a-zA-Z],注意内部可连写

七、预定义类

字符                      等价类                                    含义

.                           [^\r\n]                           除了回车符和换行符之外的所有字符

\d                         [0-9]                             数字字符

\D                        [^0-9]                            非数字字符

\s                        [\f\n\r\t\v]                        匹配空白符、TAB符、换页符、换行符

\S                       [^\f\n\r\t\v]                       匹配非空白符

\w                       [a-zA-Z_0-9]                   匹配单词字符(字母、数字、下划线)

\W                      [^a-zA-Z_0-9]                  匹配非单词字符

八、边界匹配字符

      ^                                    $                                   \b                                     \B

开始字符                        结束字符                        单词边界                        非单词边界

九、量词

字符                             含义

?                         出现零次或一次(最多出现一次)

+                           出现一次或多次(至少出现一次)

*                            出现零次或多次(任意次)

{n}                         出现n次

{n,m}                     出现n到m次

{n,}                        至少出现n次

{0,n}                      至多出现n次

[...]                        字符范围: [a-z]、[0-9]、_、[A-Z]

十、贪婪模式

正则表达式使用量词进行匹配时,会默认匹配尽可能多的结果

eg: ’123456789‘.match(/\d{0,5}/g),匹配结果为1,2,3,4,5,选择匹配5个而不是0个

如果想让正则表达式尽可能少的匹配,即一旦成功匹配就不再继续尝试,在量词后加上?即可

十一、分组

使用元字符( )达到分组功能,使量词作用于分组,eg: (ABC){3}

十二、或

使用元字符 " | " 达到或的效果,eg: AB(bc|ef)FE


常用正则合集

1、校验合法url

/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/

2、校验手机号码

/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[289])\d{8}$/

3、校验国内座机电话

/\d{3}-\d{8}|\d{4}-\d{7}/

4、校验身份证

/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

5、校验车牌号

/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/

6、校验email地址

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

7、检验账号名称(只能由字母、数字、下划线组成,且以字母开头,8-20位)

/^[a-zA-Z][a-zA-Z0-9_]*{8,20}$/

8、检验密码(8-20位含字母、数字的密码)

/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/

9、纯字母

/^[a-zA-Z]*$/

10、纯中文

/^[\u4E00-\u9FA5]/

11、整数

/^-?\d+$/

12、整数且大于0

/^([1-9]\d*(\.\d+)?|0)$/

13、小数

/^\d+\.\d+$/

14、正整数、小数或0

/^\d+(\.?|(\.\d+)?)$/

15、上传图片类型

/image\/(png|jpg|jpeg|gif)$/

16、域名

/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?/

17、qq号

/^[1-9]*[1-9][0-9]*$/

18、微信号

/^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/

19、ipv4地址

/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

20、日期格式,yyyy-mm-dd

/^\d{4}(-)\d{1,2}\1\d{1,2}$/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342