首页 > js 字符串替换

js 字符串替换

一篇文章里N个<-IMG#> 要将这个替换成对应的图片<img src"..."/>
不是每篇文章的<-IMG#>数量都一样,怎么样才能替换上对应的图片

当然,另有数据

[{"pos":"<-IMG#0->","src":"\/ueditor\/php\/upload\/image\/20151030\/1446166308120483.jpg"},{"pos":"<-IMG#1->","src":"\/ueditor\/php\/upload\/image\/20151030\/1446166308427142.jpg"},{"pos":"<-IMG#2->","src":"\/ueditor\/php\/upload\/image\/20151030\/1446166308755375.png"},{"pos":"<-IMG#3->","src":"http:\/\/upload.opensns.cn\/Uploads_Editor_Picture_2015-10-30_5632dff0b01ab.jpg"},{"pos":"<-IMG#4->","src":"\/ueditor\/php\/upload\/image\/20151030\/1446166309290267.jpg"},{"pos":"<-IMG#5->","src":"\/ueditor\/php\/upload\/image\/20151030\/1446166309683382.jpg"},{"pos":"<-IMG#6->","src":"\/ueditor\/php\/upload\/image\/20151030\/1446166309657978.jpg"}]
<-IMG#0->
253fd4g56sdg65sd4g6sdg6v5sdfvsd5vc46sd54s4d65csdfvsdfsd
<a herf="baidu.com">sdfdsfsdfdsfs</a>
sdfvsdf5v4sd6v46sd54v6sdvsdv64sd6
sdvsd54v6sd54v
<-IMG#1->
f12sdf1sd56f16sd1fsd1fsd65fvsd165
<a herf="baidu.com">sdf54654654645fs</a>
<-IMG#2->
65sd+f5ds6+5vs+6d5v+6sdv5
vsdv5sd6+v5+sd
<a herf"baidu.com">sdfsdfsds</a>
<-IMG#3->
sdv65sd6+v5+6sd5v
<a herf="baidu.com">sdfds4353453</a>
<-IMG#4->
sdv5sd6v56sdv5+sd
dfssdf**<a herf="baidu.com">ssdfdsfsfs</a>
<-IMG#5->
sdvsdvsdv32ds3
<a herf="baidu.com">sdfdsfdsfsdsfs</a>
v52
sd6vds
5v6sd5vs+6d5vs+d5vds
<-IMG#6->
sdsad<a herf="baidu.com">sdfdsfsd5344433333s</a>
sdv1ds5vd4s65ds4564sd4v54sd

var IMG = [{"pos":"<-IMG#0->","src":"\/ueditor\/php\/upload\/image\/20151030\/1446166308120483.jpg"},{"pos":"<-IMG#1->","src":"\/ueditor\/php\/upload\/image\/20151030\/1446166308427142.jpg"},{"pos":"<-IMG#2->","src":"\/ueditor\/php\/upload\/image\/20151030\/1446166308755375.png"},{"pos":"<-IMG#3->","src":"http:\/\/upload.opensns.cn\/Uploads_Editor_Picture_2015-10-30_5632dff0b01ab.jpg"},{"pos":"<-IMG#4->","src":"\/ueditor\/php\/upload\/image\/20151030\/1446166309290267.jpg"},{"pos":"<-IMG#5->","src":"\/ueditor\/php\/upload\/image\/20151030\/1446166309683382.jpg"},{"pos":"<-IMG#6->","src":"\/ueditor\/php\/upload\/image\/20151030\/1446166309657978.jpg"}];

var data = '<-IMG#0->\n\
253fd4g56sdg65sd4g6sdg6v5sdfvsd5vc46sd54s4d65csdfvsdfsd\n\
sdfvsdf5v4sd6v46sd54v6sdvsdv64sd6\n\
sdvsd54v6sd54v\n\
<-IMG#1->\n\
f12sdf1sd56f16sd1fsd1fsd65fvsd165\n\
<-IMG#2->\n\
65sd+f5ds6+5vs+6d5v+6sdv5\n\
vsdv5sd6+v5+sd\n\
<-IMG#3->\n\
sdv65sd6+v5+6sd5v\n\
<-IMG#4->\n\
sdv5sd6v56sdv5+sd\n\
<-IMG#5->\n\
sdvsdvsdv32ds3\n\
v52\n\
sd6vds\n\
5v6sd5vs+6d5vs+d5vds\n\
<-IMG#6->\n\
sdv1ds5vd4s65ds464sd4v54sd\n\
';

//遍历数组, 将要替换的内容保存成 Key:Value 形式的
var cache = {};
for(var i=IMG.length; i--;){
    cache[IMG[i].pos] = IMG[i].src;
}

//执行替换
data = data.replace(/(<-IMG#\d+->)/g, function(a){
    return cache[a] ? ('<img src="' + cache[a] + '"/>') : a;//从缓存中找对应的, 如果没找着, 就返回原来的内容
});

console.log(data);

执行结果:


楼上答案很棒。
我的想法是因为字符<-IMG#0->中的数字刚好与数组的index相对应,因此也可以这样来替换

data = data.replace(/(<-IMG#\d->)/g, function(res) {
    var num = parseInt(/\d/g.exec(res)[0]);
    return IMG[num].pos == res ? '<img src="' + IMG[num].src + '">' : res;
})
【热门文章】
【热门文章】