2

我正在用 JS 创建一个 MTG 卡片生成器，我想知道如何使用正则表达式替换卡片成本中的整数？（更多的是学习而不是出版）

card_cost 只是来自用户的输入文本值，我希望能够用空格分隔整数 IE：用户输入：“10 1 2”应该替换整数，但应该保留空格。

会这样开始：

if(card_cost)
{
card_cost=card_cost.replace(/INTEGER/g,"<span class='card_costnum' src='numsymbol.png' ></span>");
}

这里的尝试是将整数替换为它们自己保存在一个跨度内，以显示每个数字的背景图像。

现在我有时间考虑这个问题，我假设我需要获取一个整数数组，以便我可以在一个跨度内将它们传回，替换不足以正确捕获多个整数我假设。

4

5 回答 5

2

在javascriptreplace函数中，$&指的是搜索字符串本身，所以你可以写

someStr = "12 34 foo 5 bar"
someStr.replace(/\d+/g, "<span whatever>$&</span>")

返回

<span whatever>12</span> <span whatever>34</span> foo <span whatever>5</span> bar

要单独替换每个数字，只需删除+：

someStr = "12 34 foo 5 bar"
someStr.replace(/\d/g, "<span whatever>$&</span>")

返回

 <span whatever>1</span><span whatever>2</span> etc
于 2012-04-22T08:36:37.483 回答
1

要删除所有数字字符：

if(card_cost)
{
    card_cost=card_cost.replace(/\d/g,'');
}

但是，正如评论中所指出的，我不知道为什么会span出现在 中replace()，所以我删除了它，现在上面所做的是匹配数字，并删除它们，用一个空的零字符字符串替换它们。

编辑以下关于问题意图的澄清：

if(card_cost)
{
    card_cost = card_cost.replace(/(\d)/g,function(a,b){
        return '<span class="card_costnum" src="numsymbol.png">' + a + '</span>';
    });
}

JS 小提琴演示。

以上将在 中包含所有匹配的数字span，但它将匹配所有数字字符。

if(card_cost)
{
    card_cost=card_cost.replace(/\b(\d+)\b/g,function(a,b){
        return '<span class="card_costnum" src="numsymbol.png">' + a + '</span>';
    });
}

JS 小提琴演示。

此版本将匹配（一个或多个）数字字符的字边界有界序列，并将这些匹配项包装在spans 中。

参考：

于 2012-04-22T07:58:58.577 回答
0 
if(card_cost)
{
    card_cost=card_cost.replace(/\d+/g,"<span class='card_costnum' src='numsymbol.png' ></span>");
}
于 2012-04-22T08:05:19.250 回答
0

假设您正在使用 jQuery：

var theNumbers = card_cost.split(" ");
for (var i=0; i < theNumbers.length; i++) {
    $("#target_div").append("<span class='card_costnum'>"+theNumbers[i]+"</span>");
}

我认为这实现了与您所要求的非常相似的东西，但我没有使用正则表达式。

于 2012-04-22T08:19:53.933 回答
0 
if (card_cost) {
    card_cost = card_cost.replace(/(\d+)/g, '<span class="card_costnum_$1">$1</span>');
}

加上 CSS，例如：

.card_costnum_42 {
    background-image: url('card_costnum_42.png');
}
于 2012-04-22T08:36:36.593 回答