资讯专栏INFORMATION COLUMN

正则表达式-基础实战篇

muddyway / 883人阅读

摘要:正则表达式基础实战篇在理论基础篇之后呢应该就对正则表达式有了一些了解比如说如何去创建一个正则表达式以及其中的匹配规则等等那么就开始正则表达式的实战吧建议把所有的实例在窗口敲一遍例子中展现的只是一部分配合正则表达式理论基础篇地址原址使用效

正则表达式-基础实战篇

在理论基础篇之后呢,应该就对正则表达式有了一些了解.比如说如何去创建一个正则表达式以及其中的匹配规则等等.那么就开始正则表达式的实战吧!
建议把所有的实例在console窗口敲一遍.例子中展现的只是一部分,配合《正则表达式-理论基础篇》SF地址、原址使用效果更佳哦!

一个手机号码匹配的进化历程

实例代码依托于:RegExpObj.test(String),其含义是测试正则表达式与指定字符串是否匹配。成功匹配返回true

第一阶段-字符直接量:匹配自身

先假设一个手机号码为13762571094.

最初形态

/13762571094/.test("13783281094");//false
/13762571094/.test("13762571094");//true

/13762571094/.test("ui13762571094dd");//true
//正则表达式在匹配时,只要输出匹配内容就返回true,不考虑前面的ui和后面的dd
//最后这种情况显然不是我们想要的.那么就进入下一阶段的实践吧.
第二阶段-锚点:指定匹配位置

^匹配起始位置

/^http:/.test("http://www.163.com");//true
/^http:/.test("ahttp://www.163.com");//false
/^http:/.test("https://www.163.com");//false

$匹配结尾位置

/.jpg$/.test("1.jpg");//true
/.jpg$/.test("1.jpg png");//false
/.jpg$/.test("1.png");//false
/.jpg$/.test("regexp.png");//false

:匹配单词边界

/is/.test("this");//false
/is/.test("that is reg");//true

在了解锚点之后我们的正则就有了第一次进化

/^13762571094$/.test("13762571094");//true

/^13762571094$/.test("ui13762571094dd");//false
//此时这个程序就能正确识别头尾的字符了.下面我们看看
/^13762571094$/.test("13712345674");//false
/*在试过了多个号码后发现,这个正则只能识别这个标准的手机号码.
这显然不是我们想要的,而不是识别一个手机号码的格式.
在下一阶段我们将实现一个手机号码的匹配.*/
第三阶段-字符类:匹配一类字符中的一个

[abc]:a或b或c。[0-9]:一个数字

[^0-9]:非数字的一个字符。[a-z]:一个字母

. :任一字符(换行符除外)

[0-9]/.test("123")//true
/[0-9]/.test("asd")//false
/[^0-9]/.test("asd")//true
/[a-z]/.test("asd")//true
/./.test("allen")//true
/./.test("12")//true

了解了字符类后,我们就可以进行第二次进化(50%)。此时就能匹配一个手机号码啦!

/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test("13762571094");//true
/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test("13712345678");//true
//是不是感觉代码太长了呢?[0-9]足足5个字符呢,为了省力,当然不会就这样算了.继续向下看吧
元字符-具有特殊意义的字符

其实我们已经在前面使用过它啦

^$

d:[0-9]D:[^d]

s:空白符。S:[^s]

w:[A-Za-z0-9_]W:[^w]

/d/.test("123");//true
/d/.test("1dsf");//true
/D/.test("1dsf");//true
/D/.test("123");//false
//自己再多去实验一些例子吧

了解了元字符后我们就可以进行第二次进化(100%)了。

/^1ffffdffffdffffdd$/.test("13762571094");//true
/^1ffffdffffdffffdd$/.test("13712345678");//true
/^1ffffdffffdffffdd$/.test("1376257109x");//false
//是不是感觉代码比刚刚短了很多了呢?但这还是不够,什么事情都阻止不了我想偷懒的心,继续学习吧.
第四阶段-量词:出现的次数

{n,m}:n到m次。?{0,1}

+:{1,}*:{0,}

/d*/.test("abc");//true
/d+/.test("abc");//false
/d+/.test("1abc");//true
/^https?:/.test("http://www.163.com");//true
/^https?:/.test("https://www.163.com");//true
/^https?:/.test("httpss://www.163.com");//false

此时我们的匹配手机号码的正则表达式就到了最后阶段

/^1d{10}$/.test("13762571094");//true
/^1d{10}$/.test("13712345678");//true
/^1d{10}$/.test("1376257109x");//false
//到这里手机号码就匹配完成了!
需要注意的地方-转义符:需要匹配的字符是元字符

/^http:///../@163.com$/

/http:///.test("http://www.163.com");//true
/@163.com$/.test("abc@163.com");//true
/@163.com$/.test("abc@163acom");//true
/@163.com$/.test("abc@163.com");//true
/@163.com$/.test("abc@163acom");//false
多选分支:网易邮箱的匹配

/thi(c|n)k/===thi[cn]k
.(png|jpg|jpeg|gif)$:检测一个文件是不是图片文件.

/(w+)@(163|126|188).com$/.test("guo啊圣诞节了@163acom")//false
/(w+)@(163|126|188).com$/.test("guodong111@163acom")//false
/(w+)@(163|126|188).com$/.test("guodong111@163.com")//true
捕获

保存匹配到的字符串,日后再用

():捕获/(w+)@(163|126|188).com$/

(?:):不捕获/(w+)@(?:163|126|188).com$/

使用:

$1,$2,...

api参数或返回值

获取匹配的字符串:String.match(regexp)
var url = "http://blog.163.com/album?id=1#comment";
var reg = /^(https?:)//([^/]+)(/[^?]*)?(?[^#]*)?(#.*)?$/;
// var reg = /^(https?:)//([^/]+)([^?]*)([^#]*)(.*)$///与上面的正则效果相同.;

var arr = url.match(reg);

//arr[0]为原字符串."http://blog.163.com/album?id=1#comment"
//对应括号所匹配的字符
var protocol= arr[1]//"http:"
var host= arr[2]//"blog.163.com"
var pathname= arr[3]//"/album"
var search= arr[4]//"?id=1"
var hash= arr[5]//"#comment"
替换一个子串:str.replace(regexp/substr,replacement)

第二个参数是字符时

var str = "the price of tomato is 5, the price of apple is 10."
str.replace(/(d+)/,"$1.00")
"the price of tomato is 5.00, the price of apple is 10."
//使用全局模式
str.replace(/(d+)/g,"$1.00")
"the price of tomato is 5.00, the price of apple is 10.00."

第二个参数是函数时

var html = "";
html = html.replace(/[<>]/g, function(m0){
    switch(m0){
        case "<":
            return "<";
        case ">":
            return ">";
    }
});
console.log(html);//
更强大的检索 - regexpObj.exec(str)

更详尽的结果:index

过程的状态:lastIndex

感觉基本用不到..就不说了...喜欢就推荐一下吧^_^

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86183.html

相关文章

  • 正则达式-基础实战

    摘要:正则表达式基础实战篇在理论基础篇之后呢应该就对正则表达式有了一些了解比如说如何去创建一个正则表达式以及其中的匹配规则等等那么就开始正则表达式的实战吧建议把所有的实例在窗口敲一遍例子中展现的只是一部分配合正则表达式理论基础篇地址原址使用效 正则表达式-基础实战篇 在理论基础篇之后呢,应该就对正则表达式有了一些了解.比如说如何去创建一个正则表达式以及其中的匹配规则等等.那么就开始正则表达...

    caozhijian 评论0 收藏0
  • 正则系列——JavaScript正则达式基础语法巩固

    摘要:基础语法巩固正则表达式引擎根据正则去匹配字符的时候,是通过检查索引的方式。妻原配就是好,可以直接使用正则表达式调用它。下面解释一下上面这些常用的元字符查找单个字符,除了换行和行结束符。正则系列文章整理到了 上一章内容:正则表达式实战篇 知识回顾 前2章分别学习了正则表达式入门技巧,以及遇到正则需求该如何去分析问题,还有正则表达式实战的一些场景解释。 这一章内容偏向理论,推荐你点击开头的...

    phodal 评论0 收藏0
  • 正则系列——JavaScript正则达式基础语法巩固

    摘要:基础语法巩固正则表达式引擎根据正则去匹配字符的时候,是通过检查索引的方式。妻原配就是好,可以直接使用正则表达式调用它。下面解释一下上面这些常用的元字符查找单个字符,除了换行和行结束符。正则系列文章整理到了 上一章内容:正则表达式实战篇 知识回顾 前2章分别学习了正则表达式入门技巧,以及遇到正则需求该如何去分析问题,还有正则表达式实战的一些场景解释。 这一章内容偏向理论,推荐你点击开头的...

    honhon 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0
  • PHP小知识点

    摘要:那些琐碎的知识点作者记录的的很奇特很难记的知识点。易错知识点整理注意和的区别中和都是输出的作用,但是两者之间还是有细微的差别。今天手头不忙,总结一下,分享过程中掌握的知识点。 深入理解 PHP 之:Nginx 与 FPM 的工作机制 这篇文章从 Nginx 与 FPM 的工作机制出发,探讨配置背后的原理,让我们真正理解 Nginx 与 PHP 是如何协同工作的。 PHP 那些琐碎的知识...

    hover_lew 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<