Question

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

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

会这样开始：

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

这里的尝试是用跨度内的整数替换整数来显示每个数字的背景图像。

现在我已经有时间考虑这个了，我假设我需要得到一个整数数组，这样我就可以在一个范围内传回它们，替换不足以正确捕获多个整数我假设。

Answer 1

在javascript replace函数中，$&指的是搜索字符串本身，因此您可以编写

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

Answer 2

删除所有数字字符：

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 Fiddle demo

以上内容将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 Fiddle demo

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

参考文献：

Answer 3

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

Answer 4

让我们假设你正在使用jQuery：

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

我认为这可以达到与你要求的非常相似的东西，但我没有使用正则表达式。

Answer 5

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');
}

正则表达式替换由空格分隔的整数

5 个答案: