文章/答案/技术大牛

发布

社区首页 >问答首页 >提取并替换javascript字符串中的动态占位符

问提取并替换javascript字符串中的动态占位符
EN

Stack Overflow用户

提问于 2022-06-10 15:25:15

回答 1查看 78关注 0票数 0

我需要理解并找到一种方法来替换字符串中占位符的出现。我正在为魔术开发一个应用程序，这是一款集tcg游戏。卡片的文本包含一个描述和一些符号。

让我用一个例子来更好地解释：

一些可能的字符串是"{W}{B}，{T}：防止目标生物本回合造成的所有战斗伤害“。“闪回{2}{R} (你可以把这张卡从你的墓地扔出来，以弥补它的闪回费用。然后放逐它”

这些字符串必须成为html文本，然后角可以放入DOM中。花括号之间的每一个字母或数字代表要打印的一个不同的符号。可能的符号和位置可能会有很大的变化。文字和位置是因为每一张卡片是不同的，符号是因为有大约一百个可能的符号。

在我使用的免费符号API API中，我有字母/数字与它的相对符号图像之间的关联：

interface Symbols {
    ...
    svg_uri: string;
    symbol: string
    ...
}

此对象已为每个符号映射。所以我有一个清单，像这样的项目，充满了每一个符号，它是相对的svg。

symbols: Symbol [
    {
        ...
        svg_uri: 'https://c2.scryfall.com/file/scryfall-symbols/card-symbols/W.svg'
        symbol: '{W}'
    },
    {
        ...
        svg_uri: 'https://c2.scryfall.com/file/scryfall-symbols/card-symbols/T.svg',
        symbol: '{T}'
        ...
    },
    {
        ...
        svg_uri: 'https://c2.scryfall.com/file/scryfall-symbols/card-symbols/B.svg',
        symbol: '{B}'
    }
    ...
]

前面的字符串示例的预期结果是：

<p>
    <div style="background-image: url('https://c2.scryfall.com/file/scryfall-symbols/card-symbols/W.svg" class="symbol"></div><div style="background-image: url('https://c2.scryfall.com/file/scryfall-symbols/card-symbols/B.svg" class="symbol"></div>, <div style="background-image: url('https://c2.scryfall.com/file/scryfall-symbols/card-symbols/T.svg" class="symbol"></div>: Prevent all combat damage that would be dealt by target creature this turn.
</p>

我想找个办法：

解析字符串
在花括号中识别一项
将该项与符号对象(ImageSymbol)匹配
创建带有bg图像的标记，即匹配符号的uri。
用前面提到的div替换卷括号及其内容。
使新字符串成为p标记

我的问题是，对于没有固定模式的字符串，我真的不知道解析字符串的方法。

作为上一次参考，我附上另一张不同卡的例子，其文本与我上面所引述的不同：

更新

我找到了解决办法：

this._symbolService.symbology.data.forEach((item:  CardSymbol) => {
            const regEx = new RegExp(item.symbol, 'gm');
            const replacement = `<img src="${item.svg_uri}" class="card-symbol-image"/>`;
            this.oracleText = this.oracleText.replace(regEx, replacement);
          });

这几乎是很好的，但是当符号字符串是“{0}”或任何其他数字时，它就会中断。是否有任何方法告诉ts匹配确切的字符串“{0}”(或任何其他数字)？

我希望我能解释我需要什么。

javascript

angular

string

parsing

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-06-10 16:17:54

{在Regex中有一个特殊的含义，因此它需要用反斜杠来转义。这应该是你想做的事：

this._symbolService.symbology.data.forEach((item:  CardSymbol) => {
            const regEx = new RegExp('\\' + item.symbol, 'gm');
            const replacement = `<img src="${item.svg_uri}" class="card-symbol-image"/>`;
            this.oracleText = this.oracleText.replace(regEx, replacement);
          });

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72576664

复制

相似问题

问提取并替换javascript字符串中的动态占位符
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问提取并替换javascript字符串中的动态占位符EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问提取并替换javascript字符串中的动态占位符
EN