资讯专栏INFORMATION COLUMN

一篇文章带你玩转正则表达式

ermaoL / 2604人阅读

摘要:读这篇文章之前你需要掌握基本的知识,并且有安静舒适的环境与宽裕的时间,文章有点长,你可以选择备好或茶来慢慢学习。文章标题有点夸大了,这是一篇正则表达式的入门文章。如有错误,欢迎指正。

读这篇文章之前你需要掌握基本的JavaScript知识,并且有安静舒适的环境与宽裕的时间,文章有点长,你可以选择备好coffee或茶来慢慢学习。
文章标题有点夸大了,这是一篇正则表达式的入门文章。如有错误,欢迎指正。

概念和语法

REGEXP对象

JavaScript 通过内置对象RegExp支持正则表达式,有两种方法实例化RegExp对象

1.字面量 2.构造函数

字面量

var reg = /is /g //匹配单词is g是global 进行全文搜索匹配

  没有g:
  var reg = /is/;
  //只替换第一项
  "He is a boy. This is a dog. Where is she?".replace(reg,"IS");
  "He IS a boy. This is a dog. Where is she?"
  有g:
  var reg = /is/g;
  //替换了所有的
  "He is a boy. This is a dog. Where is she?".replace(reg,"IS");
  "He IS a boy. This IS a dog. Where IS she?"
构造函数

var reg = new RegExp( "is" , "g"); //同样,如果不加g 则只替换第一项

修饰符

g:global 全文搜索,不添加,搜索到第一个匹配停止
i:ignore case 忽略大小写,默认大小写敏感
m:multiplelines 多行搜索

  //未忽略大小写
  "He is a boy. Is he?".replace(/is/g, "0");
  "He 0 a boy. Is he?"
  //忽略大小写
  "He is a boy. Is he?".replace(/is/gi, "0");
  "He 0 a boy. 0 he?"
元字符

·正则表达式由两种基本字符类型组成:

原义文本字符

元字符

·元字符是在正则表达式中有特殊含义的非字母字符

`· * + ? $ ^ . /  () {} []`
字符类

我们可以使用元字符 [] 来构建一个简单的类
所谓类是指符合某些特性的对象,一个泛指,而不是特指某个字符
表达式[abc] 把字符a或b或c归为一类,表达式可以匹配这类的字符(one of)

  "a1b2c3d4".replace(/[abc]/g,"X")
  "X1X2X3d4"
字符类取反

使用元字符^创建 反向类/负向类

  "a1b2c3d4".replace(/[^abc]/g,"X")
  "aXbXcXXX"
范围类

正则表达式还提供了 范围类
所以我们可以使用 [a-z] 来连接两个字符表示 从a到z的任意字符
这是个闭区间,也就是包含a和z本身

  "a1b2d3x4z9".replace(/[a-z]/g,"Q")
  "Q1Q2Q3Q4Q9"

在[]组成的类内部是可以连写的[a-zA-Z] (one of)

  "a1b2d3x4z9AJHGK".replace(/[a-zA-Z]/g,"Q")
  "Q1Q2Q3Q4Q9QQQQQ"

中划线:如果是在里面 如[a-z],就表示范围的意思,如果想匹配中划线,在后面加

  "2016-09-12".replace(/[0-9-]/g,"A")
  "AAAAAAAAAA"
预定义类

正则表达式提供 预定义类 来匹配常见的字符类

字符 . 等价类[^ ] 除了回车符和换行符之外的所有字符

  d      [0-9]    数字字符
  D      [^0-9]   非数字字符
  s 空白符 S非空白符
  w 单词字符(字母、数字下划线)
  W 非单词字符
  abd. //ab+数字+任意字符
边界

正则表达式还提供了几个常用的边界匹配字符

  ^ 以xxx开始
  $ 以xxx结束
   单词边界
  B 非单词边界
  "@123@abc@".replace(/@./g, "Q")
  "Q23Qbc@"
  "@123@abc@".replace(/^@./g, "Q")
  "Q23@abc@"
  "@123@abc@".replace(/.@/g, "Q")
  "@12QabQ"
  "@123@abc@".replace(/.@$/g, "Q")
  "@123@abQ"
量词

我们希望匹配一个连续出现20次数字的字符串

+ 出现一次或多次(至少出现一次)
* 出现零次或多次(任意次)
{n} 出现n次
{n,m}出现n到m次
{n,}至少出现n次

贪婪模式

d{3,6} 12345678

  //尽可能多的匹配
  "12345678".replace(/d{3,6}/g,"X")
  "X78"
非贪婪模式

让正则表达式尽可能少的匹配,也就是说一旦成功匹配不再继续尝试就是非贪婪模式

  //在量词后加上?即可 如下面的为3个一组
  "12345678".replace(/d{3,6}?/g,"X")
  "XX78"
分组

