【JS复习笔记】05 正则表达式

好吧,正则表达式,我从来没记过。以前要用的时候都是网上Copy一下的。

这里还是扯一下吧,以后要是有要用到的正则表达式那么就收集到这个帖子里。(尽管我认为不会,因为我根本就不是一个专业的前端,我只是来划下水的\(^o^)/)

应用范围:正则表达式主要应用于对字符串中的信息实现查找,替换和提取操作。

可处理正则表达式的方法有6个:

regexp.exec,regexp.test,string.match,string.replace,string.search和string.split

应用原因:在JS中,正则表达式相对于等效的字符串处理来说,有着显著的性能优势。

缺点:正如大部分人所看到的,这个东西有的时候光是看起来就很复杂和难懂。起码你让我这种菜去维护一个正则表达式我在网上Copy不到,一般都会用非正则表达式的方式去处理,美其名曰:代码可读性!

JS中正则表达式必需写在一行中,空白需要特别注意。

下面上一段代码:

var myRegExp=/^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var url="http://www.ora.com:8041/goodparts?q#fragment";
var result=myRegExp.exec(url);

看到上面这段代码你知道什么意思吗,绝大多数人不知道,知道的人也要看半天。这就是为什么大家都不愿意写这玩意。好了,这章就这样吧,大家散了吧。

即使如此,我还是自己要写下去,因为他实现的效果是这样的:

result的结果是下面这个数组:

["http://www.ora.com:8041/goodparts?q#fragment", "http", "//", "www.ora.com", "8041", "goodparts", "q", "fragment"]

这就是我为什么继续写下去的原因所在。

好吧,让我们一起学学这蛋疼又犀利的语法吧:

  • ^     表示字符串以下面匹配的方式开始
  • (?:([A-Za-z]+):)?   这个是套着捕获分组1的非捕获分组,必须后面跟着一个冒号才匹配(记住这里的冒号才匹配是由后面那个冒号决定的),匹配一个协议名,也就是http。
    • (?:)   表示一个非捕获型分组
    • 后缀? 表示这个分组是可选的,他表示重复0次或者一次。就比如你输入的url为www.baidu.com,不带协议名也是可以匹配的。
    • (...)   表示一个捕获型分组。一个捕获型分组会复制它所匹配的文本,并将其放在result数组里。每个捕获分组都会被指定一个编号。第一个捕获分组的编号是1,所以result[1]表示它。result[0]就是原字符串。
    • [...]   表示一个字符类。A-Za-z其实很好理解,就是26个大写字母和26个小写字母。-代表范围。
    • 后缀+ 表示这个字符类会被匹配一次或者多次。
    • 后面那个: 它表示匹配的字符串必须后面跟着一个冒号
  •   (\/{0,3})   这个是捕获分组2,这个因子匹配的是两个左斜杠
    • \/     表示的就是一个/,可以理解为\n一样的转义字符。
    • {0,3} 表示/这个东西会被匹配0到3次
  • ([0-9.\-A-Za-z]+) 这个是捕获分组3,匹配一个www.baidu.com之类的东西,由一个或多个字母和数字,以及 . 和 - 两个字符组成。也就是说你的网址是www.baidu.....----com---也是正确的
  • (?::(\d+)?  这个是套着捕获分组4的非捕获分组,匹配的是端口号。也就是以:开头的数字。同事将这个数字捕获后放入结果数组  
    • \d 表示的是一个数字字符,[0-9]也可以实现一样的效果
  • (?:\/([^?#]*))?   这又是一个套着捕获分组5的非捕获分组,它捕获了goodparts
    • (?:\/(...))? 匹配以左斜杠/开头的字串0到1次
    • [^?#]    匹配非?和#的所有字符,^表示非的意思
    • 后缀*  表示被匹配0次或者多次,和后缀+差不多,不过+是从1开始,
  • (?:\?([^#]*))? 同上吧,类似的,自己应该可以理解了吧
  • (?:#(.*))?  大致同上,
    • .  会匹配除行结束符以外的所有字符
  • $   表示字符串以上面那些匹配的方式结束

老实说,我照着书看完,又把这些话归纳总结出来,然后我就一直在想一个问题。

到底我是什么时候觉得正则表达式很难的呢?

是我还超级菜,并且还不爱学的时候。看什么都觉得难,再加上人也浮躁,不想沉下心来去学,所以形成了一个这样的印象。如今看来真是简单至极。

我会告诉你我基本上就从来没有自己写过正则表达式吗,我只会copy。

但是我在刚刚一个小时的学习中,我觉得我可以了,而且我能立马写出一段很6的正则表达式,无论多长,只需要把每个捕获分组换一行写就行了,然后贴到代码里时再合成一行。

突然的感悟:程序员只是需要一个安静的心和学习的兴趣。

我不会告诉你我是边看书边写博客的,好了,接下来我们继续吧。

无论如何,即时我现在明白了正则表达式不难,但是仍然还是把正则表达式写得越简单越好。

那么下面来写一个匹配数字的正则表达式吧

var myRegExp=/^-?\d+(?:\.\d*)?(?:e[+\-])?\d+)?$/i;
var url="-1.3e-3";
var result=myRegExp.test(url);//result为true

这上面的正则表达式的最后的 i 表示匹配字符串时忽略大小写。那么让我们扩展一下:

  • 以i结尾:表示忽略字符串大小写,都会匹配
  • 以g结尾: 表示全局的(匹配多次)。对于test方法不建议使用g,string的search方法会自动忽略g标识。
  • 以m结尾:多行($和^能匹配行结束符)

创建正则表达式的方式:

  • 最简单的,就像我上面那么玩的

    • var myRegExp=/^-?\d+$/i
  • 另外一种是使用RegExp构造器。Reg构造器适用于,必须在运行时动态生成正则表达式的情形。
    •   

      var myRegExp=new RegExp("\"(?:\\\\.|[^\\\\\\\"])*\"",‘g‘);
    • RegExp的属性
      • global:如果标识g被使用,值为true。
      • ignoreCase:如果标识i被使用,值为true。
      • lastIndex:下一次exec匹配开始的索引。初始值为0.
      • multiline:如果标识m被使用,值为true
      • source:正则表达式源码文本
    • 用正则表达式字面量创造的RegExp对象,共享同一个单例。(我自己测了一下发现并非如此,所以这句话真实性有待确认)

关于构成正则表达式的元素

  • 分支:用|表示,两个正则表达式可以用|并起来成为一个,如果字符串匹配由|分隔的两个正则表达式任意一个,那么这个选择匹配。
  • 正则表达式匹配量词,简单来讲就是匹配多少次
    • {3,6}表示会匹配3到6次
    • *  等同于{0,}
    • +  等同于{1,}
    • ?  等同于{0,1}
  • ASCII码特殊字符的匹配写法
    • [!-\/:[email protected]\[-‘{-~]

      非常难看,且难懂,所以我的正则表达式啊,唉~~~

  • 正则表达式分组类型
    • 捕获型:()
    • 非捕获型:(?:)进行简单的匹配,并不会捕获所匹配的文本。会有微弱的性能优势。
    • 向前正向匹配:(?=)   作者说这个特性和下面这个特性并非好的特性,所以,我已经决定开始忘掉了。
    • 向后负向匹配:(?!)
  • 需要加转义字符的字符:\ / [ ]  (  )  ? + - * | . ^ s
  • 同时一些有趣的转义字符
    • \f 换页符
    • \n 换行符
    • \r  回车符
    • \t  制表符即tab
    • \u 允许指定一个Unicode字符来表示一个16进制的常量
    • \d 等同于[0-9],\D正好相反,等同于[^0-9]
    • \s 等同于[\f\n\r\t\u000B\u0020\u00A0\u2028\u2029].这是一个Unicode空白字符的不完全子集,\S正好相反
    • \w 等同于[0-9A-Z_a-z],\W正好相反,\W希望表示的是字母类但是它通常很难起作用。
    • 所以一个更简单的字母类是[A-Za-z\u00C0-\u1FFF\u2800-\uFFFD],它包括所有Unicode字母和其他非字母字符。Unicode比这大的多,但是太庞大而低效了。所以用这个简单的就好
    • \b 被指定为一个字边界标识,方便对文本的字边界进行匹配。然而他会用\w去找边界,所以对多语言来说这是个不好的特性。
    • \1 \2 \3分别值的第1、2、3个分组所捕获的文本的一个引用
      • 所以用此正则表达式可以用来搜索文本中是否存在重复的单词隔着几个空白字符挨在一起的情况:

        var doubledWord=/([A-Za-z\u00C0-\u1FFF\u2800-\uFFFD]+)\s+\1/gi;
时间: 2024-10-05 19:33:12

【JS复习笔记】05 正则表达式的相关文章

【JS复习笔记】02 对象与函数

好吧,因为很重要的事情,几天没写笔记了. 关于对象: ||可以用来填充默认值,如:myApp.name || "无" &&可以用来避免错误,myApp.NameObj有某种情况不存在,那么可以用myApp.NameObj && myApp.NameObj.Name避免脚本错误 所有通过对象字面量创建的对象都连接到Object.prototype,当你创建某对象时也可以选择另一个对象作为它的原型,比如: if(typeof Object.beget!=='

js 学习笔记 05

DOM 对象的 clientHeight 包括:content+padding,offsetHeight 包括:content+padding+border /** * 禁止输入汉字 */ appUtils.bindEvent($(_pageId+" #test"),function(e){ e = window.event || e; if(!/[\u4e00-\u9fa5]+/.test(e.data)) { return false; } e.stopPropagation();

node.js学习笔记之正则表达式

每种编程语言里都有正则表达式,而且内容基本上都是一样的,今天就来说说我对正则表达式的理解. 我觉得正则表达式实际上就是一种规则,一种针对字符串的规则,我们可以通过正则表达式来获取我们想要的同类型字符串或者检验某一字符串是否符合我们的要求. 正则表达式可以参与计算的符号有: (),小括号,或叫圆括号,是一个分组,也是个集合.他的作用是一个匹配一串字符.比如: /(abc)/;   该句的作用是匹配源字符串中是否有"abc"这样的一串字符; [],中括号,或叫方括号,是一个集合,他的作用是

【JS复习笔记】06 方法

数组的方法: array.concat   一个数组去连接另一个数组,返回一个合成数组.var arrC=arrA.concat(arrB,'asd','sad',true,1.5); array.join       将数组用指定符号连接为一个字符串,并返回这个字符串.比用+快很多.var strA=arrA.join(",");//默认为逗号 array.pop       移除数组最后一个元素,并返回这个元素.var A=arrA.pop(); array.push     将一

【JS复习笔记】01 基本语法

数字: JS只有一种数字类型,相当于double.(不知道为什么,我每次打double输入法都会出现逗比了三个字) NaN是一个数值,可以用isNaN(number)检测NaN Infinity表示所有大于一个非常大的数值的值 JS有一个对象Math,它包含一套作用于数字的方法. 字符串: Js中所有字符都是Unicode的,16位 Js没有字符类型,只需创建仅包含一个字符的字符串即可 反斜线,引号和控制字符可以用转义字符插到字符串中,如"A"==="\u0041"

【JS复习笔记】00 序

作为一个前端苦手,说是复习,你就当我是重学好了. 好吧,我当然不可能抱着一个砖头去复习,所以捡了本薄的来读——<JavaScript语言精粹>. 当初带我的人说这本书挺好,就看这本书好了.我觉得他说的挺对.我喜欢这么薄的书,言简意赅. 好吧,废话少说,来点正经的小总结. JavaScript是原型继承的,就是说它直接从其它对象继承属性.如果你对原型继承有点不懂,可以去看看原型模式,大概就是那个样子了. JavaScript依赖于全局变量进行连接.所有编译单元的顶级变量都被撮合到一个被称为全局对

webpack.js 复习笔记

1.最简单的命令 hello.js function hello(str){ alert(str) } webpack hello.js hello.bundl.js //即把hello.js 压缩成 hello.bundle.js 2.requrie hello.js require('./world.js') function hello(str){ alert(str) } world.js function world(){ return { } } webpack hello.js h

【JS复习笔记】03 继承

关于继承 好吧,说到底JS还是原型继承的,而不是类继承.所以在这个上面要经常用到prototype去继承另一个对象. 所有的构造器函数都约定命名为首字母大写的形式,并且不以首字母大写的形式拼写任何其它的东西.当然一个更好的备选方案是根本就不用new.(太棒了,你说什么就是什么咯,我就当JS没这个东西了) 为什么呢,因为伪类模式就是一种画虎不成反类犬的模式,它试图去迎合我们这些玩类继承的程序员,但是其实它还有更多更好的选择. 那就是原型继承,然后创建对象的时候函数化,这样就可以对创建有私有变量的对

JavaScript语言精粹 笔记05 正则表达式

正则表达式 正则表达式以方法的形式被用于对字符串中的信息进行查找.替换画图提取操作.可处理正则表达式的方法有:regexp.exec, regexp.test,string.match, string.replace, string.search, 和string.split. 结构 有两个方法来创建一个RegExp对象.优先方法是使用正则表达式字面量.正则表达式被包围在一对斜杠中.有3个标志能在RegExp中设置,分别为g.i.m. // 构造一个匹配JavaScript字符串的正则表达式对象