js之正则表达式初步探索

这是我们新项目中的一个需求，在页面的顶上动态显示用户的位置。这是一个常见的需求，并没有什么新鲜的，我要说的是在其中用到的一段JS代码。用户当前位置是一个字符串，在用户当前页面作为参数获取，获取到的字符串样式如：[资产管理][固定资产管理][资产清理]。这个并不是我们需要的最终形式，我们需要将其转换成如下形式：<li><a><span>资产管理</span></a></li><li><a><span>固定资产管理</span></a></li><li><a><span class="current">资产清理</span></a></li>。

对这个需求，我的思路是：第一步，把最后一个‘[’替换成：<span class="current"> 。我们很容易想到的是用JS中的replace方法，但是replace只能替换字符串中第一个匹配的。没关系，我们先不考虑replace，我们自己写一个方法来替换最后一个匹配的内容。

方法一：

//替换最后一个匹配的内容，str1 要替换的内容，str2 要替换的目标内容
function replaceLast(contain,str1,str2){
var index=contain.lastIndexOf(str1);
var subStr1=contain.substring(0,index);
var subStr2=contain.substring(index+str1.length,contain.length);
contain=subStr1+str2+subStr2;
return contain;

}

OK，问题搞定了。现在我们想想，真的不能用replace方法吗？当然是可以的，没错，和正则表达式配合。

方法二：

function replaceLast(contain){
return contain.replace(//[([^/[]*)$/,'<li><a><span class="current">$1');
}

里面的正则表达式貌似还比较复杂，简单介绍一下。/[表示你要替换的内容，/是转意字符。[^/[]表示除了[之外的任何字符。*表示出现0次、1次或者n次。$/表示在字符串的末尾匹配。<li><a><span class="current">$1表示把匹配的部分替换成：<li><a><span class="current">。

第二步是把所有的‘[’替换成：<li><a><span>，所有的‘[’替换成：</span></a></li>。这个就比较简单了，还是用replace和正则表达式。

function replaceAll(contain){
return contain.replace(//[/g,'<li><a><span>').replace(//]/g,'</span></a></li>');
}

这个相对就简单很多了，说一下/g，表示全部替换。

到此，功能就实现了。