美文网首页
网易微专业之《前端工程师》学习笔记(11)-JS正则

网易微专业之《前端工程师》学习笔记(11)-JS正则

作者: 荷小音 | 来源:发表于2016-01-15 14:20 被阅读564次

正则表达式RegExp

两种方式:

/pattern/attrs
new RegExp(pattern,attrs)


regexObj.test(str)
测试正则表达式与指定字符串是否匹配

/13566668888/.test("1356666888");  //false
/13566668888/.test("13566668888");   //true
/13566668888/.test("x1356666888y");   //true

第三个也是true的,不是我们希望的,那要怎么办呢。

就要用到”锚点“

锚点

锚点是用来干什么的呢,它是用来匹配位置的

  • ^:起始位置
/^http:/.test("http://www.163.com");  //true
/^http:/.test("ahttp://www.163.com");  //false
  • $:结尾位置
/\.jpg$/.test("1.jpg");  //true
/\.jpg$/.test("1.jpga");   //false

  • \b:单词边界
/\bis\b/.test("this");  //false
/\bis\b/.test("this is tom");   //true

学过锚点了之后,我们再来看最初的那个问题,我们可以把它改成下面的正则语句,然后测试那个刚才让我们不是很满意的问题。

/^13566668888$/

/^13566668888$/.test("x13566668888y");  //false
/^13566668888$/.test("13566668888");  //true

但是呢,我们比如做个下面的测试:

···
/^13566668888$/.test("13512345678"); //false
···

这个结果显然也不是我们想要的,我们想要的结果是做一个通用的手机号码测试的正则表达式,那这个怎么办呢,就需要用到第二个我们要讲的知识点——”字符类“

字符类

字符类是什么呢,是匹配一类字符中的一个。

  • [abc]:a或b或c;
  • [0-9]:一个数字; [^0-9]:非数字的一个字符;
  • [a-z]:一个字母;
  • .:任一字符(换行除外);

学了字符类以后呢,我们就可以把我们最初的正则表达式再重新调整下,然后测试下能不能测试通用的手机号码。

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

/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test("13512345678"); //true

但是问题又来了,我们会不会觉得这[0-9]写的太长了,能不能简写呢,这个问题的解决方法,我们就要用到正则表达式的第三个知识点——元字符。

元字符

元字符是什么呢,是具有特殊意义的字符。

其实我们上面已经介绍过一些元字符了,比如:

  • ^、$、\b

另外还有一些元字符:

  • \d:[0-9];\D:[^\d];

  • \s:空白符;\S:[^\s]表示非空白符;

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

有了元字符,我们再来改良下我们的这个正则表达式。

/^1\d\d\d\d\d\d\d\d\d\d$/
/^1\d\d\d\d\d\d\d\d\d\d$/.test("13512345678"); //true

那么问题又来了,这个改良过的正则表达式,还是不够简练,里面有10个\b,怎么样写的更加简练些呢,这个时候我们就要用到第四个知识点——量词。

量词

什么是量词呢,就是出现的次数。

  • {m,n}:m到n次

  • *:{0,}表示出现0次到无穷次

  • ?:{0,1}表示出现0次到1次

  • +:{1,}表示出现1次到 无穷次

看栗子

/https?:/.test("http://www.163.com"); //true
/https?:/.test("https://www.163.com"); //true
/https?:/.test("httpss://www.163.com"); //true

现在,有了这个量词以后,我们的匹配手机号码的表达式也可以调整改良下。

/^1\d{10}$/
/^1\d{10}$/.test("13512345678");  //true

讲完了匹配手机号码的正则表达式,我们再来看看,正则表达式中还有哪些知识点需要讲。

转义符

什么是转义符,就是需要匹配的字符是元字符。比如:

/^http:\/\//

/@163\.com$/

接下来再看一个需求,比如我们想要匹配网易的邮箱,但是比如别的邮箱都是报false的,这个怎么处理呢。网易邮箱有@126.com|@163.com|@188.com这几种。

要怎么写呢,做这个需求的时候,我们就要用到正则表达式中另一个知识点——多选分支。

/thi(c|n)k/===/thi[cn]k/
/\.(png|jpg|jpeg|gif)$/

照着上面的模样,我们可以试试怎么写匹配网易邮箱的正则表达式。

/(.+)@(126|163|188)\.com$/

下面要说的一个复杂的实例:

假如我们要在这上面的地址的地方,获取它子串的内容,要怎么办呢,这就要用到正则表达式,又一个知识点——捕获、

捕获

捕获要做的事情呢,就是保存匹配到的字符串,日后再用。那么捕获的语法呢:

  • ():捕获
  • (?:):不捕获
    比如上面的例子中有用到()的:
/(.+)@(126|163|188)\.com$/

捕获的东西就会放在()中,那么要怎么使用捕获到的东西呢?

str.match(regexp);

用这个来获取匹配的字符串。

var url="http://blog.163.com/album?id=1#comment";
var reg=/^(https?:)\/\/(^\/)+(\/[^\?]*)?(\?[^#]*)?(#.*)?$/;
var arr= url.match(reg);
var protocol=arr[1];
var host=arr[2];
var pathname=arr[3];
var search=arr[4];
var hash=arr[5];



再来看下一个需求:

要把5替换成5.00的价格形式的,怎么替换呢,就要用到下面的一个方法:

str.replace(regexp/substr,replacement)

看实例代码:

var str="the price of tomato is 5,the price of apple is 10.";
str.replace(/(\d+)/g,"$1.00");

相关文章

网友评论

      本文标题:网易微专业之《前端工程师》学习笔记(11)-JS正则

      本文链接:https://www.haomeiwen.com/subject/mjehkttx.html