继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript:正则表达式初体验

mystylecat
关注TA
已关注
手记 3
粉丝 30
获赞 679

挥动正则表达式之剑,斩尽各种复杂的匹配问题。 @mystylecat


资源

书籍

正则表达式是编程语言中的一大利器,它能够大幅提高开发效率。这正是我们需要学习正则表达式的原因。首先,提供两本参考书

1.《精通正则表达式》
2.《正则表达式经典实例》

精通正则表达式 正则表达式经典实例


学习视频

如果觉得看书太难,没关系,先来个入门级的课程,尝尝鲜儿吧--慕课网JavaScript深入浅出之正则表达式正则表达式课程


常用正则表达式

就知道你们想走捷landuo,那也有得治。下面是最常用的JavaScript正则表达式,只需要ctrl+c/ctrl+v,就能应用到工作中啦,快点去匹配问题说拜拜!


常用字符

匹配中文字符
/[\u4e00-\u9fa5]/gm
匹配双字节字符
/[^\x00-\xff]/igm
匹配行尾行首空白
/(^\s*)(\s*$)/
只能输入数字
/^\d+$/
只能输入n个数字
/^\d{n}$/
至少输入n个以上的数字
/^\d{n,}$/
只能输入m到n个数字
/^\d{m,n}$/
只能由英文字母组成
/^[a-z]+$/i
只能由大写英文字母组成
/^[A-Z]+$/
只能由英文和数字组成
/^[a-z0-9]+$/i
只能由英文,数字和下划线组成
/^\w+$/
----------

常用表单

匹配email地址
/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
匹配url地址
/^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i
匹配手机号码
/^(08617951)?(13[0-9]15[012356789]17[678]18[0-9]14[57])[0-9]{8}$/
匹配身份证号
/^(^[1-9]\d{7}((0\d)(1[0-2]))(([012]\d)3[0-1])\d{3}$)(^[1-9]\d{5}[1-9]\d{3}((0\d)(1[0-2]))(([012]\d)3[0-1])((\d{4})\d{3}[Xx])$)$/
匹配邮政编码
/^[1-9]\d{5}(?!\d)$/
匹配日期(YYYY-mm-dd)
/^[1-2][0-9][0-9][0-9]-[0-1]{0,1}[0-9]-[0-3]{0,1}[0-9]$/

----------

浏览器navigator.userAgent

从UA判断是否为IE浏览器
/msie (\d+\.\d+)/i
从UA判断是否为webkit浏览器
/webkit/i
从UA判断是否为chrome浏览器
/chrome\/(\d+\.\d+)/i
从UA判断是否为firefox浏览器
/firefox\/(\d+\.\d+)/i
从UA判断是否为opera浏览器
/opera(\/ )(\d+(\.\d+)?)(.+?(version\/(\d+(\.\d+)?)))?/i
从UA判断是否为safari浏览器
/(\d+\.\d)?(?:\.\d)?\s+safari\/?(\d+\.\d+)?/i
从UA判断是否为android浏览器
/android/i
从UA判断是否为ipad
/ipad/i
从UA判断是否为iphone
/iphone/i
从UA判断是否为Mac Os平台
/macintosh/i
从UA判断是否为windows平台
/windows/i
从UA判断是否为移动终端
/(nokiaiphoneandroidipadmotorola^mot\-softbankfomadocomokddiup\.browserup\.linkhtcdopodblazernetfrontheliohosinhuaweinovarraCoolPadwebostechfaithpalmsourceblackberryalcatelamoiktouchnexiansamsung^sam\-s[cg]h^lgeericssonphilipssagemwellcombunjalloomauisymbiansmartphonemidpwapphonewindows ceiemobile^spice^bird^zte\-longcospantechgionee^sie\-portalmmmjig\s browserhiptop^ucweb^benqhaier^lctopera\s*mobiopera\*mini320x320240x320176x220)/i

----------

html相关

匹配link标签
/\<link\s(.*?)\s*(([^&]>)(\/\>)(\<\/link\>))/gi
匹配html标签
/<(\S*?) [^>]*>.*?</\1><.*?/>/gm
匹配非html标签
/^[^<>`~!/@\#}$%:;)(_^{&*='+]+$/
匹配script标签
/<script[^>]*>[\s\S]*?<\/[^>]*script>/gi
匹配html注释
/<!--[\s\S]*?--\>/g
匹配html条件注释
/\[\s*if\s+[^\]][\s\w]*\]/i
匹配非IE的条件注释
/^\[if\s+(!IEfalse)\]>.*<!\[endif\]$/i
匹配css expression
/expression[\s\r\n ]?\(/gi
匹配不合法的html标签
/<\W+>/gi
匹配textarea标签
/<textarea[^>]*>[\s\S]*?<\/[^>]*textarea>/gi

如果阅读到了这里,那么恭喜你,马上就要get一个新技能了。快点下载QQ浏览器,体验一下web前端助手 吧。这里写图片描述


虽然我不是什么大牛,但却愿意在前端道路上走到黑,共勉。到这里,你以为正则表达式就结束了?悄悄告诉你,本系列会继续写下去的~~~ @mystylecat

好文推荐:FE Alien的笔记Javascript正则表达式

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP