正则表达式-基本实战篇

2024年3月25日 161次阅读 来源: 三省吾身丶丶

正则表达式-基础实战篇

在理论基础篇以后呢,应当就对正则表达式有了一些相识.比如说怎样去建立一个正则表达式以及个中的婚配划定规矩等等.那末就最先正则表达式的实战吧!
发起把一切的实例在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

  • \b:婚配单词边境

/\bis\b/.test("this");//false
/\bis\b/.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个字符呢,为了省力,固然不会就这样算了.继承向下看吧

元字符-具有特别意义的字符

实在我们已在前面运用过它啦

  • ^、$、\b。

  • \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%)了。

/^1\d\d\d\d\d\d\d\d\d\d$/.test("13762571094");//true
/^1\d\d\d\d\d\d\d\d\d\d$/.test("13712345678");//true
/^1\d\d\d\d\d\d\d\d\d\d$/.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

  • 此时我们的婚配手机号码的正则表达式就到了末了阶段了

/^1\d{10}$/.test("13762571094");//true
/^1\d{10}$/.test("13712345678");//true
/^1\d{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 = '<label>网址:</label><input placeholder="以http://肇端">';
html = html.replace(/[<>]/g, function(m0){
    switch(m0){
        case '<':
            return '&lt;';
        case '>':
            return '&gt;';
    }
});
console.log(html);//&lt;label&gt;网址:&lt;/label&gt;&lt;input placeholder="以http://肇端"&gt;

更壮大的检索 – regexpObj.exec(str)

  • 更详实的效果:index

  • 历程的状况:lastIndex

觉得基础用不到..就不说了…喜好就引荐一下吧^_^

    原文作者：三省吾身丶丶
    原文地址: https://segmentfault.com/a/1190000003982677
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