匹配字符串Byron连续出现3次的场景
Byron{3} 只是将n重复三次
使用()可以达到分组的功能,使量词作用于分组
(Byron){3} 是将Byron重复三次

  //错误的
  "a1b2c3d4".replace(/[a-z]d{3}/g,"X")
  "a1b2c3d4"
  //正确的
  "a1b2c3d4".replace(/([a-z]d){3}/g,"X")
  "Xd4"

使用 | 可以达到或的效果

  //示例一
  "ByronCasper".replace(/Byron|Casper/g,"X")
  "XX"
  //示例二(分组和或配合使用)
  "ByronsperByrCasper".replace(/Byr(on|Ca)sper/g,"X")
  "XX"
反向引用

2016-08-12 => 08/12/2016

  //分组捕获
  "2016-08-12".replace(/(d{4})-(d{2})-(d{2})/g,"$1")
  "2016"
  "2016-08-12".replace(/(d{4})-(d{2})-(d{2})/g,"$2/$3/$1")
  "08/12/2016"
忽略分组

不希望捕获某些分组,只需要在分组内加上?:就可以
(?:Byron).(ok)

前瞻

正则表达式从文本头部向尾部开始解析,文本尾部方向,称为“前”
前瞻就是在正则表达式匹配到规则的时候,向前检查是否符合断言,
后顾/后瞻方向相反

正向前瞻 exp(?=assert)
负向前瞻 exp(?!assert)

  //单词后面是数字
  "a2*3".replace(/w(?=d)/g,"X")
  "X2*3"
  "a2*34v8".replace(/w(?=d)/g,"X")
  "X2*X4X8"
  //单词后面不是数字
  "a2*34vv".replace(/w(?!d)/g,"X")
  "aX*3XXX"
对象属性

对象属性是只读的

global:是否全文搜索,默认false
ignore case:是否大小写敏感,默认是false
multiline:多行搜索,默认值是false
lastIndex:是当前表达式匹配内容的最后一个字符的下一个位置
source:正则表达式的文本字符串

test和exec方法

RegExp.prototype.test(str)
用于测试字符串参数中是否存在匹配正则表达式模式的字符串
如果存在则返回true,否则返回false

  var reg1 = /w/;
  reg1.test("a")
  true
  reg1.test("$")
  false

  但是如果这样:
  var reg2 = /w/g;
  //第一次
  reg1.test("ab")
  true
  //第二次
  reg1.test("ab")
  true
  //第三次
  reg1.test("ab")
  false

这是lastIndex在作怪!
第一次匹配的时候当前匹配内容为a,最后一个字符也是a本身,下一个位置为b前面;
第二次匹配的时候当前匹配内容为b,最后一个字符也是b本身,下一个位置为b后面;
第三次匹配的时候当前匹配内容为空,最后一个字符也是空本身,下一个位置重置为a前面。

解决方法:
①每次都实例化一个新对象

(/w/g).test("ab") 这样就能每次都是true,但是会产生内存开销,不采用!

②如果想用test本意的话,不用加g,只需检测有没有就可以了。

RegExp.prototype.exec(str)
使用正则表达式模式对字符串执行搜索,并将更新全局RegExp对象的属性以反映匹配结果

如果没有匹配的文本则返回null,否则返回一个结果数组:
- index 声明匹配文本的第一个字符的位置
- input 存放被检索的字符串 string

非全局调用

调用非全局的RegExp对象的exec()时,返回数组
第一个元素是与正则表达式相匹配的文本
第二个元素是与RegExpObject的第一个子表达式相匹配的文本(如果有的话)
第三个元素是与RegExp对象的第二个子表达式相匹配的文本(如果有的话),以此类推

  var reg3 = /d(w)(w)d/;
  var reg4 = /d(w)(w)d/g;
  var ts = "$1az2bb3cy4dd5ee";

  var ret = reg3.exec(ts);
  //在非全局下 lastIndex失效
  console.log(reg3.lastIndex + "	" + ret.index + "	" + ret.toString());

  console.log(reg3.lastIndex + "	" + ret.index + "	" + ret.toString());

  while(ret = reg4.exec(ts)){
     console.log(reg4.lastIndex + "	" + ret.index + "	" + ret.toString());
  }
  //结果:
  "0  1 1az2,a,z"
  "0  1 1az2,a,z"
  "5  1 1az2,a,z"
  "11 7 3cy4,c,y"
字符串对象方法

Stringl.protatype.search(reg)
search()方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串
方法返回第一个匹配结果index,查找不到返回 -1
search()方法不执行全局匹配,它将忽略标志g,并且总是从字符串的开始进行检索

String.prototype.match(reg)
match()方法将检索字符串,以找到一个或多个与regexp匹配的文本
regexp是否具有标志g对结果影响很大
非全局调用
如果regexp没有标志g,那么match()方法就只能在字符串中执行一次匹配
如果没有找到任何匹配的文本,将返回null
否则它将返回一个数组,其中存放了与它找到的匹配文本有关的信息

返回数组的第一个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本
除了常规的数组元素之外,返回的数组还含有2个对象属性

index 声明匹配文本的起始字符在字符串的位置

