正则表达式懒惰贪婪和replace函数

最近项目中一个简单的需求是,要把如下格式的一段文字

abc{1220}cde{2222}def{cccc}
替换成
abc{1}cde{2}def{3}
也就是把{}匹配到的内容,用匹配的索引替代掉。

粗暴解决方法

恩,这是个简单的问题,安排一个刚来没多久的小伙伴来做吧,结果他的代码是这样的

var left = "{",right = "}";
然后写代码自己一遍一遍的去找匹配的内容,具体代码我就不贴了

看到这个,我的内心是崩溃的。
你没有学过正则表达式吗? 他说学过。
他说学过,他竟然说学过。。。

第一个正则表达式

小伙伴从新从正则表达式的思路去解决,然后得出的是这样的一个正则表达式。

var matchs = text.match(/\{.*\}/g);
for(var i = 0;i < matchs.length; i ++){
   text = text.replace(matchs[i],"{"+(i+1)+"}")
}

然而结果并不对,结果是这样的:

var text = "aaa{111}{bbb}{111}";
var matchs = text.match(/\{.*\}/g);
for(var i = 0;i < matchs.length; i ++){
   text = text.replace(matchs[i],"{"+(i+1)+"}")
}
最终的结果是这样的:
aaa{1}

第二个正则表达式

第一个表达式的问题在哪儿呢,这要从正则表达式的懒惰与贪婪说起,下面是相关的解释:

当正则表达式中包含能接受重复的限定符时,通常的行为是(在使整个表达式能得到匹配的前提下)匹配尽可能多的字符。以这个表达式为例:a.b,它将会匹配最长的以a开始,以b结束的字符串。如果用它来搜索aabab的话,它会匹配整个字符串aabab。这被称为贪婪匹配。
有时,我们更需要懒惰匹配,也就是匹配尽可能少的字符。前面给出的限定符都可以被转化为懒惰匹配模式,只要在它后面加上一个问号?。这样.
?就意味着匹配任意数量的重复,但是在能使整个匹配成功的前提下使用最少的重复。

由此可以看出本例中,使用了贪婪模式,所以匹配出来的结果是这样的:

{111}{bbb}{111}

要改进程序,只需要把贪婪模式改成懒惰模式即可,上面说过只需要在后面加一个问号?即可,所以改进的版本是这样的:

var text = "aaa{111}bbb{111}";
var matchs = text.match(/\{.*\}/g);
for(var i = 0;i < matchs.length; i ++){
   text = text.replace(matchs[i],"{"+(i+1)+"}")
}
最终结果是对的:
aaa{1}bbb{2}

replace函数

前面第二个正则表达式可以解决需求,但是代码比较长,事实上,可以直接使用replace的第二个参数可以指定函数的功能来实现,代码少了很多,如下:

var text = "aaa{111}bbb{111}";
var index = 1;
text = text.replace(/\{.*?\}/g,function(){
  return "{" + (index ++) + "}"
})

后续

当然本案例中的解决方案没有考虑括号不匹配的情况,相关情况更加复杂一点,自行思考。

有关正则表达式的学习,新人们可以参考我N年前看过的一个文档,里面的内容讲的挺详尽的。

http://deerchao.net/tutorials/regex/regex.htm#greedyandlazy

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 正则表达式到底是什么东西?字符是计算机软件处理文字时最基本的单位,可能是字母,数字,标点符号,空格,换行符,汉字等...
    狮子挽歌阅读 6,511评论 0 9
  • 本文译自 制作正则引擎的作者 Jan Goyvaerts 为工具 RegexBuddy 写的教程版权归原作者所有注...
    极客圈阅读 8,553评论 0 25
  • 初衷:看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印...
    DCbryant阅读 9,549评论 0 20
  • http://www.jb51.net/tools/zhengze.html 正则表达式30分钟入门教程 版本:v...
    nullleaf阅读 3,749评论 0 2
  • 9.19--9.23 第7章 正则表达式 正则表达式是一个拆分字符串并查询相关信息的过程。 推荐练习网站: js ...
    如201608阅读 4,700评论 0 4

友情链接更多精彩内容