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

正则表达式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");
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

  • 初衷:看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印...
    DCbryant阅读 3,896评论 0 20
  • 温馨提示:文章很长很长,保持耐心,必要时可以跳着看,当然用来查也是不错的。 正则啊,就像一座灯塔,当你在字符串的海...
    Stinson阅读 4,233评论 2 82
  • 转自: JS正则表达式一条龙讲解,从原理和语法到JS正则、ES6正则扩展,最后再到正则实践思路 温馨提示:文章很长...
    前端渣渣阅读 1,740评论 1 32
  • 正则表达式到底是什么东西?字符是计算机软件处理文字时最基本的单位,可能是字母,数字,标点符号,空格,换行符,汉字等...
    狮子挽歌阅读 2,104评论 0 9
  • 夕阳西下白鹭归 浅摇羽扇念卿回 落红流水愁相对 杨柳青青碧波碎 黄花知倦蝶厌飞 怀旧愿为陈香醉
    秋之枫叶阅读 224评论 0 0