input 声明对stringObject的引用

      var reg3 = /d(w)d/;
      var reg4 = /d(w)d/g;
      var ts = "$1a2b3c4d5e";

      var ret = ts.match(reg3);

      console.log(ret);
      console.log(ret.index + "	" + reg3.lastIndex);

      //结果
      ["1a2", "a"]
      "1  0"

全局调用
如果regexp具有标志g则match()方法将执行全局检索,找到字符串中的所有匹配字符串
没有找到任何匹配的子串,则返回null
如果找到了一个或多个匹配子串,则返回一个数组
数组元素中存放的是字符串中所有的匹配子串,而且也没有index属性或input属性

      ret = ts.match(reg4);
      console.log(ret);
      console.log(ret.index + "	" + reg3.lastIndex);

      //结果
      ["1a2", "3c4"]
      "undefined  0"

String.prototype.split(reg)
我们经常使用split方法把字符串分割为字符数组
"a,b,c,d".split(","); //["a","b","c","d"]
在一些复杂的分割情况下我们可以使用正则表达式解决
"a1b2c3d".split(/d/); //["a","b","c","d"]

String.prototype.replace

String.prototype.replace(str,replaceStr)
String.prototype.replace(reg,replaceStr)
String.prototype.replace(reg,function)

function参数含义

function会在每次匹配替换的时候调用,有四个参数
①匹配字符串
②正则表达式分组内容,没有分组则没有该参数
③匹配项在字符串中的index
④原字符串
    "a1b2c3d4e5".replace(/d/g, function(match,index,origin){
      console.log(index);
      return parseInt(match) + 1;
    });
    //结果
    1
    3
    5
    7
    9
    "a2b3c4d5e6"

    "a1b2c3d4e5".replace(/(d)(w)(d)/g, function(match,group1,group2,group3,index,origin){
      console.log(match);
      return group1 + group3;
    });
    //结果
    "1b2"
    "3d4"
    "a12c34e5"

希望能对你有所帮助,更好的运用正则来解决问题!
附:

1.正则表达式检测网站:(https://regexper.com/)
2.JSBin:(http://jsbin.com/?js,console)

博客地址:(http://fehey.com/2016/08/12/r... )
欢迎前端小伙伴交流~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87823.html

相关文章

  • 老司机【分享】带你玩转阿里云服务器

    摘要:阿里云是国内云服务器市场的龙头,性价比高,速度快又安全,是站长建站首选的云服务器之一。作为一个老司机,福利吧也和大家分享一下我的阿里云推广经验,教大家如何免费推广云大使。阿里云是国内云服务器市场的龙头,性价比高,速度快又安全,是站长建站首选的云服务器之一。福利吧使用的也是阿里云服务器,是折腾了很多次网站搬家后,才选择了阿里云。身边好几个站长最后都殊途同归,用了阿里云,可见阿里云服务器性能确实...

    banana_pi 评论0 收藏0
  • 带你玩转 JavaScript ES6 (七) - 异步

    摘要:说明处理方法被异步执行了。意味着操作成功完成。状态的对象可能触发状态并传递一个值给相应的状态处理方法,也可能触发失败状态并传递失败信息。注生命周期相关内容引用自四使用和异步加载图片这是官方给出的示例,部分的代码如下 带你玩转 JavaScript ES6 (七) - 异步 本文同步带你玩转 JavaScript ES6 (七) - 异步,转载请注明出处。 本章我们将学习 ES6 中的 ...

    he_xd 评论0 收藏0
  • 带你玩转Postman的集合

    摘要:选择选项,可以添加名称和描述的数据,以便其他用户了解你的相关信息,如图创建一个新集合。如果用户正在处理一些特定的集合,可以单击图标将集合置顶,如图过滤集合。 集合...

    Bowman_han 评论0 收藏0
  • 【深入浅出容器云】五分钟带你玩转Docker容器服务

    摘要:深入浅出容器云系列文章是由时速云出品,本文是第二篇,欢迎大家不吝赐教。容器服务是一种高度可扩展的高性能容器管理服务,服务于应用的完整生命周期。存储卷容器服务支持有状态和无状态服务。当容器重新部署时也会随着容器在不同主机之间迁移。 导语:随着以Docker为代表的容器技术在国内的迅速发展,容器云也逐渐被广大开发者所熟知,但容器云(CaaS)相比传统的云主机(IaaS)在实际应用中还存在着...

    AlexTuan 评论0 收藏0
  • 带你玩转css3的3D!

    摘要:透视即是以现实的视角来看屏幕上的事物,从而展现的效果。旋转则不再是平面上的旋转,而是三维坐标系的旋转,就包括轴,轴,轴旋转。必须与属性一同使用,而且只影响转换元素。可自由转载引用,但需署名作者且注明文章出处。 showImg(https://segmentfault.com/img/bVzJoZ); 话不多说,先上demo 酷炫css3走马灯/正方体动画: https://bupt-...

    Panda 评论0 收藏0

发表评论

0条评论

ermaoL

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<