Как представить часть строки как изображение в HTML?

Question

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

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

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

Например:

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

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

Answer 1

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

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/