正则表达式入门

什么是正则表达式

正则表达式是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里,正则表达式通常被用来检索、替换那些符合某个模式的文本。
—— 百度百科

它的功能很强大,可以检索,替换文本。
比如javascript里面经常会使用正则表达式来做表单验证(判断手机号码,邮箱格式等)。

入门

想要快速入门,那你先花点时间把下面这些常用的标志符(元字符)或操作记下来。

  • . - 匹配除了换行符之外的任意字符

  • * - 指定前边的内容可以连续重复使用任意次

  • + - 指定前边的内容可以连续重复一次或多次

  • ? - 指定前边的内容可以连续重复一次或0次

  • {n} - 指定前边的内容可以连续重复n次

  • {n,} - 指定前边的内容可以连续重复n次或更多

  • {n,m} - 指定前边的内容可以连续重复n到m次

  • \d - 匹配一个数字

  • \w - 匹配字母或数字或下划线或汉字

  • \s - 匹配任意的空白符,包括空格,制表符(Tab),换行符,中文全角空格等

  • [XYZ] - 匹配中括号里面的任何一个字符

  • [XYZ]+ - 匹配中括号中的一个或多个字符

  • $ - 匹配字符串的结尾

  • ^ - 匹配字符串的开头

  • [a-z] - 匹配任意小写字母

  • [^a-z] - 在中括号里面的^表示否,这个例子中任何非小写字母的字符都能匹配

模式修饰符

  • i 不区分大小写搜索

  • m 多行搜索

  • g 全局搜索

虽然看上去很无聊,但是如果你能10分钟背下来,你肯定会更无聊。

在线工具

安利一个正则表达式在线工具(爱用不用~)

website

它可以在线测试,排错,帮你分析每个字符的意义。

JavaScript中的应用

Test()

这个方法接受一个字符串参数,并且返回一个bool值标示目标字符串是否匹配成功。

var username = 'JohnSmith';
alert(/[A-Za-z_-]+/.test(username)); // returns true

检测你背诵能力的时候到了~
上面的例子中,我们创建了一个正则表达式,/[A-Za-z_-]+/ 这部分,它可以用来检测目标字符串是否满足全部由大小写字母以及下划线,减号组成。通常在验证注册表单的时候会用到。 [A-Za-z_-]匹配一个[]中的字符,+ 号指定前边的内容可以连续重复一次或多次。你肯定一眼就看出来了!

Split()

程序员对split这个方法肯定也很熟悉了,它用于把一个字符串分割成字符串数组。

但是你可能不知道,它除了接受分割符参数以外,还接受正则表达式。

var str = 'this is my string';    
alert(str.split(/\s/)); 
// alerts "this, is, my, string";

\s匹配任意的空白符,包括空格,制表符(Tab),换行符,中文全角空格等,于是就讲str分割成数组[this, is, my, string]

var str = 'this is my this string';
alert(str.split(/\s/)[3]); // alerts "string"

Replace()

replace方法用于将匹配的内容替换成目标内容。
比如我们想把Hello,World 的World替换成Universe,我们可以这么干。

var someString = 'Hello, World';
someString = someString.replace(/World/, 'Universe');
alert(someString); // alerts "Hello, Universe"

再举个栗子,比如我们需要把用户输入的特殊符号删除。

var username = 'J;ohnSmith;@%';
username = username.replace(/[^A-Za-z\d_-]+/, '');
alert(username); // JohnSmith;@%

我们把除了大小写字母以及下划线,减号之外的字符全都替换成''。注意[]里面的^表示取反。

注意上面的栗子,我们只替换了第一个字符,因为默认一匹配就不再继续搜索。我们可以直接在正则后面添加g开启全局模式。

var username = 'J;ohnSmith;@%';
username = username.replace(/[^A-Za-z\d_-]+/g, '');
alert(username); // alerts JohnSmith

Match()

跟test不太一样,match的调用对象是待测字符串。它的返回值是所有匹配的元素组成的数组。

var name = 'JeffreyWay';
alert(name.match(/e/)); // alerts "e"

结果只输出一个e,因为我们没有开启全局搜索模式呀

var name = 'JeffreyWay';
alert(name.match(/e/g)[1]); // alerts "e"

再来一个栗子

