如何将字符串的一部分表示为HTML中的图像？

Question

我正在开发一个个人项目，我正在使用Magic the Gathering的API搜索他们的卡片数据库并在我的网站上显示它们。我遇到的一个问题是存储在数据库中的卡对象的参数显示为{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

并且是：

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/