Блог

Я работаю над личным проектом, в котором я использую API Magic the Gathering для поиска по их карточным базам данных и отображения их на своем веб-сайте. Одна из проблем, с которыми я столкнулся, заключается в том, что аргумент объекта card, который хранится в базе данных, отображается как {G}, {R}, {B}, {U}, {W} и т.д. Но я хочу, чтобы он отображался как одно из многих изображений, найденных здесь:

https://media-dominaria.cursecdn.com/attachments/132/91/635465459096129102.png

Учитывая, что аргумент является строкой, я не знаю, как заменить содержимое строки, которая находится внутри фигурных скобок, элементом html image и правильно отобразить его в браузере.

Например:

mana_cost= «{G}{W}»

Я хотел бы иметь возможность отображать «{G}» как: http://img2.wikia.nocookie.net/__cb20130604114032/mtg/images/f/f7/Mana_G.png

и «{W}» как:

https://static.giantbomb.com/uploads/original/8/88760/2277116-white_mana.png

Любая помощь приветствуется

Вы можете использовать регулярное выражение на стороне клиента и заменить его изображением перед отображением в браузере.

 let strToReplace = '{G}';

strToReplace = strToReplace.replace(/{G}/, '<img src="http://img2.wikia.nocookie.net/__cb20130604114032/mtg/images/f/f7/Mana_G.png">');
  

Я бы загрузил изображение и поместил его в локальную папку, чтобы вы могли заменить его на что-то вроде:

strToReplace = strToReplace.replace(/{G}/, '<img src="/images/Mana_G.png">');

скрипка: https://jsfiddle.net/649y20s3 /