var string = 'This is just a string with some 12345 and some !@#$ mixed in.';
alert(string.match(/[a-z]+/gi)); // alerts "This,is,just,a,string,with,some,and,some,mixed,in"

[a-z]+匹配一个或多个小写字母,gi模式修饰符表示开启全局模式并忽略大小写。

分割Email地址

接下来就是动手实践了,我们尝试分割email地址,w3ctrain@gmail.com,使用正则表达式把w3ctrain,gmail拿出来。

var email = 'w3ctrain@gmail.com';
alert(email.replace(/([a-z\d_-]+)@([a-z\d_-]+)\.[a-z]{2,4}/ig, '$1, $2')); // alerts "w3ctrain, gmail"

看上去挺复杂的,我们来一层一层地剥开它的洋葱片。

.replace(/([a-z\d_-]+)

搜索匹配任意小写字母,数字,下划线,减号,一个或多个

@([a-z\d_-]+)

接下来是匹配@符号,和接下来的其他字符。

\.[a-z]{2,4}/ig,

\.是转义字符,因为单纯的.在正则表达式里面是元字符,它表示匹配除了换行符之外的任意字符。所以这里匹配的是. + 2~4位的字母 (忽略大小写并开启全局模式)

'$1, $2')

最后部分是replace方法的第二个参数,用来返回与regexp中的表达式相匹配的文本。比如这个例子中,replace将返回w3ctrain,gmail这样的字符串,注意不是数组调用toString()输出的字符串,中间的逗号是$1, $2这里传过去的。$1匹配w3ctrain,$2匹配gmail。

创建我们自己的Location对象

文章的最后,我们来写一个Location对象,它的功能是对传过去的url分解成href,host,port,protocol等等。

function loc(url) {
    return {
        search : function() {
            return url.match(/\?(.+)/i)[1];
        },
 
        hash : function() {
            return url.match(/#(.+)/i)[1];
        },
 
        protocol : function() {
            return url.match(/(ht|f)tps?:/)[0];
        },
     
        href : function() {
            return url.match(/(.+\.[a-z]{2,4})/ig);
        }
    }
}

serch部分是?之后的所有内容;hash是#号之后的部分;protocol是网络协议,我们可以匹配到http,https,ftp;href我们这里是检测到域名结束位置,也就是.com,.cn等。

写完之后,我们可以这样用。

var l = loc('http://www.w3ctrain.com/about/#Helkyle');
 
alert(l.href()); // http://www.net.tutsplus.com
alert(l.protocol()); // http:
alert(l.hash()); //Helkyle

继续深造

如果看完这篇文章能消除你对正则表达式的恐惧感,那就够了!!!一口吃不成胖子,路还很长,正则表达式也才刚刚开始~

细心的朋友会发现,这篇文章存在很多问题没有描述清楚,比如

var string = 'This is just a string with some 12345 and some !@#$ mixed in.';
alert(string.match(/[a-z]+/gi)); // alerts "This,is,just,a,string,with,some,and,some,mixed,in"

为什么结果是”This,is”,而不是”T,h,i,s,i,s”呢?

url.match(/(.+\.[a-z]{2,4})/ig)

为什么能匹配到整个域名???

+匹配一个或多个是什么意思???

这些涉及正则表达式的搜索算法,推荐你再看看相关资源里面的内容,相信你能找到答案~

相关资源

[You Don’t Know Anything About Regular Expressions: A Complete Guide]
—— 本文大部分内容翻译自此

[正则表达式30分钟入门教程]
—— 来自deerchao

[8 Regular Expressions You Should Know]
—— 来自Vasili

[regexr]
—— 在线工具

RegularExpressionsBook
[精通正则表达式]
—— 精通正则表达式(动物书)

[MDN——正则表达式]

[正则表达式进阶]
—— 小胡子哥的文章(从照片就能看出,你才不是一个没有故事的女同学)

如需转载,请注明出处:http://w3ctrain.com/2015/10/13/regular-expressions-introduction/



版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将立即给予删除

转载请注明:文章转载自:全分享社区 「http://www.aweb.cc

本文标题:正则表达式入门

本文地址:http://www.aweb.cc/article/detail/id/421.html

手机访问网站自动跳转到手机版(三种方法实 <<上一篇 下一篇>>HTML5 history API,创造