Question

我有一个javascript模板，我想在整个模板中的多个位置替换一个设置值，但是在我当前的代码中，只有值占位符的第一个实例正在发生变化。

如何使用相同的值替换所有{{color}}占位符？

我的模板：

<script type="text/template" id="styleTemplate">    
.item {
    color: {{color}};
    border-color:{{color}};
}
</script>

我的JS：

var thisColor = "#000";
var template = $("#styleTemplate").html();
$('#styleTarget').html(template.replace("{{color}}",thisColor));

结果：

.item {
    color: #000;
    border-color:{{color}};
}

Answer 1

Akamaozu 真的太懒了，无法让他的代码有效。正则表达式必须包含在斜杠中，而不是反斜杠中。当您必须转义具有特殊含义的字符或创建具有特殊含义的元字符时，正则表达式中需要反斜杠。因此，当您将代码更改为此代码时，它将起作用：

var thisColor = "#000",
    search = /{{color}}/g,
    template = $("#styleTemplate").html();

$('#styleTarget').html(template.replace(search, thisColor));

DEMO

Answer 2

替换：

$('#styleTarget').html(template.replace("{{color}}",thisColor));

使用：

$('#styleTarget').html(template.replace(\{{color}}\g,thisColor));

String.prototype.replace将仅替换第一场比赛。我所做的是将搜索字符串替换为将搜索所述搜索字符串的所有实例的正则表达式。

干杯！

在javascript模板中替换相同值的多个实例

2 个答案: