JS复习笔记05 正则表达式

Posted 2020-06-07

好吧，正则表达式，我从来没记过。以前要用的时候都是网上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;