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

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...


netcy
204 声望120 粉丝

欢迎对canvas、webgl、图形学感兴趣的读者订阅专栏。