Заменить текст для изображений jQuery

0

Я пытаюсь заменить обычный текст для изображений с помощью jQuery. Текст всегда находится между скобками, например: {x} Однако проблема заключается в том, что всегда есть несколько квадратных скобок, которые я хочу превратить в образы. Таким образом, {1}{w}{w} должно стать <img src="1.png"><img src="w.png"><img src="w.png">

Итак, dr: Мне нужен способ сделать это:

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

В этом:

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

Заранее спасибо.

  • 1
    Я думаю, что ваша жизнь будет проще, если вы проверите шаблонизатор (например, усы или руль)
Теги:

2 ответа

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

Поделиться
  • 0
    Мне нравится этот фрагмент из-за его простоты. Однако, что если бы у меня было несколько экземпляров .manacost? Вы можете увидеть, что я имею в виду здесь: magicunited.microdesign.nl/product-category/BNG
  • 1
    @Джефферсон Я обновил свой ответ
Показать ещё 1 комментарий
2 
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+'"/>');
});
Поделиться
  • 0
    Отлично, Джон. Абсолютно блестящий. Большое спасибо, сэр!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню