最近在写淘宝店铺装修软件，里面经常用到字符串替换。洒家承认是js小白一枚，但为了完成制作软件，洒家也只好学习起js来。下面来举几个制作软件中的实战应用案例。

前面共制作了三款装修软件，每一款里面都有一些相同的功能，先来说替换功能的应用，以“店铺类型”为例，如下图：，这里店铺分为“B店(天猫)”和“C店(淘宝)”，B店样式名“sn-simple-logo”，C店样式名“footer-more-trigger”。当用户在选择下拉值后，会进行页面查找并替换原来值。这样只打文字不是说的很清楚，先来放一串已截取好的源码：
var str="<div class='footer-more-trigger' style='left:50%'><div class='footer-more-trigger' style='left:-960px'></div></div>" ;
看代码是否很眼熟？全屏框架而已。既然是“footer-more-trigger”与“sn-simple-logo”二者间的替换，那得用js中的“replace”来处理了。处理方法如下：
newstr=str.replace(/footer-more-trigger/,'sn-simple-logo');
弹窗值为：
<div class='sn-simple-logo' style='left:50%'><div class='footer-more-trigger' style='left:-960px'></div></div>
乍一看确实是替换成功了，但只替换了前面一个，而后面的一个并没有替换，这里需要稍做修改成全局替换。
newstr=str.replace(/footer-more-trigger/g,'sn-simple-logo');
再次弹出时即可看到已经全部替换完成了。怎么样，是不是好有成就感？如果此时感觉自己已经会了js替换字符串操作的话，那就错了。

再来实例二：以“动画时长”为例，截图如下：
功能实现：下拉选取值后，jq进行查找位置后截取原值并替换当前值。还是先提供一串代码来进行解说吧，代码如下：
var str="{'effect':'scrollx','easing':'elasticIn','duration':0.5,'delay':0.5,'autoplay':true}";
上面提供的是要替换的一段字符串，下面我们先来进行截取“'duration':”到“,”这之间的取值。我猜会有许多小伙伴这样写：
newstr=str.substring(str.indexOf("'duration':")+11,str.indexOf(",'delay':"));
或者是这样写：
newstr=str.split(',')[11].split(':')[1];
虽然弹窗值都是正确的，但明显两种方法均有不足之处。第一种：若“duration”的后面的“delay”在其之前，那么取值就是错误的，同理，第二种也是一样，如果“duration”前面的“,”超过两个时，取值也会有误。这个问题困扰了我一天，最后公司一小伙伴帮我解决了，附写法：
newstr=str.substring(str.indexOf("'duration':"),str.indexOf(",",str.indexOf("'duration':")+11));
这种原理是：将“'duration':0.5,”整体截取出来，然后整体替换，这样就避免了与其它值相同的问题了。

从小白的角度写下此文，经验略不足，有待日后提升。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2014-08-08/186.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。