Question

我正在尝试使用jQuery替换图像的纯文本。文本总是在括号之间，如下所示：{x}但问题是，总是有多个括号内的字母，我想变成图像。因此{1}{w}{w}应该成为<img src="1.png"><img src="w.png"><img src="w.png">

所以tl;博士：我需要一种方法来解决这个问题：

<div class="manacost">{1}{w}{w}</div>

进入这个：

<div class="manacost"><img src="1.png'><img src="w.png"><img src="w.png"></div>

提前致谢。

Answer 1

var content = $('.manacost').text();
var values = [], re = /{([^}]+)}/g, text;

while(text = re.exec(content)) {
    values.push(text[1]);
}
$('.manacost').text('');
$.each( values, function( k, v ) {
  // I don't know where you want to put
  $('.manacost').append('<img src"'+v+'.png" alt="'+k+'"/>');
});

Answer 2

使用replace方法：

"{1}{w}{w}".replace(/\{([0-z]+)\}/g, "<img src='$1.png'>");

DEMO

更新：如果您有多个.manacost容器，请尝试以下操作：

$('.manacost').html(function (index, text) {
    this.innerHTML = text.replace(/\{([0-z]+)\}/g, "<img src='$1.png'>")
});

DEMO

替换图像jQuery的文本

2 个答案: